Material Design学习：TabLayout+View

简介

TabLayout是Design包中新推出的控件。可以配合着ViewPager和Fragment的使用，帮助开发者们分分钟打造一个滑动标签页。

• 顶部标签页（如知乎）
• 底部菜单栏（如微信）

效果展示

效果

实现步骤

1. 添加依赖
2. 创建需要的Fragment布局文件
   （需要多少个Tab选项，就建多少个Fragment）
3. 创建对应的Fragmen类
4. 创建Viewpager适配器Adapter
5. 在布局中使用TabLayout
6. 在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);
 }
}

这里是项目地址

参考
http://www.jianshu.com/p/ce1d060573ba