Tablayout+Fragment顶部选项卡实现

原文地址声明：https://blog.csdn.net/qq_23179075/article/details/52471199

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

使用 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>

创建一个BaseFragment

public class BlankFragment extends Fragment {

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

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 中重写 getPagerTitle() 绑定 TabLayout中 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);
    }
}

TabLayout常用的属性

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

app:tabTextColor="#ddd"

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

app:tabSelectedTextColor="@color/colorAccent"

• 设置指示器的颜色

app:tabIndicatorColor="@color/colorAccent"

• 设置指示器的高度

app:tabIndicatorHeight="5dp"

• 设置 TabLayout的 Tab 显示模式

app:tabMode="fixed"

表示Tab标签占满整个 TabLayout 的宽度，当标签过多时会挤在一起,而且回造成标签上的文字显示不完整。

app:tabMode="scrollable"

当Tab标签超出屏幕的宽度，就会自动出现课滑动的效果。