简介
TabLayout是Design包中新推出的控件。可以配合着ViewPager和Fragment的使用，帮助开发者们分分钟打造一个滑动标签页。
- 顶部标签页（如知乎）
- 底部菜单栏（如微信）
效果展示
效果
实现步骤
- 添加依赖
- 创建需要的Fragment布局文件
（需要多少个Tab选项，就建多少个Fragment） - 创建对应的Fragmen类
- 创建Viewpager适配器Adapter
- 在布局中使用TabLayout
- 在MainActivity中使用
步骤1. 添加依赖
build.gradle
compile 'com.android.support:design:24.0.0'
步骤2. 创建Fragment布局文件
创建
fragment1.xml 下文为fragment1.xml
fragment2.xml
fragment3.xml
<RelativeLayout 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">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="218dp"
android:text="Page:"
android:textSize="20sp"
android:textStyle="bold"/>
<TextView
android:id="@+id/titile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textView"
android:layout_centerHorizontal="true"
android:textSize="50sp"
android:text="1"/>
</RelativeLayout>
步骤3. 创建Fragment类
创建
Fragment1.java 下文为Fragment1.java
Fragment2.java
Fragment3.java
public class Fragment1 extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment1, container, false);
}
}
步骤4. 创建Viewpager适配器MyFragmentPagerAdapter
public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
private String[] mTitles = new String[]{"Tab 1", "Tab 2", "Tab 3"};
public MyFragmentPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
if (position == 1) {
return new Fragment2();
} else if (position == 2) {
return new Fragment3();
}
return new Fragment1();
}
@Override
public int getCount() {
return mTitles.length;
}
//用来设置tab的标题
@Override
public CharSequence getPageTitle(int position) {
return mTitles[position];
}
}
步骤5. 在布局中使用TabLayout
<android.support.design.widget.TabLayout
android:id="@+id/tab_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#EF8D11"
app:tabIndicatorColor="#f00"
app:tabIndicatorHeight="4dp"
app:tabMode="fixed"
app:tabSelectedTextColor="#FFFFFF"
app:tabTextColor="#FFFFFF"
>
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/vp_main"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
</android.support.v4.view.ViewPager>
属性说明：
| 属性 | 含义 |
| -------- | ----- | ---- |
|app:tabIndicatorColor="#EF4A11" | tab文字下方的那条线的颜色 |
|app:tabMode="scrollable" | 如果tab过多超出屏幕宽度可以水平滚动|
| app:tabMode="fixed" | 底部tab布局不可滑动 |
|app:tabSelectedTextColor="#FFFFFF" | tab被选中的时候文字的颜色|
|app:tabTextColor="#FFFFFF" | tab未被选中时文字的颜色|
|app:tabIndicatorHeight="0dp" | 不显示tab底部的横线 |
注：
- scrollable可以滑动，向左对齐，如今日头条，网易新闻就是scrollable，但是在Tab选项卡较少时会无法填满TabLayout栏。
- fixed则无法滑动，每个选项卡平均分配空间，适合较少Tab选项卡的情况，当选项卡较多时，会出现每个选项卡内容无法显示完整的情况
步骤6.在MainActivity中使用
public class MainActivity extends AppCompatActivity {
private TabLayout mTabLayout;
private ViewPager mViewPager;
private MyFragmentPagerAdapter myFragmentPagerAdapter;
private TabLayout.Tab one;
private TabLayout.Tab two;
private TabLayout.Tab three;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mTabLayout = (TabLayout) findViewById(R.id.tab_main);
mViewPager = (ViewPager) findViewById(R.id.vp_main);
myFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
mViewPager.setAdapter(myFragmentPagerAdapter);
//将TabLayout和ViewPager绑定在一起，使双方各自的改变都能直接影响另一方，解放了开发人员对双方变动事件的监听
mTabLayout.setupWithViewPager(mViewPager);
//指定Tab的位置
one = mTabLayout.getTabAt(0);
two = mTabLayout.getTabAt(1);
three = mTabLayout.getTabAt(2);
//给tab设置图标
one.setIcon(R.mipmap.ic_launcher);
}
}
这里是项目地址
