Android材料视图翻页器GridView布局设计不正确。

Question

我正在尝试使用这个库实现一个材料设计的ViewPager：https://github.com/florent37/MaterialViewPager。ViewPager已经正常工作了，但我需要在ViewPager下方实现一个卡片网格布局，就像这张图片展示的那样：。

但是我使用了GridLayoutManager，结果出现了这样的问题：。请问有谁能帮我重新排列这些卡片吗？

这是我的代码： RecyclerView片段内部：

@Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);
    // Calling the RecyclerView
    mRecyclerView = (RecyclerView)view.findViewById(R.id.recyclerView);
    mRecyclerView.setHasFixedSize(true);


            mLayoutManager = new GridLayoutManager(context, 2);
            mRecyclerView.setLayoutManager(mLayoutManager);
            mAdapter = new RecyclerViewMaterialAdapter(new GridAdapter(context, mContentItems));
            mRecyclerView.setAdapter(mAdapter);               

    MaterialViewPagerHelper.registerRecyclerView(getActivity(), mRecyclerView, null);
}

在GridAdapter内部：

public class GridAdapter  extends RecyclerView.Adapter<GridAdapter.ViewHolder> {

List<CommonCategoryItem> mItems;
Context context;
public GridAdapter(Context context,ArrayList<CommonCategoryItem> list) {
    super();
    mItems = new ArrayList<>();
    mItems = list;
    this.context = context;
}

@Override
public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
    final View view= LayoutInflater.from(viewGroup.getContext())
                .inflate(R.layout.list_item_card_small, viewGroup, false);

    return new ViewHolder(view);
}

@Override
public void onBindViewHolder(ViewHolder viewHolder, int i) {

            CommonCategoryItem item = mItems.get(i);
            viewHolder.title.setText(item.getTitle());
            int resId = ImageHelper.getResourceId(context,mItems.get(i).getImage());
            if(resId!=0)
            {viewHolder.imageView.setImageResource(resId);}

}

@Override
public int getItemCount() {

    return mItems.size();
}


public static class ViewHolder extends RecyclerView.ViewHolder {

    public ImageView imageView;
    public TextView title;
    public CardView cardView;

    public ViewHolder(View itemView) {
        super(itemView);
        imageView = (ImageView)itemView.findViewById(R.id.img_thumbnail);
        title = (TextView)itemView.findViewById(R.id.title);
        cardView = (CardView)itemView.findViewById(R.id.smallCardView);
    }       
}

}

还需要一个onclick监听器，以便在每个gridview项点击时移动到不同的片段。我无法获取childposition。有人能帮帮我吗。

- jincy abraham

Answer 1

如果将来有其他人遇到像我一样的问题：在设置适配器时，解决这个问题的“正确”方法如下所定义：https://github.com/florent37/MaterialViewPager/issues/179，即声明网格中列的数量：

adapter = new RecyclerViewMaterialAdapter(new albumadapter(getActivity(), items),NUMBER_OF_COLUMNS);

希望这可以帮助您。

- Brandon Slaght

Answer 2

解决了问题 :) 不知道这是否是正确的方法：

在 mItems 的第一个位置添加了第一个项目的额外副本。即，在 arraylist mItems 的第0个和第1个索引处有2个相同的项目。然后在网格适配器中，做了如下操作。

@Override
public void onBindViewHolder(ViewHolder viewHolder, int i) {
    switch (i) {
        case 0:viewHolder.cardView.setVisibility(View.GONE);
            break;
        default:
            viewHolder.cardView.setVisibility(View.VISIBLE);
            CommonCategoryItem item = mItems.get(i);
            viewHolder.title.setText(item.getTitle());
            int resId = ImageHelper.getResourceId(context,mItems.get(i).getImage());
            if(resId!=0)
            {viewHolder.imageView.setImageResource(resId);}

    }
}

不知道是否合适。此外，需要为每个itemview添加onclicklistener以获取griditem的位置。

- jincy abraham

Answer 3

点击监听器的部分也解决了 :)

将RecyclerViewFragment的方法修改为如下：

@Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);
    // Calling the RecyclerView
    mRecyclerView = (RecyclerView)view.findViewById(R.id.recyclerView);
    mRecyclerView.setHasFixedSize(true);


            mLayoutManager = new GridLayoutManager(context, 2);
            mRecyclerView.setLayoutManager(mLayoutManager);
            GridAdapter gridAdapter = new GridAdapter(context, mContentItems,parentPosition);
            mAdapter = new RecyclerViewMaterialAdapter(gridAdapter);
            mRecyclerView.setAdapter(mAdapter);
            gridAdapter.setOnItemClickListener(new GridAdapter.OnItemClickListener() {
                @Override
                public void onItemClick(View view, int position) {
                    Log.d("helo", position  + " was clicked!");
                    Toast.makeText(getActivity(), position  + " was clicked!", Toast.LENGTH_SHORT).show();
                }
            });

    MaterialViewPagerHelper.registerRecyclerView(getActivity(), mRecyclerView, null);
}

在GridAdapter中添加了itemClickListener和回调函数：

public class GridAdapter  extends RecyclerView.Adapter<GridAdapter.ViewHolder> {

List<CommonCategoryItem> mItems;
Context context;
int parentPosition;
private OnItemClickListener listener;

public interface OnItemClickListener {
    void onItemClick(View itemView, int position);
}

public void setOnItemClickListener(OnItemClickListener listener) {
    this.listener = listener;
}

public GridAdapter(Context context,ArrayList<CommonCategoryItem> list,int parentPosition) {
    super();
    mItems = new ArrayList<>();
    mItems = list;
    this.context = context;
    this.parentPosition = parentPosition;
}

@Override
public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
    final View view= LayoutInflater.from(viewGroup.getContext())
                .inflate(R.layout.list_item_card_small, viewGroup, false);

    return new ViewHolder(view);
}

@Override
public void onBindViewHolder(ViewHolder viewHolder, int i) {
    switch (i) {
        case 0:viewHolder.cardView.setVisibility(View.GONE);
            break;
        default:
            viewHolder.cardView.setVisibility(View.VISIBLE);
            CommonCategoryItem item = mItems.get(i);
            viewHolder.title.setText(item.getTitle());
            int resId = ImageHelper.getResourceId(context,mItems.get(i).getImage());
            if(resId!=0)
            {viewHolder.imageView.setImageResource(resId);}

    }
}

@Override
public int getItemCount() {

    return mItems.size();
}


public class ViewHolder extends RecyclerView.ViewHolder{

    public ImageView imageView;
    public TextView title;
    public CardView cardView;

    public ViewHolder(final View itemView) {
        super(itemView);
        imageView = (ImageView)itemView.findViewById(R.id.img_thumbnail);
        title = (TextView)itemView.findViewById(R.id.title);
        cardView = (CardView)itemView.findViewById(R.id.smallCardView);
        cardView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // Triggers click upwards to the adapter on click
                    listener.onItemClick(itemView, getLayoutPosition());
            }
        });
    }

}

}

现在一切都很好 :)

- jincy abraham