Android--电商首页的分页导航

效果图

在这里插入图片描述

实现方案

RecyclerView + ViewPager

布局文件

将ViewPager和小圆点指示器都包裹在约束布局里面
小圆点放在约束布局的线性布局里面

<androidx.constraintlayout.widget.ConstraintLayout
     android:id="@+id/home_entrance"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_marginStart="15dp"
     android:layout_marginLeft="15dp"
     android:layout_marginTop="5dp"
     android:layout_marginEnd="15dp"
     android:layout_marginRight="15dp"
     app:layout_constraintEnd_toEndOf="parent"
     app:layout_constraintStart_toStartOf="parent"
     app:layout_constraintTop_toBottomOf="@+id/banner">


     <androidx.viewpager.widget.ViewPager
          android:id="@+id/main_home_entrance_vp"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toTopOf="parent" />

          <LinearLayout
               android:id="@+id/point"
               android:layout_width="wrap_content"
               android:layout_height="20dp"
               android:layout_marginTop="10dp"
               android:gravity="center"
               android:orientation="horizontal"
               app:layout_constraintBottom_toBottomOf="parent"
               app:layout_constraintEnd_toEndOf="parent"
               app:layout_constraintStart_toStartOf="parent"                         
               app:layout_constraintTop_toBottomOf="@+id/main_home_entrance_vp">

          </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

RecyclerView的布局文件

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

EntranceAdapter类

public class EntranceAdapter extends RecyclerView.Adapter<EntranceAdapter.EntranceViewHolder> {
    
    

    private List<ModelHomeEntrance> mDatas;

    /**
     * 页数下标,从0开始(通俗讲第几页)
     */
    private int mIndex;

    /**
     * 每页显示最大条目个数
     */
    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;
        this.mPageSize = pageSize;
        this.mDatas = datas;
        this.mIndex = index;
        this.mLayoutInflater = LayoutInflater.from(context);
    }

    @NonNull
    @Override
    public EntranceViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
    
    
        return new EntranceViewHolder(mLayoutInflater.inflate(R.layout.item_home_entrance, null));
    }

    @Override
    public void onBindViewHolder(@NonNull EntranceViewHolder holder, final int position) {
    
    
        /**
         * 在给View绑定显示的数据时,计算正确的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);
                Toast.makeText(mContext, entrance.getName(), Toast.LENGTH_SHORT).show();
            }
        });
    }

    @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;

        EntranceViewHolder(View itemView) {
    
    
            super(itemView);
            entranceIconImageView = itemView.findViewById(R.id.entrance_image);
            entranceNameTextView = itemView.findViewById(R.id.entrance_name);
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams((int) ((float) ScreenUtil.getScreenWidth() / 6.0f), (int) ((float) ScreenUtil.getScreenWidth() / 6.0f));
            itemView.setLayoutParams(layoutParams);
        }
    }
}

ModelHomeEntrance类

package com.czhoujunlv.drug.Bean;

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;
    }
}

ScreenUtil类

package com.czhoujunlv.drug.toolclass;

import android.content.Context;

public class ScreenUtil {
    
    

    static double scale;
    static int screenWidth = 0, screenHeight = 0;

    public static void init(Context context) {
    
    
        scale = context.getResources().getDisplayMetrics().density;
        screenWidth = context.getResources().getDisplayMetrics().widthPixels;
        screenHeight = context.getResources().getDisplayMetrics().heightPixels;
    }

    public static int dip2px(float dipValue) {
    
    
        return (int) (dipValue * scale + 0.5f);
    }

    public static int px2dip(float pxValue) {
    
    
        return (int) (pxValue / scale + 0.5f);
    }

    public static int px2sp(float pxValue) {
    
    
        return (int) (pxValue / scale + 0.5f);
    }

    public static int getScreenHeight() {
    
    
        return screenHeight;
    }

    public static int getScreenWidth() {
    
    
        return screenWidth;
    }
}

CagegoryViewPagerAdapter类

package com.czhoujunlv.drug.adapter;

import android.view.View;
import android.view.ViewGroup;

import androidx.viewpager.widget.PagerAdapter;

import java.util.List;

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;
    }
}

逻辑文件(实现)

//拿到两个控件的引用
	private ViewPager entranceViewPager;
	private LinearLayout pointLinearLayout;
	entranceViewPager = (ViewPager) getActivity().findViewById(R.id.main_home_entrance_vp);
    pointLinearLayout = (LinearLayout) getActivity().findViewById(R.id.point);
    //填充数据
    private void initData() {
    
    
        homeEntrances = new ArrayList<>();
        homeEntrances.add(new ModelHomeEntrance("潇湘超市", R.mipmap.ic_category_0));
        homeEntrances.add(new ModelHomeEntrance("医疗设备", R.mipmap.ic_category_1));
        homeEntrances.add(new ModelHomeEntrance("潮流医学", R.mipmap.ic_category_2));
        homeEntrances.add(new ModelHomeEntrance("生活服务", R.mipmap.ic_category_3));
        homeEntrances.add(new ModelHomeEntrance("潇湘到家", R.mipmap.ic_category_4));
        homeEntrances.add(new ModelHomeEntrance("潇湘充值", R.mipmap.ic_category_5));
        homeEntrances.add(new ModelHomeEntrance("现金福利", R.mipmap.ic_category_6));
        homeEntrances.add(new ModelHomeEntrance("领券", R.mipmap.ic_category_7));
        homeEntrances.add(new ModelHomeEntrance("领金贴", R.mipmap.ic_category_8));
        homeEntrances.add(new ModelHomeEntrance("潇湘会员", R.mipmap.ic_category_10));
        homeEntrances.add(new ModelHomeEntrance("潇湘国际", R.mipmap.ic_category_11));
        homeEntrances.add(new ModelHomeEntrance("潇湘拍卖", R.mipmap.ic_category_12));
        homeEntrances.add(new ModelHomeEntrance("潇湘看病", R.mipmap.ic_category_13));
        homeEntrances.add(new ModelHomeEntrance("潇湘二手", R.mipmap.ic_category_14));
        homeEntrances.add(new ModelHomeEntrance("潇湘旅行", R.mipmap.ic_category_16));
        homeEntrances.add(new ModelHomeEntrance("全部分类", R.mipmap.ic_category_15));
    }
//两个方法去实现两个控件
private void init() {
    
    //viewpager和指示器
        ConstraintLayout.LayoutParams layoutParams12 = new ConstraintLayout.LayoutParams(ConstraintLayout.LayoutParams.CHAIN_SPREAD, (int) ((float) ScreenUtil.getScreenWidth() / 3.0f));

        //首页菜单分页
        //ConstraintLayout.LayoutParams entrancelayoutParams = new ConstraintLayout.LayoutParams(ConstraintLayout.LayoutParams.MATCH_PARENT, (int) ((float) ScreenUtil.getScreenWidth() / 4.0f + 70));
        //homeEntranceLayout.setLayoutParams(entrancelayoutParams);

        entranceViewPager.setLayoutParams(layoutParams12);
        LayoutInflater inflater = LayoutInflater.from(getActivity());
        //将RecyclerView放至ViewPager中:
        int pageSize = HOME_ENTRANCE_PAGE_SIZE;
        //一共的页数等于 总数/每页数量,并取整。
        int pageCount = (int) Math.ceil(homeEntrances.size() * 1.0 / pageSize);
        viewList = new ArrayList<View>();
        for (int index = 0; index < pageCount; index++) {
    
    
            //每个页面都是inflate出一个新实例
            RecyclerView recyclerView = (RecyclerView) inflater.inflate(R.layout.item_home_entrance_vp, entranceViewPager, false);
            recyclerView.setLayoutParams(layoutParams12);
            recyclerView.setLayoutManager(new GridLayoutManager(getActivity(), 5));
            EntranceAdapter entranceAdapter = new EntranceAdapter(getActivity(), homeEntrances, index, HOME_ENTRANCE_PAGE_SIZE);
            recyclerView.setAdapter(entranceAdapter);
            viewList.add(recyclerView);
        }
        CagegoryViewPagerAdapter adapter = new CagegoryViewPagerAdapter(viewList);
        entranceViewPager.setAdapter(adapter);

        points = new ArrayList<>();
        Log.i("RecyclerView的数量:", String.valueOf(viewList.size()));
        initPoint();
        entranceViewPager.setCurrentItem(0);
        entranceViewPager.clearOnPageChangeListeners();

        entranceViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    
    
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    
    

            }

            @Override
            public void onPageSelected(int position) {
    
    
                for(int i=0;i<points.size();i++){
    
    
                    points.get(i).setImageResource(R.drawable.unselect_point);
                }
                points.get(position).setImageResource(R.drawable.select_point);
            }

            @Override
            public void onPageScrollStateChanged(int state) {
    
    

            }
        });
//        entranceIndicatorView.setIndicatorCount(entranceViewPager.getAdapter().getCount());
//        entranceIndicatorView.setCurrentIndicator(entranceViewPager.getCurrentItem());
//        entranceViewPager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
    
    
//            @Override
//            public void onPageSelected(int position) {
    
    
//                entranceIndicatorView.setCurrentIndicator(position);
//            }
//        });
    }
    public void initPoint(){
    
    //指示器小圆点
        for(int i =0 ;i<viewList.size();i++) {
    
    
            ImageView point = new ImageView(getActivity());
            point.setImageResource(R.drawable.unselect_point);
            point.setLayoutParams(new LinearLayout.LayoutParams(30,30));
            LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) point.getLayoutParams();
            lp.setMargins(0,0,0,0);
            points.add(point);
            pointLinearLayout.addView(point);
        }
        points.get(0).setImageResource(R.drawable.select_point);
    }

猜你喜欢

转载自blog.csdn.net/qq_43337254/article/details/112867641