Android quickly implements the paging navigation menu function of Meituan and Ele.me homepage

Some time ago, the company's mobile App added a module, which is similar to the group buying function of Meituan. The homepage has a paging menu function similar to Meituan. Those who have used the Meituan and Ele.me apps should be familiar with this function. The homepage menu can be switched by pages, similar to the switching effect of our banner ads, but it can only be switched manually. Therefore, we can use Viewpager to implement the entire paging effect, and we can use RecyclerView to implement the menu items inside, and dynamically change the menu items inside. In the future, if the product manager wants to change the requirements, it can be done with one or two lines of code. Isn't it smart? So today, our homepage paging menu effect can be implemented using ViewPager+RecyclerView. Now that we have the idea, let's start. First, let's take a look at the effect diagram of the implementation.

Home page layout file, the paging indicator is a separately encapsulated control, the code will be posted later

 <?xml version= "1.0" encoding= "utf-8" ?>
 <LinearLayout xmlns:android= "http://schemas.android.com/apk/res/android"  
              xmlns:app= "http://schemas.android.com/apk/res-auto"  
              android:id= "@+id/home_entrance"  
              android:layout_width= "match_parent"  
              android:layout_height= "wrap_content"  
              android:orientation= "vertical" > 
 
    < android.support.v4.view.ViewPager
        android:id= "@+id/main_home_entrance_vp"  
        android:layout_width= "match_parent"  
        android:layout_height= "wrap_content" /> 
 
    <com.stx.xhb.meituancategorydemo.widget.IndicatorView
        android:id= "@+id/main_home_entrance_indicator"  
        android:layout_width= "match_parent"  
        android:layout_height= "32dp"  
        android:layout_marginLeft= "16dp"  
        android:layout_gravity= "bottom"  
        android:layout_marginRight= "16dp"  
 app:gravity= "0"  
        app:indicatorColor= "#668b8989"  
        app:indicatorColorSelected= "#FF5722"  
        app:indicatorWidth= "6" /> 
 
 </LinearLayout>

RecyclerView child control in ViewPager

 item_home_entrance_vp.xml

 <?xml version= "1.0" encoding= "utf-8" ?>
 <android.support.v7.widget.RecyclerView xmlns:android= "http://schemas.android.com/apk/res/android"  
                                        android:layout_width= "match_parent"  
                                        android:layout_height= "wrap_content" />

Next is the layout file of the RecyclerView menu item

 <?xml version= "1.0" encoding= "utf-8" ?>
 <FrameLayout xmlns:android= "http://schemas.android.com/apk/res/android"  
             android:layout_width= "match_parent"  
             android:layout_height= "match_parent" > 
 
 <LinearLayout
        android:layout_width= "match_parent"  
        android:layout_height= "match_parent"  
        android:gravity= "center_horizontal"  
        android:orientation= "vertical"  
        android:padding= "6dp" > 
 
 <ImageView
            android:id= "@+id/entrance_image"  
            android:layout_width= "wrap_content"  
            android:layout_height= "0dp"  
            android:layout_margin= "2dp"  
            android:layout_weight= "1"  
            android:scaleType= "fitCenter" /> 
 
 <TextView
            android:id= "@+id/entrance_name"  
            android:layout_width= "wrap_content"  
            android:layout_height= "wrap_content"  
            android:layout_margin= "2dp"  
            android:singleLine= "true"  
            android:textColor= "#80000000"  
            android:textSize= "12dp" />
 </LinearLayout> 
 
 < View  
        android:layout_width= "match_parent"  
        android:layout_height= "match_parent"  
        android:background= "@drawable/selector_trans_divider" /> 
 
 </FrameLayout>

Now that the layout is created, let's take a look at the specific implementation code. Since our menu item has an icon and a name, for easy management, we can create a menu item entity class ModelHomeEntrance.class

 /**
 * Author: Mr.xiao on 2017/5/23
 *
 * @mail:[email protected]
 * @github:https://github.com/xiaohaibin
 * @describe: menu item entity class
 */
 public class ModelHomeEntrance {
    private String name = "" ;
 private int image; 
 
 public ModelHomeEntrance(String name , int image) {
 this.image = image;
 this.name = name ;
 } 
 
 
 public   int getImage() {
 return image;
 } 
 
 public String getName() {
 return   name ;
 } 
 
 }

Since our paging effect is implemented with ViewPager, we need to create a ViewPager adapter, CagegoryViewPagerAdapter.Class

 package com.stx.xhb.meituancategorydemo.adapter; 
 
 import android.support.v4.view.PagerAdapter ;
 import android. view . View ;
 import android.view.ViewGroup ; 
 
 import java.util.List; 
 
 /**
 * Created by jxnk25 on 2016/9/21.
 *
 * @link https://xiaohaibin.github.io/
 * @email: [email protected]
 * @github: https://github.com/xiaohaibin
 * @description: Home page category ViewPager adapter
 */
 public class CagegoryViewPagerAdapter extends PagerAdapter { 
 
    private List< View > mViewList;
 public CagegoryViewPagerAdapter(List< View > mViewList) {
        this.mViewList = mViewList;
 } 
 
 @Override
 public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(mViewList.get(position));
 } 
 
 @Override
 public Object instantiateItem(ViewGroup container, int position) {
        container.addView(mViewList.get(position));
 return (mViewList.get(position));
 } 
 
 @Override
 public   int getCount() {
        if (mViewList == null )
 return 0;
 return mViewList.size () ;
 } 
 
 @Override
 public boolean isViewFromObject( View   view , Object object) {
 return   view == object;
 }
 }

Now that we have the ViewPager adapter, we need to create a RecyclerView menu item list adapter, EntranceAdapter.Class

 package com.stx.xhb.meituancategorydemo.adapter; 
 
 import android.content.Context;
 import android.support.v7.widget.RecyclerView;
 import android.view.LayoutInflater ;
 import android. view . View ;
 import android.view.ViewGroup ;
 import android.widget.ImageView;
 import android.widget.LinearLayout;
 import android.widget.TextView; 
 
 import com.stx.xhb.meituancategorydemo.R;
 import com.stx.xhb.meituancategorydemo.model.ModelHomeEntrance;
 import com.stx.xhb.meituancategorydemo.utils.ScreenUtil; 
 
 import java.util.List; 
 
 /**
 * Author: Mr.xiao on 2017/5/23
 *
 * @mail:[email protected]
 * @github:https://github.com/xiaohaibin
 * @describe: Home page paging menu item list adapter
 */
 public class EntranceAdapter extends RecyclerView.Adapter<EntranceAdapter.EntranceViewHolder> { 
 
    private List<ModelHomeEntrance> mDatas; 
 
 /**
 * Page number subscript, starting from 0 (commonly known as page number)
 */
 private int mIndex; 
 
 /**
 * Maximum number of items displayed per page
 */
 private int mPageSize; 
 
 private Context mContext; 
 
    private final LayoutInflater mLayoutInflater; 
 
    private List<ModelHomeEntrance> homeEntrances; 
 
 public EntranceAdapter(Context context, List<ModelHomeEntrance> datas, int   index , int pageSize) {
        this.mContext = context;
        this.homeEntrances = datas;
 mPageSize = pageSize;
 mDatas = datas;
 mIndex = index ;
        mLayoutInflater = LayoutInflater. from (context); 
 
 } 
 
 @Override
 public EntranceViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
 return new EntranceViewHolder(mLayoutInflater.inflate(R.layout.item_home_entrance, null ));
 } 
 
 @Override
 public void onBindViewHolder(EntranceViewHolder holder, final int position) {
 /**
 * When binding the displayed data to the View , calculate the correct position = position + mIndex * mPageSize,
 */
        final int pos = position + mIndex * mPageSize;
        holder.entranceNameTextView.setText(homeEntrances.get(pos).getName());
        holder.entranceIconImageView.setImageResource(homeEntrances.get(pos).getImage());
        holder.itemView.setOnClickListener(new View .OnClickListener() {
 @Override
 public void onClick( View v) {
                ModelHomeEntrance entrance = homeEntrances.get(pos);
 // TODO: 2017/5/24 Click event processing
 }
 });
 } 
 
 @Override
 public   int getItemCount() {
 return mDatas. size () > (mIndex + 1) * mPageSize ? mPageSize : (mDatas. size () - mIndex * mPageSize);
 } 
 
 @Override
 public long getItemId( int position) {
 return position + mIndex * mPageSize;
 } 
 
    class EntranceViewHolder extends RecyclerView.ViewHolder { 
 
        private TextView entranceNameTextView;
        private ImageView entranceIconImageView; 
 
 public EntranceViewHolder( View itemView) {
 super(itemView);
            entranceIconImageView = (ImageView) itemView.findViewById(R.id.entrance_image);
            entranceNameTextView = (TextView) itemView.findViewById(R.id.entrance_name);
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, ( int ) (( float ) ScreenUtil.getScreenWidth() / 4.0f));
            itemView.setLayoutParams(layoutParams);
 }
 }
 }

Finally, the code of our MainActivity is implemented. Our overall idea is to display the items in pages according to the data source of the homepage menu items. The homepage determines the number of single-page menu displays. The total number divided by the number of single-page displays is the number of displayed pages. We then create a RecyclerView based on the number of pages and add it to the ViewPager's adapter. Let's take a look at how it works.

 package com.stx.xhb.meituancategorydemo; 
 
 import android.os.Bundle;
 import android.support.v4.view.ViewPager ;
 import android.support.v7.app.AppCompatActivity;
 import android.support.v7.widget.GridLayoutManager;
 import android.support.v7.widget.RecyclerView;
 import android.view.LayoutInflater ;
 import android. view . View ;
 import android.widget.FrameLayout;
 import android.widget.LinearLayout; 
 
 import com.stx.xhb.meituancategorydemo.adapter.CagegoryViewPagerAdapter;
 import com.stx.xhb.meituancategorydemo.adapter.EntranceAdapter;
 import com.stx.xhb.meituancategorydemo.model.ModelHomeEntrance;
 import com.stx.xhb.meituancategorydemo.utils.ScreenUtil;
 import com.stx.xhb.meituancategorydemo.widget.IndicatorView; 
 
 import java.util.ArrayList;
 import java.util.List; 
 
 public class MainActivity extends AppCompatActivity {
 public   static final int HOME_ENTRANCE_PAGE_SIZE = 10; //Number of home page menu pages
    private ViewPager entranceViewPager;
    private LinearLayout homeEntranceLayout;
    private List<ModelHomeEntrance> homeEntrances;
    private IndicatorView entranceIndicatorView; 
 
 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 initData();
 initView();
 init();
 } 
 
 
 private void initView() {
        homeEntranceLayout = (LinearLayout) findViewById(R.id.home_entrance);
        entranceViewPager = (ViewPager) findViewById(R.id.main_home_entrance_vp);
        entranceIndicatorView = (IndicatorView) findViewById(R.id.main_home_entrance_indicator);
 } 
 
 
 private void initData() {
        homeEntrances = new ArrayList<>();
        homeEntrances. add (new ModelHomeEntrance( "Gourmet" , R.mipmap.ic_category_0));
        homeEntrances.add (new ModelHomeEntrance( "Movie" , R.mipmap.ic_category_1));
 homeEntrances.add (new ModelHomeEntrance( "Hotel Accommodation" , R.mipmap.ic_category_2));
 homeEntrances.add (new ModelHomeEntrance( "Life Service" , R.mipmap.ic_category_3));
        homeEntrances.add (new ModelHomeEntrance( "KTV" , R.mipmap.ic_category_4));
        homeEntrances. add (new ModelHomeEntrance( "Travel" , R.mipmap.ic_category_5));
 homeEntrances.add (new ModelHomeEntrance( "Learning and Training" , R.mipmap.ic_category_6));
 homeEntrances.add (new ModelHomeEntrance( "汽车服务" , R.mipmap.ic_category_7));
 homeEntrances.add (new ModelHomeEntrance( "Photography" , R.mipmap.ic_category_8));
 homeEntrances.add (new ModelHomeEntrance( "Leisure and Entertainment" , R.mipmap.ic_category_10));
        homeEntrances. add (new ModelHomeEntrance( "美人" , R.mipmap.ic_category_11));
 homeEntrances.add (new ModelHomeEntrance( "Sports and Fitness" , R.mipmap.ic_category_12));
        homeEntrances.add ( new ModelHomeEntrance( "大Healthcare" , R.mipmap.ic_category_13));
        homeEntrances. add (new ModelHomeEntrance( "Group Buying" , R.mipmap.ic_category_14));
        homeEntrances. add (new ModelHomeEntrance( "Attractions" , R.mipmap.ic_category_16));
 homeEntrances.add (new ModelHomeEntrance( "All Categories" , R.mipmap.ic_category_15));
 } 
 
 private void init() {
        LinearLayout.LayoutParams layoutParams12 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, ( int ) (( float ) ScreenUtil.getScreenWidth() / 2.0f)); 
 
 //Home menu paging
        FrameLayout.LayoutParams entrancelayoutParams = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, ( int ) (( float ) ScreenUtil.getScreenWidth() / 2.0f + 70));
        homeEntranceLayout.setLayoutParams(entrancelayoutParams);
        entranceViewPager.setLayoutParams(layoutParams12);
        LayoutInflater inflater = LayoutInflater. from (this);
 //Put the RecyclerView in the ViewPager:
 int pageSize = HOME_ENTRANCE_PAGE_SIZE;
 //The total number of pages is equal to the total number / the number of pages, and rounded.
 int pageCount = ( int ) Math.ceil(homeEntrances. size () * 1.0 / pageSize);
        List< View > viewList = new ArrayList< View >();
 for ( int   index = 0; index < pageCount; index ++) {
 //Each page inflates a new instance
            RecyclerView recyclerView = (RecyclerView) inflater.inflate(R.layout.item_home_entrance_vp, entranceViewPager, false );
            recyclerView.setLayoutParams(layoutParams12);
            recyclerView.setLayoutManager(new GridLayoutManager(MainActivity.this, 5));
            EntranceAdapter entranceAdapter = new EntranceAdapter(MainActivity.this, homeEntrances, index , HOME_ENTRANCE_PAGE_SIZE);
            recyclerView.setAdapter(entranceAdapter);
            viewList.add (recyclerView);
 }
        CagegoryViewPagerAdapter adapter = new CagegoryViewPagerAdapter(viewList);
        entranceViewPager.setAdapter(adapter);
        entranceIndicatorView.setIndicatorCount(entranceViewPager.getAdapter().getCount());
        entranceIndicatorView.setCurrentIndicator(entranceViewPager.getCurrentItem());
        entranceViewPager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
 @Override
 public void onPageSelected( int position) {
                entranceIndicatorView.setCurrentIndicator(position);
 }
 });
 }
 }

The above is the main implementation code for realizing the paging menu effect on the home page. This paging menu effect is also common in our applications. Maybe someday the company's product manager will bring a mobile phone to you and ask you to realize this effect by following Meituan or something like that.