android.support.design.widget.TabLayout的使用

现在非常流行的是TabLayout+ViewPager+Fragment

1：首先sdk的版本必须是22，要想使用这个控件，你必须下载或更新sdk的版本，你要更新的22也就是5.1的版本，才会有这个控件的出现。

布局文件如下：

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="wenjing.myapplication.activity.MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/btn_oval_withe_shape"
       />

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_pager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />


</LinearLayout>

2：创建几个Fragment

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

 

3：创建适配器

/**
 * 此adpter是在一个fragment中切换不同的view，好处是在一个activity中可以取得所有view中的值
 * Created by cg on 2015/10/21.
 */
public class viewAdapter extends PagerAdapter {
    public List<View> list_view;
    private List<String> list_Title;                              //tab名的列表
    private int[] tabImg;
    private Context context;

    public viewAdapter(Context context,List<View> list_view,List<String> list_Title,int[] tabImg) {
        this.list_view = list_view;
        this.list_Title = list_Title;
        this.tabImg = tabImg;
        this.context = context;
    }

    @Override
    public int getCount() {
        return list_view.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view==object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        ((ViewPager) container).addView(list_view.get(position), 0);
        return list_view.get(position);
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        ((ViewPager) container).removeView(list_view.get(position));
    }

    /**
     * 此方法是给tablayout中的tab赋值的，就是显示名称,并且给其添加icon的图标
     * @param position
     * @return
     */
    @Override
    public CharSequence getPageTitle(int position) {

        //这段被注的代码，是只显示文字，不显示图标
        //return  list_Title.get(position % list_Title.size());

        Drawable dImage = context.getResources().getDrawable(tabImg[position]);
        dImage.setBounds(0, 0, dImage.getIntrinsicWidth(), dImage.getIntrinsicHeight());
        //这里前面加的空格就是为图片显示
        SpannableString sp = new SpannableString("  "+ list_Title.get(position));
        ImageSpan imageSpan = new ImageSpan(dImage, ImageSpan.ALIGN_BOTTOM);
        sp.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        return  sp;
    }
}

Fragment适配器：

/**
 * 这里使用多个fragment进行切换，好处是每个fragment 都有自己独立的代码
 * <p>
 */

public class fragmentAdapter extends FragmentPagerAdapter {


    private List<Fragment> list_fragment;                         //fragment列表

    private List<String> list_Title;                              //tab名的列表


    public fragmentAdapter(FragmentManager fm, List<Fragment> list_fragment, List<String> list_Title) {

        super(fm);

        this.list_fragment = list_fragment;

        this.list_Title = list_Title;

    }


    @Override

    public Fragment getItem(int i) {

        return list_fragment.get(i);

    }


    @Override

    public int getCount() {

        return list_fragment.size();

    }


    /**
     * 此方法是给tablayout中的tab赋值的，就是显示名称
     *
     * @param position
     * @return
     */

    @Override

    public CharSequence getPageTitle(int position) {

        return list_Title.get(position % list_Title.size());

    }

}

 

 

 

Fragment布局文件：

 

<?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">

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:text="我是家庭fragment"
        android:textSize="20dp" />

</LinearLayout>

 

MainActivity代码：

public class MainActivity extends ActionBarActivity {


    private TabLayout tab_title;
    private ViewPager vp_pager;

    private List<String> list_title;                                      //tab名称列表
    private List<View> listViews;
    private List<Fragment> list_fragment;

    private View newsView;                                                //定义新闻页面
    private View sportView;
    private View funView;

    private viewAdapter vAdapter;                                         //定义以view为切换的adapter
    private fragmentAdapter fAdapter;                                     //定义以fragment为切换的adapter

    private NewsFragment nFragment;
    private HomeFragment sFragment;
    private WordFragment fFragment;


    private int[] tabImg;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initControls();

        viewChanage();

        //fragmentChange();
    }

    /**
     * 初始化控件
     */
    private void initControls() {
        tab_title = (TabLayout) findViewById(R.id.tab_title);
        vp_pager = (ViewPager) findViewById(R.id.vp_pager);

        //为tabLayout上的图标赋值
        tabImg = new int[]{R.drawable.back_3x, R.drawable.btn_oval_withe_shape, R.drawable.loading_anmi_list};
    }

    /**
     * 采用在viewpager中切换 view 的方式,并添加了icon的功能
     */
    private void viewChanage() {
        listViews = new ArrayList<>();
        LayoutInflater mInflater = getLayoutInflater();

        newsView = mInflater.inflate(R.layout.fragment_news, null);
        sportView = mInflater.inflate(R.layout.fragment_home, null);
        funView = mInflater.inflate(R.layout.fragment_word, null);
        listViews.add(newsView);
        listViews.add(sportView);
        listViews.add(funView);

        list_title = new ArrayList<>();
        list_title.add("新闻");
        list_title.add("家庭");
        list_title.add("世界");

        //设置TabLayout的模式,这里主要是用来显示tab展示的情况的
        //TabLayout.MODE_FIXED          各tab平分整个工具栏,如果不设置，则默认就是这个值
        //TabLayout.MODE_SCROLLABLE     适用于多tab的，也就是有滚动条的，一行显示不下这些tab可以用这个
        //                              当然了，你要是想做点特别的，像知乎里就使用的这种效果
        tab_title.setTabMode(TabLayout.MODE_FIXED);

        //设置tablayout距离上下左右的距离
        //tab_title.setPadding(20,20,20,20);

        //为TabLayout添加tab名称
        tab_title.addTab(tab_title.newTab().setText(list_title.get(0)));
        tab_title.addTab(tab_title.newTab().setText(list_title.get(1)));
        tab_title.addTab(tab_title.newTab().setText(list_title.get(2)));


        vAdapter = new viewAdapter(this, listViews, list_title, tabImg);
        vp_pager.setAdapter(vAdapter);

        //将tabLayout与viewpager连起来
        tab_title.setupWithViewPager(vp_pager);
    }

    /**
     * 采用viewpager中切换fragment
     */
    private void fragmentChange() {
        list_fragment = new ArrayList<>();

        nFragment = new NewsFragment();
        sFragment = new HomeFragment();
        fFragment = new WordFragment();

        list_fragment.add(nFragment);
        list_fragment.add(sFragment);
        list_fragment.add(fFragment);

        list_title = new ArrayList<>();
        list_title.add("新闻");
        list_title.add("家庭");
        list_title.add("世界");

        fAdapter = new fragmentAdapter(getSupportFragmentManager(), list_fragment, list_title);
        vp_pager.setAdapter(fAdapter);

        //将tabLayout与viewpager连起来
        tab_title.setupWithViewPager(vp_pager);
    }


}

 

效果如下：