Android:TabLayout的用法

谁借莪１个温暖的怀抱￠ 2022-08-21 03:28 145阅读 0赞

我们在应用viewpager的时候，经常会使用TabPageIndicator来与其配合。达到很漂亮的效果。但是TabPageIndicator是第三方的，而且比较老了。在2015年的google大会上，google发布了新的Android Support Design库，里面包含了几个新的控件，其中就有一个TabLayout，可以完全替代TabPageIndicator，而且还是官方的，最好的是它可以兼容到2.2以上版本，包括2.2。

使用 android studio进行开发引用TabLayout很简单，只要在build.gradle中加入  
`compile'com.android.support:design:22.2.0'`  
即可。

主布局文件：

<?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" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.myapplication.tablayoutdemo.MainActivity" >
    
        <android.support.design.widget.TabLayout android:id="@+id/tablayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#00ff0f" app:tabIndicatorColor="#ffffff" app:tabSelectedTextColor="#faaa" app:tabTextColor="#ffffff" />
    
        <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" />
    </LinearLayout>

1.  app:tabIndicatorColor ：tab的指示符颜色，类似下划线
2.  app:tabSelectedTextColor ：选择tab的文本颜色
3.  app:tabTextColor ：普通tab字体颜色
4.  app:tabMode 模式：fixed和scrollable ；  
    fixed是指固定个数（平分屏幕），  
    scrollable是可以横行滚动的（适用于title比较多的时候，如果title比较少别选scrollable，否则title会左对齐的挤在一起）
5.  app:tabGravity： 对齐方式，可选fill和center

MainActivity：

package com.myapplication.tablayoutdemo;
    
    import android.os.Bundle;
    import android.support.design.widget.TabLayout;
    import android.support.v4.view.ViewPager;
    import android.support.v7.app.AppCompatActivity;
    
    public class MainActivity extends AppCompatActivity { 
        private ViewPager viewPager;
        private TabLayout tabLayout;
        private MyPagerAdapter myPagerAdapter;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            init();
        }
    
        private void init() {
            //初始化控件
            viewPager = (ViewPager) findViewById(R.id.viewpager);
            tabLayout = (TabLayout) findViewById(R.id.tablayout);
            //初始化适配器
            myPagerAdapter = new MyPagerAdapter(getSupportFragmentManager(), this);
            viewPager.setAdapter(myPagerAdapter);
    
            //设置TabLayout的模式
            // tabLayout.setTabMode(TabLayout.MODE_FIXED);
    
            // 运行后，title比较少的时候该模式下TabLayout标签挤到一块去了
            tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
    
            //将tabLayout和viewPager绑定在一起
            tabLayout.setupWithViewPager(viewPager);
        }
    }

MyAdapter中的代码：

package com.myapplication.tablayoutdemo;
    
    import android.content.Context;
    import android.support.v4.app.Fragment;
    import android.support.v4.app.FragmentManager;
    import android.support.v4.app.FragmentPagerAdapter;
    
    import java.util.ArrayList;
    import java.util.List;
    
    /** * Created by Administrator on 2016/3/13. */
    public class MyPagerAdapter extends FragmentPagerAdapter { 
    
        private List<String> stringList;
        private Context context;
    
        public MyPagerAdapter(FragmentManager fm, Context context) {
            super(fm);
            this.context = context;
    
            stringList = new ArrayList<>();
            stringList.add("热门推荐");
            stringList.add("热门新闻");
            stringList.add("本月热榜");
            stringList.add("我的收藏");
            stringList.add("我的相册");
            stringList.add("联系我们");
    
        }
    
        @Override
        public Fragment getItem(int position) {
            return PagerFragment.newInstance(position + 1);
        }
    
        @Override
        public int getCount() {
            return stringList.size();
        }
    
        @Override
        public CharSequence getPageTitle(int position) {
            return stringList.get(position);
        }
    }

pagerFragment中的代码：

package com.myapplication.tablayoutdemo;
    
    
    import android.os.Bundle;
    import android.support.v4.app.Fragment;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.TextView;
    
    
    /** * A simple {@link Fragment} subclass. */
    public class PagerFragment extends Fragment { 
        private int mPage;
        public static final String ARG_PAGE = "ARG_PAGE";
    
        public static PagerFragment newInstance(int page) {
            Bundle bundle = new Bundle();
            bundle.putInt(ARG_PAGE, page);
            PagerFragment pagerFragment = new PagerFragment();
            pagerFragment.setArguments(bundle);
            return pagerFragment;
        }
    
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            mPage = getArguments().getInt(ARG_PAGE);
        }
    
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
            View view = inflater.inflate(R.layout.fragment_pager, container, false);
            TextView textView = (TextView) view;
            textView.setText("Fragment #" + mPage);
            return view;
        }
    
    }

PagerFragment布局文件：

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

![这里写图片描述][20160314093320776]

[20160314093320776]: /images/20220731/6dd6135e804d4abfaa254f80e0500f5c.png