TabLayout + ViewPager, tablayoutviewpager

TabLayout + ViewPager, tablayoutviewpager

I. Implementation ideas

1. Add dependencies in build. gradle, for example:

compile 'com.android.support:support-v4:23.4.0'
compile 'com.android.support:design:23.4.0'

You can also replace the support-v4 with a appcompat-v7, for example:

compile 'com.android.support:appcompat-v7:23.4.0'

Because appcompat-v7 depends on support-v4.

For more information, see the support library section of the official documentation.

2. Add TabLayout and ViewPager to xml, for example:

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"              xmlns:tool="http://schemas.android.com/tools"              xmlns:app="http://schemas.android.com/apk/res-auto"              tool:context=".TabViewActivity"              android:orientation="vertical"              android:layout_width="match_parent"              android:layout_height="match_parent">    <android.support.design.widget.TabLayout        android:id="@+id/tab_layout"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="@color/tabLayoutBackground"        app:tabMode="scrollable"        app:tabTextColor="@color/color_white"        app:tabSelectedTextColor="@color/tabSelectedText"        app:tabIndicatorHeight="3dp"        app:tabIndicatorColor="@color/color_white"/>    <android.support.v4.view.ViewPager        android:id="@+id/view_pager"        android:layout_width="match_parent"        android:layout_height="wrap_content"/></LinearLayout>

TabLayout:

(1) tabMode has two attributes: "scrollable", used for multiple tags, and "fixed", used for less tags, which distributes all tags evenly on the screen, therefore, there cannot be many tags, and the names cannot be long. Otherwise, the results will be incomplete.

(2) tabIndicator refers to the indicator bar in the text. When a tab is selected, the indicator bar appears under the text.

3. Get the View object

        TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);        ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);

4. Create a subclass of FragmentStatePagerAdaper and implement the constructor.

    public class ViewPagerAdapter extends FragmentStatePagerAdapter {        public ViewPagerAdapter(FragmentManager fm) {            super(fm);        }
　　}

Creates an instance object for this class.

        ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());

In this step, you can select a subclass that implements FragmentPagerAdapter or a subclass of FragmentStatePagerAdapter.

If the FragmentPagerAdapter is used for a small number of pages, there will be a small number of Fragment, because as long as the user stays in the current Activity, the Fragment will not be destroyed, therefore, memory consumption is relatively high.

The working principle of the FragmentStatePagerAdapter is similar to that of the ListView. As long as the Fragment is invisible to the user, it will be destroyed and only its status will be retained.

Because I use the Fragment under the v4 compatibility package, we need to use getSupportFragmentManager () to obtain the FragmentManager.

5. Set ViewPager and TabLayout

        viewPager.setAdapter(viewPagerAdapter);        tabLayout.setupWithViewPager(viewPager);

 

2. Improved Adapter

1. Rewrite the three methods.

    public class ViewPagerAdapter extends FragmentStatePagerAdapter {

        ......
        @Override        public Fragment getItem(int position) {            return null;        }        @Override        public int getCount() {            return 0;        }        @Override        public CharSequence getPageTitle(int position) {            return super.getPageTitle(position);        }    }

2. Create the title data of a tab:

Private String [] mTitles = new String [] {"", "English", "Mathematics", "physics", "biology", "chemistry", "Geography ", "Politics", "History "};

Create a subclass of Fragment:

public class ViewPagerFragment extends Fragment {    private static final String KEY = "extra";    private String mMessage;    public ViewPagerFragment() {    }    public static ViewPagerFragment newInstance(String extra) {        Bundle args = new Bundle();        args.putString(KEY, extra);        ViewPagerFragment fragment = new ViewPagerFragment();        fragment.setArguments(args);        return fragment;    }}

Create a Fragment collection object and add the instance object to the collection:

    private ArrayList<ViewPagerFragment> mViewPagerFragments = new ArrayList<>();        ......        for (int i = 0; i < mTitles.length; i++) {            mViewPagerFragments.add(ViewPagerFragment.newInstance(mTitles[i]));        }

3. Modify the method in the Adapter

    public class ViewPagerAdapter extends FragmentStatePagerAdapter {        private String[] titles;        private ArrayList<ViewPagerFragment> viewPagerFragments;        public ViewPagerAdapter(FragmentManager fm) {            super(fm);        }        public void setTitles(String[] titles) {            this.titles = titles;        }        public void setFragments(ArrayList<ViewPagerFragment> viewPagerFragments) {            this.viewPagerFragments = viewPagerFragments;        }        @Override        public Fragment getItem(int position) {            return viewPagerFragments.get(position);        }        @Override        public int getCount() {            return viewPagerFragments.size();        }        @Override        public CharSequence getPageTitle(int position) {            return titles[position];        }    }

4. send data to the Adapter

        viewPagerAdapter.setTitles(mTitles);        viewPagerAdapter.setFragments(mViewPagerFragments);

 

3. Improve Fragment

1. fragment_view_pager_item.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"              android:orientation="vertical"              android:layout_width="match_parent"              android:layout_height="match_parent">    <TextView        android:id="@+id/fragment_text"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:gravity="center"/></LinearLayout>

2. Improve the Fragment Method

public class ViewPagerFragment extends Fragment {

    ......    @Override    public void onCreate(@Nullable Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        Bundle bundle = getArguments();        if (bundle != null) {            mMessage = bundle.getString(KEY);        }    }    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.fragment_view_pager_item, container, false);        TextView textView = (TextView) view.findViewById(R.id.fragment_text);        textView.setText(mMessage);        return view;    }}

When creating Fragment, the onCreate method is called, and some State Information Initialization is executed in it, which is used to pause or stop the restoration.

When Fragment loads a view for the first time, it calls the onCreateView method to load and initialize the view. The returned result is the root view of the Fragment layout. The third parameter of the inflate method indicates whether to add the loaded layout (R. layout. fragment_view_pager_item) to the ViewGroup of the container. According to the instructions in the official documents, the system has added the layout to the container as shown in the previous example. Therefore, this parameter is set to false.

 

Static: