TabLayout结合viewpager使用方法

最新推荐文章于 2023-10-29 20:07:37 发布

原创最新推荐文章于 2023-10-29 20:07:37 发布 · 446 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文介绍如何使用Android Support Design库中的TabLayout控件与ViewPager结合实现标签页指示器效果，并提供了一个简单示例。

我们在应用viewpager的时候，经常会使用TabPageIndicator来与其配合。达到很漂亮的效果。但是TabPageIndicator是第三方的，而且比较老了，当然了现在很多大神都已经开始自己写TabPageIndicator来满足自己的需求，在2015年的google大会上，google发布了新的Android Support Design库，里面包含了几个新的控件，其中就有一个TabLayout，它就可以完成TabPageIndicator的效果，而且还是官方的，最好的是它可以兼容到2.2以上版本，包括2.2。下面我就举一个简单的例子来使用它。

一 . build.gradle

compile 'com.android.support:design:26.0.0-alpha1'

二 . 布局

    <android.support.design.widget.TabLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:tabTextAppearance="@style/MyTabLayoutTextAppearance"
        app:tabGravity="center"
        app:tabBackground="@color/tab"
        app:tabSelectedTextColor="@color/selectText"
        app:tabTextColor="@color/titleBlue"
        app:tabIndicatorColor="@color/back"
        app:tabMode="scrollable"
        android:id="@+id/tl"></android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/vp"
        ></android.support.v4.view.ViewPager>

 <color name="titleBlue">#000</color>
    <color name="selectText">#f00</color>
    <color name="back">#ff0</color>
    <color name="tab">#fff</color>

<style name="MyTabLayoutTextAppearance" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
        <item name="android:textSize">20sp</item>
    </style>

三.MainActivity

package zhouyafei.bwei.com.demo13;

import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private TabLayout tl;
    private ViewPager vp;
    private List<String> mtitle = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tl = (TabLayout) findViewById(R.id.tl);
        vp = (ViewPager) findViewById(R.id.vp);
        getView();
        vp.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public CharSequence getPageTitle(int position) {
                return mtitle.get(position);
            }

            @Override
            public Fragment getItem(int position) {
                OneFragment fragment = new OneFragment();
                Bundle bundle = new Bundle();
                if (mtitle.get(position).equals("头条")){
                    bundle.putString("name","top");
                }else if (mtitle.get(position).equals("社会")){
                    bundle.putString("name","shehui");
                }else if (mtitle.get(position).equals("国内")){
                    bundle.putString("name","guonei");
                }else if (mtitle.get(position).equals("国际")){
                    bundle.putString("name","guoji");
                }else if (mtitle.get(position).equals("娱乐")){
                    bundle.putString("name","yule");
                }else if (mtitle.get(position).equals("体育")){
                    bundle.putString("name","tiyu");
                }else if (mtitle.get(position).equals("军事")){
                    bundle.putString("name","junshi");
                }else if (mtitle.get(position).equals("科技")){
                    bundle.putString("name","keji");
                }else if (mtitle.get(position).equals("财经")){
                    bundle.putString("name","caijing");
                }else if (mtitle.get(position).equals("时尚")){
                    bundle.putString("name","shishang");
                }
                fragment.setArguments(bundle);
                return fragment;
            }

            @Override
            public int getCount() {
                return mtitle.size();
            }
        });
        tl.setupWithViewPager(vp);
    }
    public void getView(){
        mtitle.add("头条");
        mtitle.add("社会");
        mtitle.add("国内");
        mtitle.add("国际");
        mtitle.add("娱乐");
        mtitle.add("体育");
        mtitle.add("军事");
        mtitle.add("科技");
        mtitle.add("财经");
        mtitle.add("时尚");
    }

}

以上只是部分代码,请谨慎使用