目錄
效果圖
實現方案
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);
}