最近闲着无事,看了很多的关于项目中的Tab导航栏的实现,最近也好久没更新了,整理了我认为比较好的实现方式:TabHost + RadioButton,相信tabHost大家都比较熟悉,在这里就不在介绍了,感兴趣的可以自己去看看。
我们来先看布局:
activity_main.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="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="0.0dip"
android:layout_weight="1.0" >
</FrameLayout>
<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone" >
</TabWidget>
<RadioGroup
android:id="@+id/radioGroup"
android:layout_width="match_parent"
android:layout_height="@dimen/title_bottom_height"
android:background="@color/background_bottomBar"
android:orientation="horizontal" >
<RadioButton
android:id="@+id/position"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:checked="true"
android:drawableTop="@drawable/btn_position"
android:button="@null"
android:text="职位"
android:textColor="@color/btn_text_color"
android:textSize="@dimen/sp12"
android:gravity="center"
android:paddingTop="@dimen/dp5"
/>
<RadioButton
android:id="@+id/training"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:drawableTop="@drawable/btn_training"
android:button="@null"
android:text="培训"
android:textSize="@dimen/sp12"
android:textColor="@color/btn_text_color"
android:gravity="center"
android:paddingTop="@dimen/dp5"
/>
<RadioButton
android:id="@+id/found"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:drawableTop="@drawable/btn_found"
android:textColor="@color/btn_text_color"
android:text="发现"
android:textSize="@dimen/sp12"
android:gravity="center"
android:paddingTop="@dimen/dp5"
android:button="@null"
/>
<RadioButton
android:id="@+id/message"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:drawableTop="@drawable/btn_message"
android:button="@null"
android:text="消息"
android:textSize="@dimen/sp12"
android:textColor="@color/btn_text_color"
android:gravity="center"
android:paddingTop="@dimen/dp5"
/>
<RadioButton
android:id="@+id/my"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:drawableTop="@drawable/btn_my"
android:text="我的"
android:textSize="@dimen/sp12"
android:textColor="@color/btn_text_color"
android:gravity="center"
android:paddingTop="@dimen/dp5"
android:button="@null"
/>
</RadioGroup>
</LinearLayout>
</TabHost>
布局很简单,最外层tabHost,里面是radioGroup包裹的radioButton,在这里就不一一赘述了。
下面我们来看代码:
MainActivity.class:
public class MainActivity extends TabActivity {
private static final String TAG = MainActivity.class.getName();
private RadioGroup radioGroup;
private TabHost tabHost;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
radioGroup = (RadioGroup) findViewById(R.id.radioGroup);
tabHost = (TabHost) findViewById(android.R.id.tabhost);
initTabs();
}
private void initTabs() {
tabHost.setFocusable(true);
tabHost.setCurrentTab(0);
TabHost.TabSpec tabSpec = tabHost.newTabSpec("0");
Intent intent = new Intent(this, PositionActivity.class);
tabSpec.setIndicator("position").setContent(intent);
tabHost.setup(this.getLocalActivityManager());
tabHost.addTab(tabSpec);
TabHost.TabSpec tabSpec2 = tabHost.newTabSpec("1");
Intent intent2 = new Intent(this, TrainingActivity.class);
tabSpec2.setIndicator("training").setContent(intent2);
tabHost.addTab(tabSpec2);
TabHost.TabSpec tabSpec3 = tabHost.newTabSpec("2");
Intent intent3 = new Intent(this, FoundActivity.class);
tabSpec3.setIndicator("found").setContent(intent3);
tabHost.addTab(tabSpec3);
TabHost.TabSpec tabSpec4 = tabHost.newTabSpec("3");
Intent intent4 = new Intent(this, MessageActivity.class);
tabSpec4.setIndicator("message").setContent(intent4);
tabHost.addTab(tabSpec4);
TabHost.TabSpec tabSpec5 = tabHost.newTabSpec("4");
Intent intent5 = new Intent(this, MyActivity.class);
tabSpec5.setIndicator("my").setContent(intent5);
tabHost.addTab(tabSpec5);
radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId) {
case R.id.position:
tabHost.setCurrentTab(0);
break;
case R.id.training:
tabHost.setCurrentTab(1);
break;
case R.id.found:
tabHost.setCurrentTab(2);
break;
case R.id.message:
tabHost.setCurrentTab(3);
break;
case R.id.my:
tabHost.setCurrentTab(4);
break;
}
}
});
}
大家可以看到这里MainActivity继承的是TabActivity,这里值得注意的是tabHost初始化的时候必须是android.R.id;主要原理是:利用Intent跳转,设置下标,radioGroup的监听事件:setOnCheckedClick,相信大家都能看懂,是不是很简单呢,
当然实现方式很多,谷歌5.0之后推出的tabLayout +ViewPager也是可以实现的,tabHost+Fragment都是可以的