Android导航栏的不同实现（用RadioButton代替Widget、自定义的带有滑动动画的TabHost）
1.用RadioGroup代替Widget是比较传统的使用方式，这里面最主要的是对RadioButton的style的定义，可定义上图下字，左图右字，传统使用方式。
首先贴出XML布局文件：
<?xml version="1.0" encoding="utf-8"?> <TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/tabhost" android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="0.0dip" android:layout_weight="1.0" /> <TabWidget android:id="@android:id/tabs" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="0.0" android:visibility="gone" /> <RadioGroup android:id="@id/main_radio" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:orientation="horizontal" android:gravity="center_vertical" android:background="#40352F"> <RadioButton android:id="@id/radio_btn0" android:gravity="center_vertical" style="@style/mian_tab1_bottom" /> <RadioButton android:id="@id/radio_btn1" android:gravity="center_vertical" style="@style/mian_tab2_bottom" /> <RadioButton android:id="@id/radio_btn2" style="@style/mian_tab3_bottom" android:gravity="center_vertical" /> <RadioButton android:id="@id/radio_btn4" style="@style/mian_tab4_bottom" android:gravity="center_vertical" /> </RadioGroup> </LinearLayout> </TabHost>
布局文件中将Widget是gone掉了，然后用RadioGroup代替，每个RadioButton都可以写出自己特色的布局风格，我贴出来一个Style供大家参考，其余同理
<style name="mian_tab1_bottom"> <item name="android:gravity">center</item> <item name="android:background">@drawable/select_dingyue</item> <item name="android:layout_width">fill_parent</item> <item name="android:layout_height">wrap_content</item> <item name="android:button">@null</item> <item name="android:layout_weight">1.0</item> </style>
从布局中得知，每个RadioButton的button属性是@null,也就是抹去了RadioButton原有的风格，backgroud是带有点击效果的，XML文件为：
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_focused="true" android:state_enabled="true" android:state_pressed="false" android:drawable="@drawable/dingyue" /> <item android:state_enabled="true" android:state_pressed="true" android:drawable="@drawable/dingyue" /> <item android:state_enabled="true" android:state_checked="true" android:drawable="@drawable/dingyue_press" /> <item android:drawable="@drawable/dingyue" /> </selector>
相当于给每个按钮添加了点击效果，按下去后是什么样，之前是什么样。我这里面是整个按钮是一张图，图上面既有图标又有文字，有的同学估计考虑到适配的问题，不想这么做，想在按钮上只添加图标，文字是自己往上写，那么这个方案对应的布局是：
<RadioGroup android:id="@id/main_radio" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:orientation="horizontal" android:gravity="center_vertical" > <RadioButton android:id="@id/radio_btn0" android:text="@string/main_manhua" android:drawableTop="@drawable/manhuaicon_press" style="@style/mian_tab_bottom" android:checked="true" /> <RadioButton android:id="@id/radio_btn1" android:text="@string/main_download" android:drawableTop="@drawable/downloadicon" style="@style/mian_tab_bottom" /> <RadioButton android:id="@id/radio_btn2" android:text="@string/main_setting" android:drawableTop="@drawable/settingicon" style="@style/mian_tab_bottom" /> </RadioGroup>
上图下字，而且第一个按钮默认是选中状态的，Style对应的风格是：
<style name="mian_tab_bottom"> <item name="android:textSize">12sp</item> <item name="android:textColor">#ffffffff</item> <item name="android:ellipsize">marquee</item> <item name="android:gravity">center_horizontal</item> <item name="android:background">@drawable/tab_btn_unpress</item> <item name="android:paddingTop">5.0dip</item> <item name="android:paddingBottom">2.0dip</item> <item name="android:layout_width">fill_parent</item> <item name="android:layout_height">wrap_content</item> <item name="android:button">@null</item> <item name="android:singleLine">true</item> <item name="android:layout_weight">1.0</item> <item name="android:drawablePadding">2.0dip</item> </style>
最重要的是这几个按钮是公用一个Style。
在Activity中的调用方法：
public class ActMain extends TabActivity implements OnCheckedChangeListener{ private Intent mIntentA; private Intent mIntentB; private Intent mIntentC; private RadioGroup mGroup; public static RadioButton radio_0,radio_1,radio_2; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.main); mGroup = (RadioGroup)findViewById(R.id.main_radio); radio_0 = (RadioButton)findViewById(R.id.radio_btn0); radio_1 = (RadioButton)findViewById(R.id.radio_btn1); radio_2 = (RadioButton)findViewById(R.id.radio_btn2); this.mIntentA = new Intent(this, ActMyCartoon.class); this.mIntentB = new Intent(this, ActDownLoad.class); this.mIntentC = new Intent(this, ActSetting.class); radio_0.setOnCheckedChangeListener(this); radio_1.setOnCheckedChangeListener(this); radio_2.setOnCheckedChangeListener(this); setupIntent(); //这个mTabHost是个全局的Tabhost,方便控制content的对应显示
Constant.mTabHost.setCurrentTab(0); } //OnCheckedChangeListener监听有两种，一种是RadioGroup对应的，一种是RadioButton对应的，此处我们调用的是RadioButton对应的监听，我在项目实践中发现
调用RadioGroup的OnCheckedChangeListener会出现选项卡切换失效的情况
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { if(isChecked) { switch (buttonView.getId()) { case R.id.radio_btn0: Constant.mTabHost.setCurrentTabByTag("a"); //这个是给我们的RadioButton中的icon也就是里面的小图标设置不同的切换效果，比如我下方有三个选项卡，我每次切换背景不变但是对应的icon的颜色发生变化就得调用这个方法
//从而在切换时达到背景不变化icon变化的效果，同时还有文字的颜色的变化
buttonView.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.manhuaicon_press), null, null); radio_0.setTextColor(Color.parseColor("#5DD2DC")); break; case R.id.radio_btn1: Constant.mTabHost.setCurrentTabByTag("b"); buttonView.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.downloadicon_press), null, null); radio_1.setTextColor(Color.parseColor("#5DD2DC")); break; case R.id.radio_btn2: Constant.mTabHost.setCurrentTabByTag("c"); buttonView.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.settingicon_press), null, null); radio_2.setTextColor(Color.parseColor("#5DD2DC")); break; } }else { switch (buttonView.getId()) { case R.id.radio_btn0: buttonView.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.manhuaicon), null, null); radio_0.setTextColor(Color.parseColor("#ffffff")); break; case R.id.radio_btn1: buttonView.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.downloadicon), null, null); radio_1.setTextColor(Color.parseColor("#ffffff")); break; case R.id.radio_btn2: buttonView.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.settingicon), null, null); radio_2.setTextColor(Color.parseColor("#ffffff")); break; } } } //其实这就是每个选项卡对应的要跳转的Act
private void setupIntent() { Constant.mTabHost = getTabHost(); TabHost localhHost = Constant.mTabHost; localhHost.addTab(buildTabSpec("a", R.string.main_manhua, R.drawable.manhuaicon, mIntentA)); localhHost.addTab(buildTabSpec("b", R.string.main_download, R.drawable.downloadicon, mIntentB)); localhHost.addTab(buildTabSpec("c", R.string.main_setting, R.drawable.settingicon, mIntentC)); } private TabHost.TabSpec buildTabSpec(String tag, int resLabel, int resIcon, final Intent content) { return Constant.mTabHost .newTabSpec(tag) .setIndicator(getString(resLabel), getResources().getDrawable(resIcon)) .setContent(content); }
比如我每个选项卡对应的Act分别为A、B、C，那么在这三个Act的OnResume()方法中调用Constant.mTabHost.setcurrentTab(0)、Constant.mTabHost.setcurrentTab(1)、Constant.mTabHost.setcurrentTab(2)。为什么在OnResume中大家想想就知道怎么回事了。
