Android之TabLayout

Android之TabLayout，android中TabLayut到底是个什么鬼？今天我们来看一下，起初，我听见这个名字的时候我总觉得这不是五大布局里的表格布局嘛，现在想想真是有点可笑，下面我们来了解一下它吧！

在2015年的google大会上，google发布了新的Android Support Design库，TabLayout是属于Android Design Support Library中的一个控件，顶部或者底部水平的Tab布局，滑动或者点击切换的功能，今天我们简单讲解TabLayout的使用，重点讲解如何自定义TabLayout的item，也就是每一个tab。 下面我们看一个列子：

画圈的自然就是tablayout了，它一共是4个，既可以点击滑动，也可以直接滑动，下面我们就来写代码吧！

首先我们需要在build.gradle中加入compile ‘com.android.support:design:22.2.0’依赖即可。

我打算写3个tab所以先写一个ThirdActivity
代码如下：

ThirdActivity：
package com.example.mytablayoutdemo.activity;

import android.app.Activity;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;

import com.example.mytablayoutdemo.R;
import com.example.mytablayoutdemo.adapter.SimpleFragmentPagerAdapter;

/**
 * Created by 亮亮 on 2017/7/26.
 */

public class TActivity extends FragmentActivity {

    private SimpleFragmentPagerAdapter pagerAdapter;

    private ViewPager viewPager;

    private TabLayout tabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_t);
        pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(), this);
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        viewPager.setAdapter(pagerAdapter);
        tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
        tabLayout.setupWithViewPager(viewPager);
        tabLayout.setTabMode(TabLayout.MODE_FIXED);
    }
}

activity_third布局代码：


    
    

    

pageFragment代码：
package com.example.mytablayoutdemo.fragment;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.example.mytablayoutdemo.R;

/**
 * Created by 亮亮 on 2017/7/26.
 */

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);
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.pager_fragment, container, false);
        TextView textView = (TextView) view;
        textView.setText("Fragment #" + mPage);
        return view;
    }
}

这里写代码片
page_fragment布局代码：

SimpleFragmentPagerAdapter适配器代码：
package com.example.mytablayoutdemo.adapter;

import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import com.example.mytablayoutdemo.fragment.PageFragment;

/**
 * Created by 亮亮 on 2017/7/26.
 */

public class SimpleFragmentPagerAdapter extends FragmentPagerAdapter {
    final int PAGE_COUNT = 3;
    private String tabTitles[] = new String[]{"tab1","tab2","tab3"};
    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];
    }
}

需要在androidmanifest配置文件中注册下

        
        
            

            
        
        

到这里代码都写完了，欢迎来参观！下面我们看下效果图吧！

写的有点丑还请不要笑奥！！！