Android Material View Pager GridView 布局设计不当

Question

我正在尝试使用 this. The pager is working properly. But what i need is a grid layout of cards under the view pager like 实现 material 查看寻呼机。

但是我正在使用 GridLayoutManager 并且最终得到了这样的结果。谁能帮我重新调整一下。

这是我的代码：内部回收视图片段：

@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 项目单击时移动到不同的片段。我无法获得孩子的位置。谁能帮帮我。

Answer 1

问题解决了 :) 不知道方法对不对：

将 mItems 的第一项的额外副本添加到第一个位置。即，arraylist mItems 的第 0 和第 1 个索引处有 2 个相同的项目。然后在grid adpater中，是这样的。

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

    }
}

不知道是否合适。此外，每个项目视图都需要一个 onclicklistener 来获取 griditem 的位置。

Answer 2

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

修改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());
            }
        });
    }

}

}

现在一切都很好:)

Answer 3

以防其他人将来像我一样遇到这个问题："correct" 解决这个问题的方法，定义如下：https://github.com/florent37/MaterialViewPager/issues/179 是在设置适配器时声明网格中的列数：

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

希望对您有所帮助。

Android Material View Pager GridView 布局设计不当

Android Material View Pager GridView Layout Design not proper

android

android-viewpager

android-cardview

gridlayoutmanager

android-recyclerview