TabLayout结合使用及属性简介

添加后就可以使用design包里面的UI控件了，上XML代码：

<?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:background="@android:color/white"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <android.support.design.widget.TabLayout
        app:tabSelectedTextColor="@color/colorAccent"
        app:tabIndicatorColor="@color/colorAccent"
        app:tabMode="fixed"
        app:tabTextColor="@android:color/white"
        app:tabGravity="fill"
        android:background="@color/colorPrimary"
        android:id="@+id/tb_home"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
 
    </android.support.design.widget.TabLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/vp_home"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="0dp">
 
    </android.support.v4.view.ViewPager>
 
</LinearLayout>
TabLayout属性：

app:tabSelectedTextColor=""    改变选中字体的颜色

app:tabIndicatorColor=""   改变指示器下标的颜色

app:tabTextColor="" 改变未选中字体的颜色

 

app:tabMode ="" 

布局中Tab的行为模式（behavior mode），有两种值：MODE_FIXED 和 MODE_SCROLLABLE。

MODE_FIXED:固定tabs，并同时显示所有的tabs。

MODE_SCROLLABLE：可滚动tabs，显示一部分tabs，在这个模式下能包含长标签和大量的tabs，最好用于用户不需要直接比较tabs。

 

app:tabGravity = ""

放置Tab的Gravity,有GRAVITY_CENTER 和 GRAVITY_FILL两种效果。顾名思义，一个是居中，另一个是尽可能的填充（注意，GRAVITY_FILL需要和MODE_FIXED一起使用才有效果）

        下面讲讲MainActivity的实现逻辑，我设置了4个滑动界面，所以就需要创建4个Fragment和4个Title。然后把它们存放在List里面，当然也是可以有数组来存放的，不过为了更好的拓展还是建议用List。

          然后findviwebyId找到控件，做一下ViewPager的预加载。原理是先获取到Fragment的总数创建出响应数目的空间，当滑动进去界面的时候再把数据放进去显示。

          因为ViewPager 继承的是ViewGroup，所以设置一个适配器，创建一个匿名的FragmentPagerAdapter,调用回调方法。把TableLayout绑定ViewPager就完成。代码如下：

public class MainActivity extends AppCompatActivity {
 
    private TabLayout tabLayout;
 
    private ViewPager viewPager;
 
    private List<Fragment> fragments;
 
    private List<String> titles;
 
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home);
 
        //去掉阴影
        getSupportActionBar().setElevation(0);
 
        initView();
        initData();
    }
    //初始化View
    private void initView() {
 
        titles = new ArrayList<>();
        titles.add(getBaseContext().getString(R.string.titles_item1));
        titles.add(getBaseContext().getString(R.string.titles_item2));
        titles.add(getBaseContext().getString(R.string.titles_item3));
        titles.add(getBaseContext().getString(R.string.titles_item4));
 
 
        fragments = new ArrayList<>();
        fragments.add(new Item1Fragment());
        fragments.add(new Item2Fragment());
        fragments.add(new Item3Fragment());
        fragments.add(new Item4Fragment());
 
    }
 
    //初始化数据
    private void initData() {
        tabLayout = findViewById(R.id.tb_home);
        viewPager = findViewById(R.id.vp_home);
 
        //预加载
        viewPager.setOffscreenPageLimit(fragments.size());
 
        //设置适配器
        viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            //选中的ITem
            @Override
            public Fragment getItem(int i) {
                return fragments.get(i);
            }
            //返回Item个数
            @Override
            public int getCount() {
                return fragments.size();
            }
            //设置标题
            @Nullable
            @Override
            public CharSequence getPageTitle(int position) {
                return titles.get(position);
            }
        });
 
        tabLayout.setupWithViewPager(viewPager);
    }
}
然后是Fragment的类与XML

public class Item1Fragment extends Fragment {
 
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_item1,null);
        return view;
    }
}
 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:gravity="center"
    android:background="@android:color/white"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
 
    <TextView
        android:textSize="30sp"
        android:text="@string/titles_item1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
 
 
</LinearLayout>
这样一个简单的标题栏索引就完成了，当然我们也可以做成底部的导航栏，有兴趣的可以去了解下。
 

 

 

 

 

 

 

更改选中时的背景

 

第一步
在drawable文件夹下建立文件 tab_background.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/tab_background_selected" android:state_selected="true" />
    <item android:drawable="@drawable/tab_background_unselected" android:state_selected="false" android:state_focused="false" android:state_pressed="false" />
</selector>

第二步
在drawable文件夹下建立选中效果的文件 tab_background_selected.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#d13fdd1a" />
</shape>

第三步
在drawable文件夹下建立未选中效果的文件 tab_background_unselected.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#3F51B5" />
</shape>

最后
建立一个style

<style name="Base.Widget.Design.TabLayout" parent="android:Widget">
    <item name="tabBackground">@drawable/tab_background</item>
    <item name="tabIndicatorColor">#ff00ff</item>
    <item name="tabIndicatorHeight">2dp</item>
</style>