RecyclerView 重叠没有阴影答案

【问题标题】：RecyclerView overlapping without shadowRecyclerView 重叠没有阴影
【发布时间】：2017-03-24 00:57:41
【问题描述】：

我想像这张图一样开发List

我曾经使用 RecylerView ItemDecorator 进行重叠。但它是重叠的，没有阴影。屏幕和装饰器代码如下

public class OverlapDecoration extends RecyclerView.ItemDecoration {

private final static int vertOverlap = -50;

@Override
public void getItemOffsets (Rect outRect, View view, RecyclerView parent,       RecyclerView.State state) {

outRect.set(0, 0, 0, vertOverlap);
}
}

card_layout.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:tag="cards main container">

<android.support.v7.widget.CardView
    android:id="@+id/card_view"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardBackgroundColor="@color/color_white"
    card_view:cardElevation="5dp"
    card_view:cardUseCompatPadding="true">

            <TextView
                android:id="@+id/textViewName"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="30dp"
                android:layout_marginBottom="30dp"
                android:text="Android Name"
                android:textAppearance="?android:attr/textAppearanceLarge"/>

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

</LinearLayout>

【问题讨论】：

我不确定这是否会完全满足您的需要，但如果您在 recyclerview 项目中使用 cardviews，请尝试使用海拔属性并尝试。
我在“card_layout.xml”中使用高程。请检查上述修改后的问题。
使用卡片视图而不是物品装饰器并管理卡片之间的空间。
请输入您的适配器代码。

标签： android android-recyclerview android-cardview cardview

【解决方案1】：

试试这个代码

card_layout.xml

<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"
    android:orientation="vertical"
    android:tag="cards main container">

    <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="0dp"
        android:clipToPadding="false"
        android:elevation="0dp"
        card_view:cardUseCompatPadding="false"
        card_view:paddingEnd="0dp"
        card_view:paddingStart="0dp">

        <TextView
            android:id="@+id/textViewName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="30dp"
            android:layout_marginTop="30dp"
            android:gravity="center"
            android:text="Android Name"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:layout_above="@id/textViewName"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:background="@drawable/card_shadow" />
    </android.support.v7.widget.CardView>


</RelativeLayout>

用于卡片阴影 card_shadow

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="90"
        android:endColor="#77111111"
        android:startColor="@android:color/transparent" />
</shape>

【讨论】：

欢迎提供一些解释，因此无需解析代码即可理解答案

【解决方案2】：

这是静态CardView 问题解决方案的示例，在这里您每次将card_view:cardElevation 减少2dp 或5dp。但是，如果您使用 recyclerview 完成此操作并且想要动态 CardView，那么您必须在您的 RecyclerView Adapterdynamically 中添加高程。并且随着位置的增加而减少。设置卡片高度holder.cardView.setCardElevation()

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:tag="cards main container">

<android.support.v7.widget.CardView
    android:id="@+id/card_view"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardElevation="20dp"
    card_view:cardUseCompatPadding="false">

    <TextView
        android:id="@+id/textViewName1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="30dp"
        android:layout_marginBottom="30dp"
        android:text="Android Name"
        android:textAppearance="?android:attr/textAppearanceLarge"/>

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

<android.support.v7.widget.CardView
    android:id="@+id/card_view2"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardElevation="18dp"
    card_view:cardUseCompatPadding="false">

    <TextView
        android:id="@+id/textViewName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="30dp"
        android:layout_marginBottom="30dp"
        android:text="Android Name"
        android:textAppearance="?android:attr/textAppearanceLarge"/>

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

<android.support.v7.widget.CardView
    android:id="@+id/card_view3"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardUseCompatPadding="false">

    <TextView
        android:id="@+id/textViewName3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="30dp"
        android:layout_marginBottom="30dp"
        android:text="Android Name"
        android:textAppearance="?android:attr/textAppearanceLarge"/>

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

</LinearLayout>

希望对您有所帮助。谢谢。

【讨论】：

【解决方案3】：

试试这个。

在RecyclerView Adapter-onBindViewHolder方法上添加如下代码：

  CardView cardView = ((MyViewHolder) holder).cardView;
  float elevation = cardView.getCardElevation();
  float value = elevation-Float.parseFloat((position*0.5)+"");
  cardView.setCardElevation(value);

查看输出here：

注意：取决于你的代码修改上面的代码并在正确的地方使用它。

这里是我的示例适配器代码供参考。

public class CustomAdapter extends RecyclerView.Adapter {
        public static final String Name = "Name";
        public static final String Author = "Author";
        public static final String Description = "Description";
        private List<Book> dataSet;
        private Context context;


        public CustomAdapter(List<Book> data, Context context) {
            this.dataSet = data;
            this.context = context;
        }

        public class MyViewHolder extends RecyclerView.ViewHolder {
           ImageView profile;
            TextView name, author,description;
            CardView cardView;

            public MyViewHolder(View itemView) {
                super(itemView);
                profile = (ImageView) itemView.findViewById(R.id.profile_image);
                name = (TextView) itemView.findViewById(R.id.name);
                author = (TextView) itemView.findViewById(R.id.author);
                description = (TextView) itemView.findViewById(R.id.description);
                cardView = (CardView) itemView.findViewById(R.id.cardview);
            }
        }

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

        @Override
        public int getItemViewType(int position) {
            return position;
        }

        @Override
        public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            RecyclerView.ViewHolder vh;
            View v = LayoutInflater.from(parent.getContext())
                    .inflate(R.layout.book_layout_sample, parent, false);

            vh = new MyViewHolder(v);
            return vh;
        }

        @Override
        public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
            if (holder instanceof MyViewHolder) {
                Book book = dataSet.get(position);
                ((MyViewHolder) holder).profile.setImageDrawable(getResources().getDrawable(R.drawable.blank_user,this.context.getTheme()));
                ((MyViewHolder) holder).name.setText(book.title);
                ((MyViewHolder) holder).author.setText(book.author);
                ((MyViewHolder) holder).description.setText(book.description);
                CardView cardView = ((MyViewHolder) holder).cardView;
                float ele = cardView.getCardElevation();
                float val = ele-Float.parseFloat((position*0.5)+"");
                cardView.setCardElevation(val);

                if(position==0)
                {
                    RecyclerView.LayoutParams params = (RecyclerView.LayoutParams)cardView.getLayoutParams();
                    params.setMargins(0,0,0,0);
                    cardView.setLayoutParams(params);
                }
            }
        }
    }

【讨论】：