整理TabLayout+ViewPager+Fragment的使用

主页面布局

添加Tablayout和ViewPager两个控件

1.添加依赖库(根据自己依赖库修改)

• compile ‘com.android.support:support-v4:24.1.0’
• compile ‘com.android.support:design:24.0.0’

2.xml布局(文章最后提供自定义Tablayout属性)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="@+id/activity_main"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
    tools:context="com.kevinyang.tablayout_viewpager.MainA  ctivity">

<android.support.design.widget.TabLayout
    android:id="@+id/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="wrap_content"/>
</LinearLayout>

3.主页代码

public class MainActivity extends AppCompatActivity {

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

    //初始化控件
    TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
    ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);

    //设置Adapter
    if (viewPager != null) {
        setupViewPager(viewPager);
    }

    //tablayout滚动模式,要标签数量够多,不然标签会靠左显示
    tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
    //设置tablayout的viewpager
    tabLayout.setupWithViewPager(viewPager);
}

private void setupViewPager(ViewPager viewPager) {
    //创建Fragment的集合,和tatlyout的title的名称集合
    ArrayList<Fragment> mFragmentList = new ArrayList<>();
    ArrayList<String> mTitleList = new ArrayList<>();

    //可以固定,可以网络请求添加进集合
    mTitleList.add("标签 一");
    mTitleList.add("标签 二");
    mTitleList.add("标签 三");
    mFragmentList.add(new MyFrament());
    mFragmentList.add(new MyFrament());
    mFragmentList.add(new MyFrament());

    MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), mFragmentList,mTitleList);
    viewPager.setAdapter(adapter);
}

//适配FragmentPagerAdapter
static class MyFragmentPagerAdapter extends FragmentPagerAdapter {

    private List<?> mFragment;
    private List<String> mTitleList;

    /**
     * 普通使用
     */
    public MyFragmentPagerAdapter(FragmentManager fm, List<?> mFragment) {
        super(fm);
        this.mFragment = mFragment;
    }

    /**
     * 接收标题使用
     */
    public MyFragmentPagerAdapter(FragmentManager fm, List<?> mFragment, List<String> mTitleList) {
        super(fm);
        this.mFragment = mFragment;
        this.mTitleList = mTitleList;
    }

    @Override
    public Fragment getItem(int position) {
        return (Fragment) mFragment.get(position);
    }

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

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        super.destroyItem(container, position, object);
    }


    //设置tablayout的title
    @Override
    public CharSequence getPageTitle(int position) {
        if (mTitleList != null) {
            return mTitleList.get(position);
        } else {
            return "";
        }
    }

}

}
4.自己添加Frament

public class MyFrament extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    TextView view = new TextView(getContext());
    view.setText("HelloWorld!");
    return view;
}
}

示例图

这里写图片描述

5.TabLayout的属性设置

1.改变选中字体的颜色

app:tabSelectedTextColor=”@Android:color/light”

2.改变未选中字体的颜色

app:tabTextColor=”@color/colorPrimary”

3.改变指示器下标的颜色

app:tabIndicatorColor=”@android:color/light”

4.改变整个TabLayout的颜色

app:tabBackground=”color”

5.改变TabLayout内部字体大小

app:tabTextAppearance=”@android:style/TextAppearance.Holo.Large”//设置文字的外貌

6.改变指示器下标的高度

app:tabIndicatorHeight=”4dp”

7.添加图标

tabLayout.addTab(tabLayout.newTab().setText(“Tab1”).setIcon(R.mipmap.ic_launcher));

8.Tablayout滑动
app:tabMode=”scrollable”

9.设置Tab内部的子控件的Padding

app:tabPadding=”xxdp”

app:tabPaddingTop=”xxdp”

app:tabPaddingStart=”xxdp”

app:tabPaddingEnd=”xxdp”

app:tabPaddingBottom=”xxdp”

10.设置整个TabLayout的Padding：

app:paddingEnd=”xxdp”

app:paddingStart=”xxdp”

11.内容的显示模式

app:tabGravity=”center”//居中，如果是fill，则是充满

12.设置最大的tab宽度：

app:tabMaxWidth=”xxdp”

13.设置最小的tab宽度：

app:tabMinWidth=”xxdp”

14.TabLayout开始位置的偏移量：

app:tabContentStart=”100dp”