如何设计Gridview像监护人的应用程序

Question

我正在尝试制作像监护人应用程序的布局.我知道什么是gridview以及如何设计它并用数据等来膨胀它.

我想要设计什么？

这个布局包含图像而不是图像的项目,并且还有延迟加载.

我面临的问题是什么？

1-Confused应该与哪个viewi一起使用.GridView,ListView或RecyclerView.

2 - 如果我使用GridView,那么如何为某些项目设置不同的项目布局.

我试过了什么？

我尝试使用线性布局作为单独的xml然后我在运行时将xml添加到根布局.它有点工作,但问题上升,当我需要添加clicklistener来显示相关的帖子,因为将有超过100多个帖子数据.

如果有人引导我朝着正确的方向前进,那会很有帮助.谢谢!

编辑.经过这里的答案后.我用这种方法.我习惯了xml.然后我用适配器中的getViewType更改布局,但是没有给出这样的结果.我仍在寻找更有说服力的解决方案.

这是我厌倦的代码.

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

MainDTO mainDTO;
public RecyclerAdapter(MainDTO mainDTO){
    this.mainDTO=mainDTO;
}

@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    View view;
    ViewHolder viewHolder;
    switch (viewType){
        case 0:
            view= LayoutInflater.from(parent.getContext()).inflate(R.layout.header,parent,false);
            viewHolder=new ViewHolder(view,viewType);
            return viewHolder;
        default:
            view = LayoutInflater.from(parent.getContext()).inflate(R.layout.box,parent,false);
            viewHolder=new ViewHolder(view,viewType);
            return viewHolder;
    }
}

@Override
public void onBindViewHolder(ViewHolder holder, int position) {
    ImageLoader imageLoader = ImageLoader.getInstance();
    if(position == 0){
        imageLoader.displayImage(mainDTO.getPosts().get(position).getThumbnail_images().getFull().getUrl(),holder.thumbnail);
        holder.title.setText(mainDTO.getPosts().get(position).getTitle());
    }
    else if (position > 0 ){
        if(mainDTO.getPosts().get(position).getThumbnail_images()!=null)
            imageLoader.displayImage(mainDTO.getPosts().get(position).getThumbnail_images().getFull().getUrl(),holder.thumbnail);
        holder.title.setText(mainDTO.getPosts().get(position).getTitle());
    }
}

@Override
public int getItemCount() {
    return mainDTO.getPosts().size();
}

@Override
public int getItemViewType(int position) {
    int viewType = 1; //Default is 1
    if (position == 0) viewType = 0; //if zero, it will be a header view
    return viewType;
}

public static class ViewHolder extends RecyclerView.ViewHolder{
    public TextView title;
    public ImageView thumbnail;
    public ViewHolder(View itemView,int viewType) {
        super(itemView);

        if(viewType == 0){
            title = (TextView)itemView.findViewById(R.id.tv_title);
            thumbnail = (ImageView)itemView.findViewById(R.id.iv_thumbnail);
        }else if(viewType == 1){
            title = (TextView)itemView.findViewById(R.id.tv_title_2);
            thumbnail = (ImageView)itemView.findViewById(R.id.iv_thumbnail_2);
        }
    }
}
}

Answer 1

您需要使用带有RecyclerView的StaggeredGridLayoutManager来实现监护应用程序中正在执行的操作.查看此链接StaggeredGridLayoutManager教程

编辑1

我编写了一个小样本应用程序,可以演示监护应用程序正在实现的目标.这是Github链接.我将在每个步骤中解释它:

• 我使用了StaggerdGridLayoutManager,因为在你所指的监护人应用程序中,它占据了不同的单元格高度.这种布局使我们能够拥有不同高度的物品.

• 对于每种不同的视图类型,我们必须创建不同的视图持有者 例如,我为示例应用程序中的每个不同的项类型创建了3个不同的视图持有者.

• 覆盖getItemViewType以使recyclerview适配器知道要膨胀的视图.

例如,我将数据对象存储在Object类型的List中以存储异构对象,并检查每个项目是否为特定类的实例.我创建了3种不同的类型:

@Override
public int getItemViewType(int position) {
    // we check here which item type to return based on object type
    if (items.get(position) instanceof ImageModel)
        return ITEM_TYPE_IMAGE;
    if (items.get(position) instanceof TextViewModel)
        return ITEM_TYPE_TEXT;
    if (items.get(position) instanceof ButtonModel)
        return ITEM_TYPE_BUTTON;

    return -1;
}

• 获取OnCreateViewHolder中当前视图持有者的itemViewType,以确定要膨胀的布局.

对于样本的实例:

@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    switch (viewType){
        case ITEM_TYPE_IMAGE:
            View image = ((LayoutInflater)BaseApplication.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE)).inflate(R.layout.item_image, parent, false);
            return new ImageViewHolder(image);
        case ITEM_TYPE_BUTTON:
            View button = ((LayoutInflater)BaseApplication.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE)).inflate(R.layout.item_button, parent, false);
            return new ButtonViewHolder(button);
        case ITEM_TYPE_TEXT:
            View text = ((LayoutInflater)BaseApplication.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE)).inflate(R.layout.item_text, parent, false);
            return new TextViewHolder(text);
    }

    return null;
}

• 使特定类型的项目覆盖整行范围.

由于某些帖子类型在监护人应用程序中占据全部范围,我们可以在OnBindViewHolder方法中使用以下代码使任何项目扩展到完整的布局范围.

@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
    if (holder.getItemViewType() == ITEM_TYPE_IMAGE){
        StaggeredGridLayoutManager.LayoutParams layoutParams = (StaggeredGridLayoutManager.LayoutParams) holder.itemView.getLayoutParams();
        layoutParams.setFullSpan(true);
    }
}

这使得该项目覆盖了所有布局范围,就像监护人应用程序中最大的帖子一样.

通过以上步骤,您可以创建类似这样的布局(来自示例github应用程序的图像):

这里有3种不同的项目类型:上面两个项目是按钮,中间一个是ImageView,底部是TextView.