与TabLayout的冒险之旅
前言
Tablayout的朋友有Toolbar,Navigation Drawer,等等。大家不了解它的朋友的话。
安利一下我之前的文章
Toolbar的一次邂逅
当Toolbar遇上Navigation Drawer
初次见面
大家好，我叫Tablayout，我来自android 星球，今年X岁。
先给大家来张相片，嘻嘻！！
个人照
介绍
Tab滑动切换View已经不是很新鲜事情了，大家对这个操作都非常习惯了，这次google完全对TabLayout加入支持库，但是我一个人肯定不能完成辣么多的事情，还要靠我的朋友们ViewPager和Fragment才能完成这次冒险之旅！
开始冒险之旅
例牌添加引用gradle
compile 'com.android.support:design:24.1.1'
dependencies{
///省略一万字
compile 'com.android.support:design:24.1.1'
}
design库有的成员：
参考资料：
android.support.design.widget--AndroidDev
android-design-support-library--AndroidBlog
Design Support Library完全使用实例
Design Support Library包含8个控件，具体如下：
android.support.design.widget.TextInputLayout 强大带提示的MD风格的EditText
android.support.design.widget.FloatingActionButton MD的圆形浮动按钮，来自于ImageView
android.support.design.widget.Snackbar 类似Toast
android.support.design.widget.TabLayout 滑动选项卡
android.support.design.widget.NavigationView DrawerLayout的SlideMenu
android.support.design.widget.CoordinatorLayout 超级FrameLayout
android.support.design.widget.AppBarLayout MD风格的滑动Layout
android.support.design.widget.CollapsingToolbarLayout 可折叠MD风格ToolbarLayout
废话太多了，直接入主题：
准备xml，其实xml里面可以设置M多个属性的。这次我就在代码设置了。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/tab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
</android.support.design.widget.TabLayout>
</LinearLayout>
准备MainActivity.java
public class MainActivity extends AppCompatActivity {
private TabLayout tabLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tabLayout =(TabLayout)findViewById(R.id.tab);
tabLayout.setSelectedTabIndicatorColor(getResources().getColor(R.color.colorPrimary));//设置选择条的颜色
tabLayout.setBackgroundColor(getResources().getColor(R.color.colorAccent));//设置tablayout背景颜色
tabLayout.addTab(tabLayout.newTab().setText("Tab1"));//为Tablayout增加tab
tabLayout.addTab(tabLayout.newTab().setText("Tab2"));
tabLayout.addTab(tabLayout.newTab().setText("Tab3"));
}
}
好了，都准备好了，可以运行了吗？
WTF 原来是因为xml,使用了 android:layout_width="wrap_content"
随便科普一下
wrap_content 自适应大小
match_parent 直接拿父级元素大小
好的！明白直接修改一下！
终于有了Tab的样子！！！
继续前行
介绍我的朋友ViewPager,Google 推荐和Fragment配合使用！简直就是好基友！ViewPager要是显示数据的话，当然离开不了PagerAdapter，当然你要配合使用Fragment，就要FragmentPagerAdapter, FragmentStatePagerAdapter
步骤1： 创建N个Fragment对应的布局文件（下面以1个为例）N由你的tab的数量决定
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:text="Fragment1"
/>
</RelativeLayout>
步骤2： 创建Fragment对应的Actitvity类（也是创建N个）
注意：import android.support.v4.app.Fragment;
public class Fragment1 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
/*
* 参数1：布局文件id
* 参数2：容器
* 作用是将布局文件封装在一个View对象中，并填充到此Fragment中
* */
return inflater.inflate(R.layout.fragment1,container,false);
}
}
步骤3：创建适配器Adapter类
public class MyAdapter extends FragmentStatePagerAdapter {
private String[] mTitles = new String[]{"首页", "发现", "生活"};
public MyAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
switch (position){
case 0:
return new Fragment1();
case 1:
return new Fragment2();
case 2:
return new Fragment3();
default:
return null;
}
}
@Override
public int getCount() {
return mTitles.length;
}
//ViewPager与TabLayout 绑定之后，获取到PageTitle就是tab的text
@Override
public CharSequence getPageTitle(int position) {
return mTitles[position];
}
}
最后修改MainActivity
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tabLayout =(TabLayout)findViewById(R.id.tab);
viewPager =(ViewPager)findViewById(R.id.vp);
tabLayout.setSelectedTabIndicatorColor(getResources().getColor(R.color.colorAccent));
tabLayout.setBackgroundColor(getResources().getColor(R.color.colorPrimary));
tabLayout.setTabTextColors(Color.WHITE,Color.BLACK);
initView();
}
private void initView(){
//把自定义FragmentStatePagerAdapter与ViewPager绑定
myAdapter =new MyAdapter(getSupportFragmentManager());
viewPager.setAdapter(myAdapter);
//把ViewPager与TabLayout绑定
tabLayout.setupWithViewPager(viewPager);
tabLayout.setTabMode(TabLayout.MODE_FIXED); //Tab平均分
}
}
说明一下tabLayout中setTabMode的参数
MODE_FIXED ：平均分tab，使用场景tab少，平均分Tab美观
MODE_SCROLLABLE ：tab部分可以滑动（这个是默认），使用场景就是M多个Tab需要滑动选择
最终效果图：
应该有掌声！！！！！啦啦啦
关于实现tab在底部（微信同款，虽然我很不想提）
只要交换一个TabLayout和ViewPager的位置就可以了
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
</android.support.v4.view.ViewPager>
<android.support.design.widget.TabLayout
android:id="@+id/tab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
</android.support.design.widget.TabLayout>
</LinearLayout>
效果图：
参考干货：
AndroidDev-PagerAdapter
Fragment详细学习解析
android design library提供的TabLayout的用法
ViewPager Without Fragments
AlphaIndicatorView
源码：
开源是一种美德,分享一份快乐，希望androider少走弯路，多点时间泡妞！
温馨提示：蓝色是链接,要是发现打不开，自备梯子。
关于：
一个非androider,开心就好，欢迎和我一起讨论！转载注明出处，谢谢！
