TabLayout+Fragment实现顶部选项卡

MaterialDesign使用 (一) TabLyout的使用

使用TabLayout+Fragment实现顶部选项卡

2016/9/7 星期三

先看效果图:

使用Tablayout,首先需要在项目中加入Design包

dependencies {    compile 'com.android.support:design:24.1.1' }

在activity_main.xml布局文件中

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    tools:context="zhengliang.com.tablayout.MainActivity">    <android.support.design.widget.TabLayout        android:id="@+id/tab"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="@color/colorPrimary"        >    </android.support.design.widget.TabLayout>    <android.support.v4.view.ViewPager        android:id="@+id/pager"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1" /></LinearLayout>

里面一个Tablayout和一个ViewPager就行了

实现上面的效果需要创建几个Fragment,这里为了方便就直接创建了一个基本的Fragment需要的时候直接new就行了,实现代码如下:

public class BlankFragment extends Fragment {    public BlankFragment() {    }    public static BlankFragment newInstance(String text){        Bundle bundle = new Bundle();        bundle.putString("text",text);        BlankFragment blankFragment = new BlankFragment();        blankFragment.setArguments(bundle);        return  blankFragment;    }    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,                             Bundle savedInstanceState) {        return inflater.inflate(R.layout.fragment_blank, container, false);    }    @Override    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {        super.onViewCreated(view, savedInstanceState);        TextView textView = (TextView) view.findViewById(R.id.pager_text);        textView.setText(getArguments().getString("text"));    }}

有了Fragment还需要一个实现一个ViewPagerAdapter

public class MyAdapter extends FragmentPagerAdapter {    private List<String> list;    public MyAdapter(FragmentManager fm, List<String> list) {        super(fm);        this.list = list;    }    @Override    public Fragment getItem(int position) {        return BlankFragment.newInstance(list.get(position));    }    @Override    public int getCount() {        return list.size();    }    @Override    public CharSequence getPageTitle(int position) {        return list.get(position);    }}

Adapter的写法非常简单,在自定义Adapter的时候需要重写里面的getPagerTitle()方法,实现这个方法是为了当Tablayout与ViewPager绑定的时候能够绑定Tab标签的标题

一切准备就绪,直接看MainActivity.java中的代码

public class MainActivity extends AppCompatActivity {    private TabLayout tab;    private ViewPager pager;    private List<String> list;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        /*初始化界面*/        initViews();        /*初始化数据*/        initData();        /*设置Adapter*/        pager.setAdapter(new MyAdapter(getSupportFragmentManager(),list));        /*Tab与ViewPager绑定*/        tab.setupWithViewPager(pager);    }    /*初始化数据*/    private void initData() {        list = new ArrayList<>();        for (int i = 0; i < 5 ; i++) {            list.add(String.format(Locale.CHINA,"第%02d页",i));        }    }    /*初始化界面*/    private void initViews() {        this.pager = (ViewPager) findViewById(R.id.pager);        this.tab = (TabLayout) findViewById(R.id.tab);    }}

到这里基本就实现了上面图的效果,里面一句很关键的代码:tab.setupWithViewPager(pager);只有加了这句代码才能实现Tab和ViewPager的绑定联动...

下面介绍一些TabLayout常用的属性:

设置Tab标签的默认字体颜色:

app:tabTextColor="#ddd"

设置Tab标签选中的字体颜色:

app:tabSelectedTextColor="@color/colorAccent"

设置指示器的颜色:

app:tabIndicatorColor="@color/colorAccent"

设置指示器的高度: (当值为0dp的时候指示器为隐藏状态)

app:tabIndicatorHeight="5dp"

Tablayout中一个重要的属性: app:tabMaode

该属性有两个值:### scrollable,fixed

"fixed"

固定的,表示Tab标签不管为多少都是固定的,所以当标签很多的时候就会挤在一起,而且回造成标签上的文字显示不完整:

如下图:

app:tabMode="fixed"

scrollable

可滚动的,当Tab的标签超出屏幕的宽度,就会自动出现课滑动的效果,当标签过多的时候还可以直接滑动标签

app:tabMode="scrollable"

如下图:

好了,上面这些就是TabLayout最基本的用法...

原文地址:http://blog.csdn.net/qq_23179075/article/details/52471199