Material Design学习:TabLayout+Viewpager制作一个标签页

2017-01-14 15:51:19来源:http://www.jianshu.com/p/51f3a17df49d作者:HongJay人点击

第七城市
简介

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

这里是项目地址


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




第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台