This article is serialized by wu Weilong, the author of Vegetable bird nest

CAI Bird nest is a professional program ape online learning platform, to provide the most systematic Android project actual combat courses

For reprint, please contact caibird’s Nest public number (CNIAO5), and indicate the source.

[toc]

preface

Let’s take a look at two mature apps:

Electric shock news:

Hupu Sports:

These two apps have achieved a relatively good effect of customization. The implementation is custom based on Tablayout + ViewPager + Fragment. As the saying goes, a thousand miles are not covered by a single step. Let’s first see how the basic effect is achieved, and then go into further study of customization or study of Daishen’s open source library after proficiency.

Here’s what cainiao’s mobile assistant does:

Tablayout introduction

 <android.support.design.widget.TabLayout
     android:id="@+id/tab_layout"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:background="@color/colorPrimary"
     app:tabTextColor="@color/md_white_1000"
     app:tabSelectedTextColor="@color/md_white_1000"
     app:tabMode="fixed">
</android.support.design.widget.TabLayout>
Copy the code

Looking directly at layout files is the best way to learn

This section describes several common attributes:

Background: Sets the background image, for example, blue

TabTextColor: indicates the font color of TAB, for example, white

TabSelectedTextColor: Font color when TAB is selected. For example, white

TabMode: indicates the TAB mode. Fixed indicates the fixed mode, and scrollable indicates the scrollable mode. For details, see the above two applications.

Code implementation process:

Adapter for sliding pages: viewPagerAdapter.java

public class ViewPagerAdapter extends FragmentStatePagerAdapter { private List<FragmentInfo> mFragments; public ViewPagerAdapter(FragmentManager fm,List<FragmentInfo> fragments) { super(fm); mFragments = fragments; } @Override public Fragment getItem(int position) { try { return (Fragment) mFragments.get(position).getFragment().newInstance(); } catch (InstantiationException e) { e.printStackTrace(); } catch (IllegalAccessException e) { e.printStackTrace(); } return null; } @Override public int getCount() { return mFragments.size(); } @Override public CharSequence getPageTitle(int position) { return mFragments.get(position).getTitle(); }}Copy the code

Javabean that stores Fragment information, fragmentInfo. Java

public class FragmentInfo { private String title; private Class fragment; public FragmentInfo(String title, Class fragment) { this.title = title; this.fragment = fragment; } public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } public Class getFragment() { return fragment; } public void setFragment(Class fragment) { this.fragment = fragment; }}Copy the code

Initialize fragment data

private List<FragmentInfo> initFragments(){ List<FragmentInfo> mFragments = new ArrayList<>(4); Mfragmentinfo (new FragmentInfo(" recommended ", shamefragment. Class)); Mfragmentinfo. Add (new FragmentInfo (" ranking ", toplistFragment.class)); Mfragmentinfo. Add (new FragmentInfo (" game ", gamesFragment.class)); Mfragmentinfo. Add (new FragmentInfo (" categoryFragmentInfo ", categoryFragment.class)); return mFragments; }Copy the code

Initialize Tablayout

private void initTablayout() { PagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager(),initFragments());  mViewPager.setOffscreenPageLimit(adapter.getCount()); mViewPager.setAdapter(adapter); . / / Tablayout associated viewPager mTabLayout setupWithViewPager (mViewPager); }Copy the code

Analysis of the

You can use the ViewPager control in the layout file (I didn’t give you the layout code above, but you should know that there is one). Then write an adapter to match the Fragment and ViewPager. Of course, the most important step is the Tablayout and ViewPager association, do not forget, otherwise can not achieve such elegant effect.

recommended