如何在RecyclerView中创建不同的CardView布局 [英] How to Create Different CardView Layouts inside RecyclerView

问题描述

我已经完成了一系列有关如何在recyclerview布局中放置不同宽度和高度的不同卡片布局的文章.不幸的是，到目前为止，没有人帮助我.

I have gone through series of posts on how to place different card layouts with different width and height inside a recyclerview layout. Unfortunately, none helped me so far.

我已经创建了GridLayout，如下所示，但是我都想创建一个单独的卡，该卡显示在Main Card Layouts的顶部.在这种情况下为紧急警报卡".

i already have the GridLayout created as shown below but all i want to create a separate card that shows on top of the Main Card Layouts. In this case "emergency alert card".

下面是我要实现的目标的图像.

Below is the image of what i'm trying to achieve.

我的密码:

MainActivity.java

public class MainActivity extends AppCompatActivity {
 private RecyclerView mRecyclerView;
    private RecyclerView.Adapter mAdapter;
    private RecyclerView.LayoutManager mLayoutManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);


        setContentView(R.layout.activity_main);
        mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);

        // use this setting to improve performance if you know that changes
        // in content do not change the layout size of the RecyclerView
        mRecyclerView.setHasFixedSize(true);

        // use a GridLayout manager
        mLayoutManager = new GridLayoutManager(this, 2);
        mRecyclerView.setLayoutManager(mLayoutManager);

        // specify an adapter
        List<ItemObject> rowListItem = getAllItemList();
        mAdapter = new CardViewDataAdapter(MainActivity.this, rowListItem);
        mRecyclerView.setAdapter(mAdapter);
}


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }


    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_help) {
            Intent intent = new Intent(this, help_activity.class);
            startActivity(intent);
            finish();
            return true;
        } else if (id == R.id.action_about) {
            Intent intent = new Intent(this, about_activity.class);
            startActivity(intent);
            finish();
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

    //Handles the references to items displayed on each cards
    private List<ItemObject> getAllItemList() {

        List<ItemObject> allItems = new ArrayList<ItemObject>();
        allItems.add(new ItemObject("Fire", R.drawable.fire));
        allItems.add(new ItemObject("Ambulance", R.drawable.ambulance));
        allItems.add(new ItemObject("Police", R.drawable.police));
        allItems.add(new ItemObject("ERT", R.drawable.ert));
        allItems.add(new ItemObject("Safety Tips", R.drawable.safetytips));
        allItems.add(new ItemObject("First Aid", R.drawable.firstaid));
        return allItems;
    }

    private ArrayList<Object> getSampleArrayList() {
        ArrayList<Object> items = new ArrayList<>();
        items.add(new ItemObject("Dany Targaryen", R.drawable.click));

        return items;
    }

CardViewDataAdapter.java

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

    private List<ItemObject> itemList;
    private static final int TYPE_IMAGE = 1;
    private static final int TYPE_GROUP = 2;

    public CardViewDataAdapter(Context context, List<ItemObject> itemList) {
        this.itemList = itemList;
    }

    // Create new views (invoked by the layout manager)
    @Override
    public CardViewDataAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,
                                                             int viewType) {
        // create a new view
        View itemLayoutView = LayoutInflater.from(parent.getContext()).inflate(
                R.layout.cardview_row, null);

        //Todo: set the view's size, margins, paddings and layout parameters
        // create ViewHolder
        ViewHolder viewHolder = new ViewHolder(itemLayoutView);
        return viewHolder;

    }

    public class ImageViewHolder extends RecyclerView.ViewHolder {
        ImageView mImage;
        public ImageViewHolder(View itemView) {
            super (itemView);
            // init views...
        }
    }

    @Override
    public int getItemViewType(int position) {
        // here your custom logic to choose the view type
        return position == 0 ? TYPE_IMAGE : TYPE_GROUP;
    }


    // Replace the contents of a view (invoked by the layout manager)
    @Override
    public void onBindViewHolder(ViewHolder viewHolder, int position) {

        // - get data from your itemsData at this position
        // - replace the contents of the view with that itemsData
        viewHolder.image_view.setImageResource(itemList.get(position).getPhoto());
        viewHolder.image_name.setText(itemList.get(position).getName());


    }


    // Return the size of your dataset (invoked by the layout manager)
    @Override
    public int getItemCount() {
        return this.itemList.size();
    }

    // Provide a reference to the views for each data item
    // Complex data items may need more than one view per item, and
    // you provide access to all the views for a data item in a view holder
    // inner class to hold a reference to each item of RecyclerView
    public static class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
        // each data item is a string and an image in this case
        public ImageView image_view;
        public TextView image_name;
        public Context context;


        public ViewHolder(View itemLayoutView) {
            super(itemLayoutView);
            this.image_view = (ImageView) itemLayoutView.findViewById(R.id.image_view);
            this.image_name = (TextView) itemLayoutView.findViewById(R.id.image_name);

            itemLayoutView.setOnClickListener(this);
            itemLayoutView.setOnLongClickListener(new View.OnLongClickListener() {
                @Override
                public boolean onLongClick(View v) {
                    Toast.makeText(v.getContext(), "OnLongClick Coming soon! :" + getAdapterPosition(),
                            Toast.LENGTH_SHORT).show();
                    return true;
                }
            });

        }

推荐答案

一种解决方案是将 StaggeredGridLayoutManager 用作回收站视图的布局管理器.然后，您可以配置视图持有人以使其占据整个视图的宽度.

One solution would be to use StaggeredGridLayoutManager as a layout manager for your recycler view. Then you can configure your view holder to span the full width of the view.

将布局管理器更改为 StaggeredGridLayoutManager :

mRecyclerView.setLayoutManager(
    new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));

然后在 onBind 中，检查您的第一项(紧急卡)，并更改其布局参数以启用全跨度:

Then in onBind, check for your first item (emergency card), and change its layout parameters to enable full span:

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

    // - get data from your itemsData at this position
    // - replace the contents of the view with that itemsData
    viewHolder.image_view.setImageResource(itemList.get(position).getPhoto());
    viewHolder.image_name.setText(itemList.get(position).getName());

    if(position == 0) {
        StaggeredGridLayoutManager.LayoutParams params = 
            (StaggeredGridLayoutManager.LayoutParams) viewHolder.getLayoutParams();
        params.setFullSpan(true);

        viewHolder.itemView.setLayoutParams(params);
    }
}

这篇关于如何在RecyclerView中创建不同的CardView布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！