Android--电商首页的分页导航
目录
- 效果图
-
- 实现方案
- 布局文件
- RecyclerView的布局文件
- EntranceAdapter类
- ModelHomeEntrance类
- ScreenUtil类
- CagegoryViewPagerAdapter类
- 逻辑文件（实现）
效果图
实现方案
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的布局文件
<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);
}