TabLayout+ViewPager+Fragment = TabLayout+ViewPager+Fragment = TabLayout+ViewPager+Fragment = TabLayout+ViewPager+Fragment


Here are the renderings:





Next, introduce the use method:


Properties:

1, the app: tabSelectedTextColor = “? Attr /colorPrimary “// Change the color of selected font 2, app:tabTextColor=” #000000 “// Change the color of unselected font 3, app:tabIndicatorColor=”? Attr /colorPrimary “// Change the indicator subscript color 4, APP :tabBackground=” color “// change the entire TabLayout color 5, APP :tabIndicatorHeight=” 4dp” / / set the height of the indicator subscript 6, app: tabTextAppearance = “@ Android: style/TextAppearance Holo. Large / / set the text looks 7,” app: tabMode = “fixed” // Set the TabLayout mode, default is fixed: the TAB will be squeezed a lot of times, can not slide. The other is scrollable, App :paddingEnd= “XXDP” // Set the Padding of the entire TabLayout App :paddingStart= “XXDP” // Set the Padding 10 of the TabLayout, app:tabGravity= “center” // Display mode of the content. Center is in the middle, if it’s fill, 12, app:tabMaxWidth= “XXDP” // Set the maximum TAB width. 13, app:tabContentStart= “100dp” // The offset of the TabLayout starting position


The XML file

<android.support.design.widget.TabLayout
        android:id="@+id/my_tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="? attr/colorPrimary"
        app:tabMode="fixed"
        app:tabSelectedTextColor="? attr/colorPrimary"
        app:tabTextColor="# 000000" />

    <android.support.v4.view.ViewPager
        android:id="@+id/my_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />Copy the code





Java code

Create the corresponding Fragement and layout files based on the number of pages, and then create an adapter that inherits FragmentPagerAdaoter.


MyFragmentPagerAdaoter:

package com.wyh.demo; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import java.util.ArrayList; /** * Created by wyh on 2017/3/10. */ public class MyFragmentPagerAdapter extends FragmentPagerAdapter { private ArrayList<String> tab_title_list; Private ArrayList<Fragment> fragment_list; Public MyFragmentPagerAdapter(FragmentManager FM, ArrayList<String> tab_title_list, ArrayList<Fragment> fragment_list) { super(fm); this.tab_title_list = tab_title_list; this.fragment_list = fragment_list; } @Override public Fragment getItem(int position) {return fragment_list.get(position);
    }

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

    @Override
    public CharSequence getPageTitle(int position) {
        returntab_title_list.get(position); }}Copy the code





MainActivity:

package com.wyh.demo; import android.os.Bundle; import android.support.design.widget.TabLayout; import android.support.v4.app.Fragment; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import java.util.ArrayList; public class MainActivity extends AppCompatActivity { private TabLayout tabLayout; private ViewPager viewPager; private ArrayList<String> tab_title_list = new ArrayList<>(); Private ArrayList<Fragment> Fragment_list = new ArrayList<>(); Private Fragment Fragment1, Fragment2, Fragment3, Fragment4; private MyFragmentPagerAdapter adapter; // adapter @override protected void onCreate(Bundle savedInstanceState) {super.oncreate (savedInstanceState);setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        tabLayout = (TabLayout) findViewById(R.id.my_tablayout);
        viewPager = (ViewPager) findViewById(R.id.my_viewpager);
        tab_title_list.add("Page 1");
        tab_title_list.add("Page 2");
        tab_title_list.add("Page 3");
        tab_title_list.add("Page 4"); tabLayout.addTab(tabLayout.newTab().setText(tab_title_list.get(0))); tabLayout.addTab(tabLayout.newTab().setText(tab_title_list.get(1))); tabLayout.addTab(tabLayout.newTab().setText(tab_title_list.get(2))); tabLayout.addTab(tabLayout.newTab().setText(tab_title_list.get(3))); fragment1 = new Fragment1(); fragment2 = new Fragment2(); fragment3 = new Fragment3(); fragment4 = new Fragment4(); fragment_list.add(fragment1); fragment_list.add(fragment2); fragment_list.add(fragment3); fragment_list.add(fragment4); adapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), tab_title_list, fragment_list); viewPager.setAdapter(adapter); / / for a ViewPager adapter tabLayout setupWithViewPager (ViewPager); / / TabLayout and Viewpager linkage up TabLayout setTabsFromPagerAdapter (adapter); // Set the adapter for TabLayout}}Copy the code








A final note:


TabLayout listening events

tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {@override public void onTabSelected(tabLayout.tab Tab) {@override public void onTabSelected(tabLayout.tab Tab) OnTabUnselected (tabLayout.tab Tab) {Override public void onTabReselected(tabLayout.tab Tab) { }}); }Copy the code


Add ICONS to the TabLayout

tabLayout.addTab(tabLayout.newTab().setText("Page 1").setIcon(R.mipmap.ic_launcher));Copy the code


Ps: This is just a simple use of TabLayout+ViewPager+Fragment to achieve paging sliding effect, not involved in other optimization problems, there may still be some problems, welcome to point out!


Download the Demo