TabLayout
tabLayout
上图是一个关于TabLayout的Demo，TabLayout提供了一个水平的布局用来展示Tabs。与viewpager、fragment（或者view）搭配使用，实现点击屏幕标签或左右滑动可以切换页面的效果。
viewpager
viewpager是谷歌官方提供的控件，它相当于一个容器，储存fragment或者view，通过左右滑动的方式将容器中的页面进行切换，常用于app首页的欢迎页与滚动栏。
1.tabLayout的基本使用方法
在布局中加入该控件：
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/tab_layout">
</android.support.design.widget.TabLayout>
在代码中动态添加Item：
tabLayout= (TabLayout) findViewById(R.id.tabLayout);
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));
方式二静态添加Item：
<android.support.design.widget.TabLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tab1"/>
...
</android.support.design.widget.TabLayout>
附：
tabLayout的其他常用属性
1.改变选中字体的颜色
app:tabSelectedTextColor="@android:color/holo_orange_light"
2.改变未选中字体的颜色
app:tabTextColor="@color/colorPrimary"
3.改变指示器下标的颜色
app:tabIndicatorColor="@android:color/holo_orange_light"
4.改变整个TabLayout的颜色
app:tabBackground="color"
5.改变TabLayout内部字体大小
app:tabTextAppearance="@android:style/TextAppearance.Holo.Large"//使文字的外貌变大
6.改变指示器下标的高度
app:tabIndicatorHeight="4dp"
7.添加图标
android:icon="@drawable/icon"
//tabLayout.addTab(tabLayout.newTab().setText("Tab 1").setIcon(R.mipmap.ic_launcher));动态
8.设置tabMode
app:tabMode="scrollable"
//默认是fixed：固定的，标签很多时候会被挤压，不能滑动。
9.内容的显示模式
app:tabGravity="center"//居中，如果是fill，则是充满
10.Tab的宽度限制
设置最大的tab宽度：
app:tabMaxWidth="xxdp"
设置最小的tab宽度：
app:tabMinWidth="xxdp"
11.Tab的“Margin”
TabLayout开始位置的偏移量：
app:tabContentStart="100dp"
12.加入Padding
设置Tab内部的子控件的Padding：
app:tabPadding="xxdp"
app:tabPaddingTop="xxdp"
app:tabPaddingStart="xxdp"
app:tabPaddingEnd="xxdp"
app:tabPaddingBottom="xxdp"
设置整个TabLayout的Padding：
app:paddingEnd="xxdp"
app:paddingStart="xxdp"
2.viewPager的使用方法
布局：
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/pager"
/>
新建ViewPagerAdapter
viewpager的使用方法中比较关键的就是adapter，因为viewpager是一个容器，我们把view看作数据的话，我们则必须有一个adapter将数据有顺序有调理地放入我们的容器中，这时我们需要新建一个类继承自pagerAdapter，代码如下：
package com.example.peek_mapdemotest.materialdesign;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import java.util.List;
/**
* Created by Administrator on 2017/8/5.
*/
public class ViewPagerAdapter extends PagerAdapter {
private List<View> viewList;
private List<String> titleList;
public ViewPagerAdapter(List<View> viewList,List<String> titleList) {
this.viewList=viewList;
this.titleList=titleList;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(viewList.get(position));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(viewList.get(position));
return viewList.get(position);
}
@Override
public CharSequence getPageTitle(int position) {
return titleList.get(position);
}
@Override
public int getCount() {
return titleList.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view==object;
}
}
ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
List<View> viewList = new ArrayList<>();
List<String> titleList = new ArrayList<>();
titleList.add("页面1");
titleList.add("页面2");
titleList.add("页面3");
LayoutInflater inflater = LayoutInflater.from(this);
View tab01 = inflater.inflate(R.layout.fragment_fragment1, null);
View tab02 = inflater.inflate(R.layout.fragment_fragment2, null);
View tab03 = inflater.inflate(R.layout.fragment_fragment3, null);
viewList.add(tab01);
viewList.add(tab02);
viewList.add(tab03);
mViewPager = (ViewPager)findViewById(R.id.pager);
ViewPagerAdapter mViewPagerAdapter=new ViewPagerAdapter(viewList,titleList);
tabLayout.setupWithViewPager(mViewPager);
mViewPager.setAdapter(mViewPagerAdapter);
最后直接用一句代码 tabLayout.setupWithViewPager(viewPager);即可很方便的将tabLayout与viewpager搭配起来。
