每个APP主页底部都少不了有带图标、标题的导航栏,有必要整理一下,下次直接拿过来用
废话少说上代码:
主布局:
<RadioGroup android:id="@+id/rg_navigation" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:background="#eee" android:padding="5dp" android:fadingEdge="none" android:orientation="horizontal"> <RadioButton android:id="@+id/rb_card_main" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:textColor="@color/red_black_text_selector" android:gravity="center_horizontal" android:drawableTop="@drawable/icon_selector" android:checked="true" android:button="@color/transparent" android:text="首页" /> <RadioButton android:id="@+id/rb_card_list" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:textColor="@color/red_black_text_selector" android:gravity="center_horizontal" android:drawableTop="@drawable/icon_selector" android:button="@null" android:text="主页" /> </RadioGroup>
里面的干货就是两个选择器:
red_black_text_selector.xml
1 <selector xmlns:android="http://schemas.android.com/apk/res/android"> 2 <item android:color="@android:color/holo_red_light" android:state_checked="true" /> 3 <item android:color="@android:color/black" android:state_checked="false" /> 4 </selector>
icon_selector.xml
1 <selector xmlns:android="http://schemas.android.com/apk/res/android"> 2 <item android:drawable="@drawable/icon_chat_emoji_checked" android:state_checked="true" /> 3 <item android:drawable="@drawable/icon_chat_emoji_normal" android:state_checked="false" /> 4 </selector>
如果drawableTop引入的图片大小不能满足要求,可以设置:
1 RadioButton rb_main = (RadioButton) findViewById(R.id.rb_card_main); 2 RadioButton rb_list = (RadioButton) findViewById(R.id.rb_card_list); 3 Drawable[] mainDrawables = rb_main.getCompoundDrawables(); 4 Drawable[] listDrawables = rb_list.getCompoundDrawables(); 5 mainDrawables[1].setBounds(0,0,100,100);//100 分别代表宽、高 6 listDrawables[1].setBounds(0,0,100,100); 7 rb_main.setCompoundDrawables(null,mainDrawables[1],null,null); 8 rb_list.setCompoundDrawables(null,listDrawables[1],null,null);
下一步要做的就是点击事件了
1 RadioGroup rg = (RadioGroup) findViewById(R.id.rg_navigation); 2 rg.setOnCheckedChangeListener(this); 3 4 @Override 5 public void onCheckedChanged(RadioGroup group, int checkedId) { 6 if (checkedId == R.id.rb_card_main) { 7 //首页的操作 8 } else if (checkedId == R.id.rb_card_list) { 9 //切换页面的操作 10 } 11 }
本文为博主原创文章,请尊重版权,未经博主允许不得转载,转载请注明出处:http://www.cnblogs.com/details-666/p/navigation.html
说明一下:
1、Android:button="@null"
android:button="@color/transparent"
两种设置都可以隐藏我们通常所见的 RadioButton 中的圆形选中按钮.
2、red_black_text_selector.xml
设置字体颜色的选择器,需要稍作说明的是:需要在 res 目录下新建一个
文件夹取名为 color ,将字体颜色选择器 radiobutton_textcolor.xml 文件存放在 res/color/ 目录下面。
3、icon_selector.xml
设置的背景/图片选择器,放在 Res/drawable/下
4、同一组RadioGroup 里面的RadioButton 会出现多选状态的情况:
因为每个radiobutton要有一个唯一的id,添加id后就成单选了.
噢噢,一个简单的底部导航栏到此就搞定了····