欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

TabLayout的简单使用

程序员文章站 2022-06-01 15:14:53
...

一:导入design,appcompat包

在gradle文件中引入design包,引入之后才可在布局中引入这个控件

dependencies {
   .....
    compile 'com.android.support:appcompat-v7:24.2.1'
    compile 'com.android.support:design:24.2.1'
    compile 'com.android.support:support-v4:24.2.1'
   .....
}

二:布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="center"
        app:tabMode="scrollable" />

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

这里我们使用了一个纵向的线性布局,上面是一个TabLayout的导航栏,下面是一个ViewPager,TabLayout+ViewPager+Fragment来配合使用。

上面关于TabLayout的几个属性要简述一下:
app:tabIndicatorColor=”@color/colorPrimary_pink”//指示器的颜色
app:tabTextColor=”@color/colorPrimary_pink”//tab的文字颜色 app:tabSelectedTextColor=”@color/colorPrimary_pinkDark”//选中的tab的文字颜色
app:tabMode=”fixed”//scrollable:可滑动;fixed:不能滑动,平分tabLayout宽度
app:tabGravity=”center”// fill:tabs平均填充整个宽度;center:tab居中显示

三:代码实现(三步)

  • 给ViewPager设置适配器
    pager.setAdapter(adapter);

  • 让TabLayout关联ViewPager
    tabLayout.setupWithViewPager(pager);

  • TabLayout设置适配器
    tabLayout.setTabsFromPagerAdapter(adapter);

完整代码如下:

public class MainActivity extends AppCompatActivity {
    private String[] title = {
            "头条",
            "新闻",
            "娱乐",
            "体育",
            "科技",
            "美女",
            "财经",
            "汽车",
            "房子",
            "头条"
    };
    TabLayout tabLayout;
    ViewPager pager;
    private MyAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tabLayout = (TabLayout) findViewById(tablayout);
        pager = (ViewPager) findViewById(R.id.vp);
        adapter = new MyAdapter(getSupportFragmentManager());
        initView();
    }

    /**
     * 初始化布局
     */
    private void initView() {
        pager.setAdapter(adapter);
        tabLayout.setupWithViewPager(pager);
        tabLayout.setTabsFromPagerAdapter(adapter);
    }

    class MyAdapter extends FragmentPagerAdapter {

        public MyAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return title[position];
        }

        @Override
        public Fragment getItem(int position) {
            DetailFragment fragment=new DetailFragment();
            Bundle bundle=new Bundle();
            bundle.putString("title",title[position]);
            fragment.setArguments(bundle);
            return fragment;
        }

        @Override
        public int getCount() {
            return title.length;
        }
    }
}

Fragment的代码如下:

public class DetailFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        TextView tv = new TextView(getContext());
        Bundle bundle = getArguments();
        String s = bundle.getString("title");
        tv.setBackgroundColor(Color.rgb((int) (Math.random() * 255), (int) (Math.random() * 255), (int) (Math.random() * 255)));
        tv.setText(s);
        return tv;
    }
}

实现效果如下:
TabLayout的简单使用