如何使用可单击的行创建CardView

时间:2017-03-01 08:55:31

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

对于我的应用程序,我需要创建一个类似于此的布局:

layout

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

你能指出正确的方向吗?

5 个答案:

答案 0 :(得分:2)

使用相对布局或线性布局创建它,并为父布局

设置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>

<强>输出

enter image description here

答案 1 :(得分:1)

获取listview并最初使底部textview消失。在需要时使其可见。使用cardview不会帮助您创建这样的布局。

答案 2 :(得分:1)

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

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

答案 3 :(得分:1)

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

答案 4 :(得分:1)

首先,RecyclerView中的某个点会CardView不会反转。如果您想使用RecyclerView执行此操作,请执行以下步骤: 步骤1:  创建一个名为Activity_main.xm l的布局,它具有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。