如何创建带有可点击行的 CardView答案

【问题标题】：How to create a CardView with clickable rows如何创建带有可点击行的 CardView
【发布时间】：2017-03-01 08:55:30
【问题描述】：

对于我的应用，我需要创建一个类似这样的布局：

我一直在考虑在CardView 中添加一个RecyclerView。但是如果我这样做，我必须创建两个单独的row.xml（一个用于第一行和第二行，另一个用于第三和第四行）。我想知道是否有更简单的方法可以获得相同的结果。

你能指出正确的方向吗？

【问题讨论】：

将底部文字的可见性设置为VISIBLE/GONE
感谢您的评论。我想过，但是如何让上面的文本垂直居中呢？
@daniele 如果你的底部文本视图不见了并且父级的重力为center_vertical，它将自动居中对齐
您可以为图标设置内边距，这样图标将决定视图的高度。然后将 TextViews 放置在 LinearLayout 中，一个在另一个之下。并将 LinearLayout 的重心设置为中心。这样所有内容都将居中，如果您将一个视图设置为 GONE，则另一个视图将居中
@VladMatvienko 是的，这似乎是一个可行的解决方案。我要试试。谢谢

标签： android xml android-layout android-recyclerview android-cardview

【解决方案1】：

使用相对布局或线性布局创建，并为父布局设置id

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.CardView
        android:id="@+id/card_view_notification"
        android:layout_gravity="center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        card_view:cardCornerRadius="2dp"
        card_view:contentPadding="7dp">
        <LinearLayout 
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="15dp"
        android:id="@+id/rel_one"
        >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Version"
            android:id="@+id/hedone"
            android:textColor="#000000"
            android:textSize="18sp" />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="5.3(123)"
            android:textColor="#000000"
            android:layout_below="@+id/hedone"
            android:textSize="14sp" />



    </RelativeLayout>
    <View
        android:layout_width="match_parent"
        android:layout_height="0.1dp"
        android:background="#7B7A7F"
        />
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="15dp"
        android:id="@+id/relative_two"
        >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Version"
            android:id="@+id/hedtwo"
            android:textColor="#000000"
            android:textSize="18sp" />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Disponibile"
            android:textColor="#000000"
            android:layout_below="@+id/hedtwo"
            android:textSize="14sp" />



    </RelativeLayout>
    <View
        android:layout_width="match_parent"
        android:layout_height="0.1dp"
        android:background="#7B7A7F"
        />
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="15dp"
        android:id="@+id/relative_three"
        >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:text="Your text"
            android:textColor="#000000"
            android:textSize="18sp" />



    </RelativeLayout>
    <View
        android:layout_width="match_parent"
        android:layout_height="0.1dp"
        android:background="#7B7A7F"
        />
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="15dp"
        android:id="@+id/relative_four"
        >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:text="Yourtext"
            android:textColor="#000000"
            android:textSize="18sp" />



    </RelativeLayout>
        </LinearLayout>
</android.support.v7.widget.CardView>

</LinearLayout>

输出

【讨论】：

谢谢。我正在检查这个
我成功地修改了你的代码。我添加了 ImageViews，这样我就不需要使用 RecyclerViews。如果您有时间，请添加 ImageViews 以供将来参考。非常感谢
很高兴帮助您编写愉快的代码:)

【解决方案2】：

获取一个列表视图并最初使底部文本视图消失。在需要时使其可见。使用 cardview 不会帮助您创建这样的布局。

【讨论】：

我选择使用 CardView 是因为我希望该边框带有阴影。有没有其他方法可以得到它？
检查一下..这可能会帮助您处理边框stackoverflow.com/questions/24095223/…
谢谢。我去看看

【解决方案3】：

也许您可以创建一个row.xml 并在必要时隐藏字幕。

mySubtitleTextView.setVisibility(View.GONE) 就像那个副标题不占用任何空间并且标题仍然在中心。

【讨论】：

感谢您的回答。我可以这样做，但在前两行中，标题没有垂直居中。将字幕设置为View.GONE时如何使其居中？
您为您的 textview 使用一个父级，其重心为 center_vertical，子级将始终垂直居中。

【解决方案4】：

我建议制作多个卡片视图并使用 getItemViewType 方法。您可以为不同的布局设置各种视图类型，并且在 onCreateViewHolder 方法中，您可以根据视图类型扩展卡片视图。 How to create RecyclerView with multiple view type?

【讨论】：

感谢您的回答。这绝对是一个有趣的选择

【解决方案5】：

首先，RecyclerView 中的一个点将是 CardView 而不是反向的。如果您想使用 RecyclerView 进行操作，请按照以下步骤操作：第1步：创建一个名为Activity_main.xml 的布局，其中有一个 RecyclerView，例如：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".ui.MainActivity">


<android.support.v7.widget.RecyclerView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/recycler_view"
    android:scrollbars="vertical"
    ></android.support.v7.widget.RecyclerView>
</RelativeLayout>

第 2 步。创建名为 product_layout 的布局，其中 CardView 类似：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="100dp">
    <!--<TextView-->
        <!--android:layout_width="match_parent"-->
        <!--android:layout_height="wrap_content"-->
        <!--android:text="Products"-->
        <!--android:gravity="center"/>-->
<!--<RelativeLayout-->
    <!--android:layout_width="match_parent"-->
    <!--android:layout_height="wrap_content">-->
    <!--<TextView-->
        <!--android:layout_width="match_parent"-->
        <!--android:layout_height="wrap_content"-->
        <!--android:gravity="center"-->
        <!--android:textStyle="italic"-->
        <!--android:text="Products"-->
        <!--android:textAppearance="?android:textAppearanceLarge"/>-->
<!--</RelativeLayout>-->
    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/cardview">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@drawable/smartphone"
                android:id="@+id/mobileimage"
                />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="SmartPhones"
                android:layout_toRightOf="@+id/mobileimage"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:textStyle="bold"
                android:id="@+id/productname"
                android:layout_alignParentTop="true"/>
        </RelativeLayout>

    </android.support.v7.widget.CardView>


</LinearLayout>

第 3 步。现在在MainActivity.java 中设置第一个 RecyclerView 布局，如果您正在处理 json，然后在设置您的适配器后解析它：

recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
        adapter = new ProductAdapter(list, getApplicationContext());
        layoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(layoutManager);
        recyclerView.addItemDecoration(new DividerItemDecoration(this, LinearLayoutManager.VERTICAL));
        recyclerView.setHasFixedSize(true);
        recyclerView.setAdapter(adapter);

步骤 4. 创建一个名为 ProductAdapter.java dafile 的适配器，例如：

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.example.dharmendras.productdetail.models.Products;
import com.example.dharmendras.productdetail.R;

import java.util.ArrayList;


public class ProductAdapter extends RecyclerView.Adapter <ProductAdapter.ProductsViewHolder> {
    ArrayList<Products> products = new ArrayList<Products>();
    private Context context;
    public ProductAdapter(ArrayList<Products> products,Context context){
        this.context = context;
        this.products = products;
    }
    @Override
    public ProductsViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.product_layout,parent,false);
        ProductsViewHolder productsViewHolder = new ProductsViewHolder(view);

        return productsViewHolder;
    }

    @Override
    public void onBindViewHolder(ProductsViewHolder holder, int position) {
         Products pdt = products.get(position);
        //Picasso.with(context).load(pdt.getImage_url()).resize(120, 60).into(holder.product_img);
        //pdt.getProduct_name()
        holder.product_name.setText(pdt.getProduct_name());
        //Drawable myDrawable = context.getResources().getDrawable(pdt.getImage_url());

       // int id = getContext().getResources().getIdentifier("imageName", "drawable", getContext().getPackageName());
       // ImageView myImageView = (ImageView)findViewById(R.id.myImage);

        //myImageView.setImageResource(R.drawable.icon);


       // holder.product_img.setImageDrawable(pdt.getImage_url());
        //imageView.setBackground(getResources().getDrawable(getResources().getIdentifier("name","id",getPackageName())));
        String name = pdt.getImage_url();
        int id = context.getResources().getIdentifier(name, "drawable",context.getPackageName());
        Drawable drawable = context.getResources().getDrawable(id);
        holder.product_img.setImageDrawable(drawable);
    }

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

    public static  class ProductsViewHolder extends  RecyclerView.ViewHolder{

        ImageView product_img;
        TextView product_name;
        public ProductsViewHolder(View view){
            super(view);
            product_img = (ImageView) view.findViewById(R.id.mobileimage);
            product_name = (TextView) view.findViewById(R.id.productname);

        }

    }
}

第 5 步。如果您想添加 RecyclerView 可点击，则在您的 Activity_main.java 中的 RecyclerView 上设置 onClickListener。

【讨论】：