简介
FragmentTabHost是support-v包下提供的用于集成和管理Fragment页面的组件。从4.0.3版本开始,谷歌就将选项卡TabHost、TabWidget替换为FragmentTabHost+LayoutInflatert,更方便搬砖的我们实现底部菜单切换页面的功能,如微信的页面切换。
我个人觉得用FragmentTabHost比ViewPager好用的地方是,前者没有预加载一说,与fragment一起使用清爽无比。
废话不多说,先来一张效果图
实例
activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.gwt.testfragmenttabhost.MainActivity"> <!--内容布局--> <FrameLayout android:id="@+id/fl_container" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/> <View android:layout_width="match_parent" android:layout_height="0.5dp" android:background="@color/colord2d2d2"/> <!--标签切换--> <android.support.v4.app.FragmentTabHost android:id="@+id/fragment_tab" android:layout_width="match_parent" android:layout_height="wrap_content"> <FrameLayout android:id="@+id/fl_fragment_tab" android:layout_width="0dp" android:layout_height="0dp" android:layout_weight="0"> </FrameLayout> </android.support.v4.app.FragmentTabHost> </LinearLayout>
每个按钮的布局 tab_layout.xnl
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center_horizontal" android:orientation="vertical"> <ImageView android:id="@+id/image" android:layout_marginTop="6dp" android:layout_width="22dp" android:layout_height="22dp" android:layout_gravity="center_horizontal" /> <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="6dp" android:layout_marginBottom="6dp" android:textColor="@color/color3a3a3a" /> </LinearLayout>
创建4个fragment,对你来说肯定很简单,代码就不粘贴了,想看源码的文章最后有链接
图片的选择器
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/tab_icon_class_pre" android:state_focused="true" /> <item android:drawable="@drawable/tab_icon_class_pre" android:state_selected="true" /> <item android:drawable="@drawable/tab_icon_class" /> </selector>
MainActivity.class(精华所在)
public class MainActivity extends AppCompatActivity { private FrameLayout flContainer; private FragmentTabHost tabHost; private FrameLayout flTab; private String[] tabNames = {"首页", "题库", "课程", "我的"}; private int[] imageButton = {R.drawable.tab_home_selector, R.drawable.tab_exercises_selector, R.drawable.tab_course_selector, R.drawable.tab_mine_selector}; private Class[] fragmentArray = {OneFragment.class, TwoFragment.class, ThreeFragment.class, FourFragment.class}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); initData(); } private void initView() { flContainer = findViewById(R.id.fl_container); tabHost = findViewById(R.id.fragment_tab); flTab = findViewById(R.id.fl_fragment_tab); } private void initData() { tabHost.setup(this, getSupportFragmentManager(), R.id.fl_container); for (int i = 0; i < tabNames.length; i++) { // 给每一个Tabbutton设置图标、文字和内容 TabHost.TabSpec tabSpec = tabHost.newTabSpec(tabNames[i]).setIndicator(getButtonView(i)); // 将Tabbutton加入进Tab选项卡中 tabHost.addTab(tabSpec, fragmentArray[i], null); //去掉分隔的竖线 tabHost.getTabWidget().setShowDividers(LinearLayout.SHOW_DIVIDER_NONE); } } /** * 获取每一个选项 * @param index * @return */ public View getButtonView(int index) { View view = LayoutInflater.from(this).inflate(R.layout.tab_layout, null); ImageView imageView = view.findViewById(R.id.image); //设置图标 imageView.setImageResource(imageButton[index]); TextView textView = view.findViewById(R.id.text); //设置文字 textView.setText(tabNames[index]); return view; } }
FragmentTabHost使用代码不多,对你来说是小 case 吧 !!!!