如何创建具有可点击行的 CardView

Question

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

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

你能指出正确的方向吗？

Answer 1

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

Answer 2

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

mySubtitleTextView.setVisibility(View.GONE) 就像那个副标题没有任何 space 并且标题仍然在中间。

Answer 3

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

Answer 4

使用相对布局或线性布局创建它，并为父布局设置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>

输出

Answer 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

如何创建具有可点击行的 CardView

How to create a CardView with clickable rows

xml

android

android-layout

android-cardview

android-recyclerview