android 标签页布局,Material Design学习：TabLayout+Viewpager制作一个标签页

简介

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

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

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"/>

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"/>

步骤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: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:id="@+id/vp_main"

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="1"

>

属性说明：

| 属性 | 含义 |

| -------- | ----- | ---- |

|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);

}

}