Android design library（一）----------TabLayout

首先，看下效果图

平时一般都是使用ViewPager结合Fragment一起，实现。现在使用 Android design library的TabLayout实现

实现步骤如下：

一：先创建主布局：

<?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">   <!-- tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);-->    <android.support.design.widget.TabLayout        android:id="@+id/sliding_tabs"        android:layout_width="match_parent"        android:layout_height="wrap_content"         />    <android.support.v4.view.ViewPager        android:id="@+id/viewpager"        android:layout_width="match_parent"        android:layout_height="0px"        android:layout_weight="1"        android:background="@android:color/white" /></LinearLayout>在xml添加TabLayout，如同ViewPager，直接`android.support.design.widget.TabLayout`即可。

二：创建Fragment

package com.example.administrator.myapplication;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;/** * Created by Administrator on 2015/10/19 0019. */public class PageFragment extends Fragment {    public static final String ARG_PAGE = "ARG_PAGE";    private int mPage;    public static PageFragment newInstance(int page) {        Bundle args = new Bundle();        args.putInt(ARG_PAGE, page);        PageFragment pageFragment = new PageFragment();        pageFragment.setArguments(args);        return pageFragment;    }    @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_page, container, false);        TextView textView = (TextView) view;        textView.setText("Fragment #" + mPage);        return view;    }}

三、其中Fragment的布局为：

<?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"    android:gravity="center" />

四、编写ViewPager的适配器

package com.example.administrator.myapplication;import android.content.Context;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import android.view.LayoutInflater;import android.view.View;import android.widget.ImageView;import android.widget.TextView;/** * Created by Administrator on 2015/10/19 0019. */public class SimpleFragmentPagerAdapter extends FragmentPagerAdapter {    final int PAGE_COUNT = 3;    private String tabTitles[] = new String[]{"tab1", "tab2", "tab3"};    private int[] imageResId = {R.drawable.ig,            R.drawable.ig,            R.drawable.ig};    private Context context;    public SimpleFragmentPagerAdapter(FragmentManager fm, Context context) {        super(fm);        this.context = context;    }    @Override    public Fragment getItem(int position) {        return PageFragment.newInstance(position + 1);    }    @Override    public int getCount() {        return PAGE_COUNT;    }    @Override    public CharSequence getPageTitle(int position) {        return tabTitles[position];    }/***    这个方法是后面为了实现添加自定义的view到tab所提前编写的**/    public View getTabView(int position) {        View view = LayoutInflater.from(context).inflate(R.layout.tab_item, null);        TextView tv = (TextView) view.findViewById(R.id.textView);        tv.setText(tabTitles[position]);        ImageView img = (ImageView) view.findViewById(R.id.imageView);        img.setImageResource(imageResId[position]);        return view;    }}

五、设置TabLayout

package com.example.administrator.myapplication;import android.support.design.widget.TabLayout;import android.support.v4.app.FragmentActivity;import android.support.v4.view.ViewPager;import android.support.v7.app.ActionBarActivity;import android.os.Bundle;import android.view.Menu;import android.view.MenuItem;public class MainActivity extends FragmentActivity {    private SimpleFragmentPagerAdapter pagerAdapter;    private ViewPager viewPager;    private TabLayout tabLayout;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.main_layout);        pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(), this);        viewPager = (ViewPager) findViewById(R.id.viewpager);        viewPager.setAdapter(pagerAdapter);        tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);         //绑定tabLayout与 viewPager        tabLayout.setupWithViewPager(viewPager);        // 设置TabLayout 的Tab        tabLayout.setTabMode(TabLayout.MODE_FIXED);        /**         * tabLayout.getTabCount()    获得  tabLayout 的Tab的数量         * tab.setCustomView          添加自定义的view到tab         */        for (int i = 0; i < tabLayout.getTabCount(); i++) {            TabLayout.Tab tab = tabLayout.getTabAt(i);            tab.setCustomView(pagerAdapter.getTabView(i));        }    }}

六、定义TabLayout的样式

默认的情况下，TabLayout的tab indicator的颜色是Material Design中的accent color(#009688)，可以稍作修改：

    <style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">        <item name="tabIndicatorColor" >#fff0FF</item></style>

然后在布局中使用：

 <android.support.design.widget.TabLayout        android:id="@+id/sliding_tabs"        style="@style/MyCustomTabLayout"        android:layout_width="match_parent"        android:layout_height="wrap_content"        />

还有一些其他的样式可供选择：

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">    <item name="tabMaxWidth">@dimen/tab_max_width</item>    <item name="tabIndicatorColor">?attr/colorAccent</item>    <item name="tabIndicatorHeight">2dp</item>    <item name="tabPaddingStart">12dp</item>    <item name="tabPaddingEnd">12dp</item>    <item name="tabBackground">?attr/selectableItemBackground</item>    <item name="tabTextAppearance">@style/MyCustomTabTextAppearance</item>    <item name="tabSelectedTextColor">?android:textColorPrimary</item></style><style name="MyCustomTabTextAppearance" parent="TextAppearance.Design.Tab">    <item name="android:textSize">14sp</item>    <item name="android:textColor">?android:textColorSecondary</item>    <item name="textAllCaps">true</item></style>

七、添加自定义的view到tab
适配器中增加getTabView(…)方法：上面已贴上代码

八、Tab简单的布局

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    >    <ImageView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:id="@+id/imageView"        android:layout_centerVertical="true"        />    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_toRightOf="@id/imageView"        android:layout_centerVertical="true"        android:id="@+id/textView"        android:layout_marginLeft="3dp"        /></RelativeLayout>

九、使用

在onCreate中

      for (int i = 0; i < tabLayout.getTabCount(); i++) {            TabLayout.Tab tab = tabLayout.getTabAt(i);            tab.setCustomView(pagerAdapter.getTabView(i));        }

十、总结：

使用TabLayout 更简化，更方便设计。