2016-11-10 17 views
10

Tôi muốn phát triển Danh sách như hình ảnh nàyRecyclerView chồng chéo mà không bóng

enter image description here

tôi đã sử dụng để RecylerView ItemDecorator cho chồng chéo. Nhưng nó chồng chéo không có bóng. mã trang trí màn hình & dưới

enter image description here

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> 
+0

Tôi không chắc chắn điều này sẽ giúp chính xác như bạn cần nhưng hãy thử nếu bạn đang sử dụng các bản xem trước trong các mục recyclerview sử dụng thuộc tính độ cao và thử. – Raghavendra

+0

Tôi đang sử dụng độ cao trong 'card_layout.xml'. Vui lòng kiểm tra câu hỏi đã sửa đổi ở trên. – Elango

+0

sử dụng chế độ xem thẻ thay vì mục trang trí và quản lý không gian giữa các thẻ. – Radhey

Trả lời

6

enter image description here thử mã này

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> 

cho bóng thẻ 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> 
4

Đây là ví dụ về giải pháp vấn đề của bạn cho tĩnh CardView, ở đây bạn mỗi khi giảm card_view:cardElevation của bạn bằng cách 2dp hoặc 5dp. Nhưng nếu bạn làm điều này với recyclerview và muốn năng động CardView sau đó bạn phải thêm độ cao trong RecyclerView Adapter động của bạn. Và sự suy giảm của nó với sự gia tăng vị trí của nó. Đặt độ cao của thẻ 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> 

Hy vọng nó sẽ giúp bạn. Cảm ơn.

4

Hãy thử điều này.

Trong RecyclerView Adapter- trên phương pháp OnBindViewHolder thêm đoạn mã sau:

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

Xem ra here:

Lưu ý: phụ thuộc vào mã của bạn thay đổi mã trên và sử dụng nó trong đúng nơi .

Để tham chiếu ở đây là mã bộ điều hợp mẫu của tôi.

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); 
       } 
      } 
     } 
    } 
Các vấn đề liên quan