最近在学习android,在开发中需要实现一个底部导航栏功能,与微信底部导航类似。
效果图如下:
网上查看了很多资料,并没有发现相关控件(可能本人是个菜鸟级别的)。
于是选用了网上较流行的一种方式实现。那就是采用radiobutton+fragment的方式实现。
原理很简单:在窗口底部放上一排radiobutton,通过StateListDrawable设置按钮状态变化的显示效果,通过监控点击按钮事件,为窗口添加fragment。
以下是主要的实现步骤:
1.窗口布局
外层采用RelativeLayout布局,内层放入一个FrameLayout与一个LinearLayout布局,LinearLayout放置在窗口底部,在其内部放入radiogroup及radiobutton
FrameLayout 配置代码
<FrameLayout android:layout_height="fill_parent" android:layout_width="fill_parent" android:orientation="vertical" android:layout_above="@+id/linearLayout" android:id="@+id/main_fragment"> </FrameLayout>
LinearLayout布局代码
<LinearLayout android:layout_alignParentBottom="true" android:layout_height="wrap_content" android:layout_width="match_parent" android:orientation="horizontal" android:id="@+id/linearLayout">
radiogroup及radiobutton部分代码
<RadioGroup android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <RadioButton//该配置来源于网上,直接使用即可 android:id="@+id/bt_bottom_near" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_gravity="bottom" android:layout_weight="1" android:background="@android:color/transparent" android:button="@null" android:checked="true" android:drawableTop="@drawable/near_bt_selector"//设置背景图片变换效果 android:gravity="center_horizontal|bottom" android:paddingTop="2dp" android:text="@string/bt_bottom_near" android:textColor="@drawable/bottom_bt_text_color" />//设置字体变换效果 ......
near_bt_selector.xml 代码
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="true" android:drawable="@drawable/near_active">//选中状态显示效果 </item> <item android:state_checked="false" android:drawable="@drawable/near_black"></item>//未被选中样式效果 </selector>
bottom_bt_text_color.xml代码
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="true" android:color="@android:color/holo_orange_dark"/>//选中颜色 <item android:state_checked="false" android:color="@android:color/black"/>//未被选中颜色 <item android:color="@android:color/black"/>//初始颜色 </selector>
到这里,xml的配置都已经做好了。
2.实现打开fragment,fragment之间切换,定义按钮的click事件
主要代码如下,主要在click事件里打开一个fragment。
@Override public void onClick(View v) { MsgFragment msgFragment = new MsgFragment();//新建fragment实例 Bundle args = new Bundle();//绑定参数 args.putString("args", getResources().getString(R.string.bt_bottom_msg)); msgFragment.setArguments(args); fragmentManager.beginTransaction().replace(R.id.main_fragment, msgFragment).commit();//记得提交 }
3.fragment类的实现,需要继承Fragment基类(需要注意版本问题)
主要代码
@Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_msg, container, false);//获得视图 tvMsgShow = (TextView) view.findViewById(R.id.msgShow); tvMsgShow.setText(getArguments().getString("args"));//显示参数值 return view; }
OK,这里主要的功能都已实现。代码只提供了部分,但是相信大家还是能根据提示完成自己的功能。
相关推荐
而且实现它的方式很多,今天我们就来使用RadioButton+Fragment实现底部导航栏! 下面就让我们动手吧,首先我们打开RadioButtonDemo这个项目,首先修改activity_main.xml文件如下: <?xml version=1.0 encoding=...
利用RadioButton、Fragment实现底部Tab导航栏
fragment+radioGroup实现QQ底部导航栏页面切换,自定义RadioButton调整图片大小
在App中经常看到这样的tab底部导航栏 那么这种效果是如何实现,实现的方式有很多种,最常见的就是使用Fragment+RadioButton去实现。下面我们来写一个例子 首先我们先在activity_mian.xml定义布局,整个布局的外面是...
demo是三种实现底部导航栏的方式,第一种是LinearLayout+textView+fragment实现,第二种是RadioButton+fragement实现,第三种是使用google开发的ButtonNavigationBar+fragment实现,目前没有加入ViewPager,所以无法滑动...
实现仿QQ微信....各类app的Fragment底部导航栏之RadioButton
1.ViewPager简单介绍 ViewPager就是一个简单的页面切换组件,我们可以往里面填充多个View,然后我们可以左右滑动...另外,Google官方是建议我们使用Fragment来填充ViewPager的,这样> 可以更加方便的生成每个Page,以及
以前做项目大多用的radiobutton,今天用tablayout来做一个tab切换页面的的效果. 实现的效果就是类似QQ.微信的页面间(也就是Fragment间)的切换.如图: 布局只要一个tablayout <android.support.design.widget....
这个demo主要是实现android的底部导航栏,使用的是fragment+fragmenttabhost,阿牛是用radiobutton实现的.希望能够帮助需要的同学.
实现方式 实现的方式有很多种 这里总结最常见的几种方式,以后再添加其他的。 viewPager + RadioGroup viewPager + FragmentTabHost viewpager +TabLayout viewPager+RadioGroup 感觉这是最简单的一个了,我也就不贴...
Android底部导航栏封装 一、概述 现在Android底部导航的设计风格已经十分普及,实现起来都比较繁琐。本着程序猿能偷懒就偷懒的原则,所以笔者封装了下View。 目前比较流行的解决方案大致有一下几种: 1、viewpager...