Android TabHost + RadioButton实现Tab导航栏

    xiaoxiao2021-12-10  20

    最近闲着无事,看了很多的关于项目中的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都是可以的

    转载请注明原文地址: https://ju.6miu.com/read-700286.html

    最新回复(0)