2017-06-12 17 views
1

私は現在、リサイクルビューを設定して、各アイテムの下部にドロップシャドウを追加して、うまく動作するようにしました。私は各項目の周りに薄い灰色の境界線を追加し、可能であればソフトな丸めを加えたいと思います。これまでコード:recyclerView項目のAndroid:borderを追加してrecyclerに丸みを付ける表示アイテム

public class VerticalSpaceItemDecorator extends RecyclerView.ItemDecoration { 

    private final int verticalSpaceHeight; 

    public VerticalSpaceItemDecorator(int verticalSpaceHeight) { 

     this.verticalSpaceHeight = verticalSpaceHeight; 
    } 

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

     // 1. Determine whether to add a spacing decorator 
     if (parent.getChildAdapterPosition(view) != parent.getAdapter().getItemCount() - 1) { 

      // 2. Set the bottom offset to the specified height 
      outRect.bottom = verticalSpaceHeight; 
     } 
    } 
} 

public class ShadowVerticalSpaceItemDecorator extends RecyclerView.ItemDecoration { 

    private Drawable divider; 

    public ShadowVerticalSpaceItemDecorator(Context context) { 

     // Use the default style divider 
     final TypedArray styledAttributes = context.obtainStyledAttributes(
       new int[] { android.R.attr.listDivider }); 
     this.divider = styledAttributes.getDrawable(0); 
     styledAttributes.recycle(); 
    } 

    public ShadowVerticalSpaceItemDecorator(Context context, int resId) { 

     // Use a custom divider specified by a drawable 
     this.divider = ContextCompat.getDrawable(context, resId); 
    } 

    @Override 
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) { 

     // 1. Get the parent (RecyclerView) padding 
     int left = parent.getPaddingLeft(); 
     int right = parent.getWidth() - parent.getPaddingRight(); 

     // 2. Iterate items of the RecyclerView 
     for (int childIdx = 0; childIdx < parent.getChildCount(); childIdx++) { 

      // 3. Get the item 
      View item = parent.getChildAt(childIdx); 

      // 4. Determine the item's top and bottom with the divider 
      RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) item.getLayoutParams(); 
      int top = item.getBottom() + params.bottomMargin; 
      int bottom = top + divider.getIntrinsicHeight(); 

      // 5. Set the divider's bounds 
      this.divider.setBounds(left, top, right, bottom); 

      // 6. Draw the divider 
      this.divider.draw(c); 
     } 
    } 
} 

カスタムレイアウト:

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

<RelativeLayout 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:background="@android:color/white" 
android:orientation="vertical"> 
<ImageView 
    android:id="@+id/imageView" 
    android:layout_width="match_parent" 
    android:layout_height="80dp" 
    android:layout_alignParentLeft="true" 
    android:layout_alignParentStart="true" 
    android:layout_alignParentTop="true" 
    android:paddingLeft="5dp" 
    android:paddingRight="5dp" 

    app:srcCompat="@mipmap/ic_launcher" /> 

<TextView 
    android:id="@+id/textView_title" 
    style="@style/AudioFileInfoOverlayText" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_alignBottom="@+id/imageView" 
    android:layout_alignLeft="@+id/imageView" 
    android:layout_alignParentLeft="true" 
    android:layout_alignParentStart="true" 
    android:layout_alignStart="@+id/imageView" 
    android:layout_gravity="left" 
    android:paddingLeft="5dp" 
    android:paddingRight="5dp" 
    android:text="TextView" 
    android:textColor="@android:color/white" 
    android:textSize="22sp" /> 

<TextView 
    android:id="@+id/textView_info" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_alignLeft="@+id/imageView" 
    android:layout_alignParentLeft="true" 
    android:layout_alignParentStart="true" 
    android:layout_alignStart="@+id/textView_title" 
    android:layout_below="@+id/imageView" 
    android:layout_marginTop="12dp" 
    android:paddingLeft="5dp" 
    android:paddingRight="5dp" 
    android:text="TextView" /> 

<Button 
    android:id="@+id/button_one" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_alignParentEnd="true" 
    android:layout_alignParentRight="true" 
    android:layout_below="@+id/textView_info" 
    android:layout_marginBottom="5pt" 
    android:layout_marginRight="5pt" 
    android:background="@drawable/circle_button" 
    android:text="One" 
    android:textColor="@android:color/white" /> 

<Button 
    android:id="@+id/button_two" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_alignLeft="@+id/imageView" 
    android:layout_below="@+id/textView_info" 
    android:layout_marginBottom="5pt" 
    android:layout_marginLeft="5pt" 
    android:background="@drawable/circle_button" 
    android:backgroundTint="?android:attr/colorControlHighlight" 
    android:text="Two" 
    android:textColor="@android:color/white" /> 
</RelativeLayout> 

</LinearLayout> 

drop_shadowコード:

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle"> 
    <size android:height="4dp" /> 
    <solid android:color="@color/darkGray" /> 
    <corners android:topLeftRadius="0dp" android:topRightRadius="0dp" 
    android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp"/> 
</shape> 

ボーダー:

<?xml version="1.0" encoding="UTF-8"?> 

<stroke android:width="3dp" 
    android:color="@color/gray" 
    /> 

<padding android:left="1dp" 
    android:top="1dp" 
    android:right="1dp" 
    android:bottom="1dp" 
    /> 

<corners android:bottomRightRadius="7dp" 
    android:bottomLeftRadius="7dp" 
    android:topLeftRadius="7dp" 
    android:topRightRadius="7dp"/> 

+0

あなたのコンテンツを投稿するlaあなたはrecyclerViewに表示またはバインドするyoutを入力してください –

+0

あなたはより詳細な質問を編集できますか? –

+0

@ ND1010_あなたがリクエストしたものを追加したと思いますが、そうでない場合は追加できます。 –

答えて

2

あなたは<stroke android:color="@color/colorAccent" android:width="5dp"/>

そして大胆なボーダーにしたい場合はRelativeLayout

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


    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="@drawable/border" 
     android:orientation="vertical"> 
     <ImageView 
      android:id="@+id/imageView" 
      android:layout_width="match_parent" 
      android:layout_height="80dp" 
      android:layout_alignParentLeft="true" 
      android:layout_alignParentStart="true" 
      android:layout_alignParentTop="true" 
      android:paddingLeft="5dp" 
      android:paddingRight="5dp" 

      app:srcCompat="@mipmap/ic_launcher" /> 

     <TextView 
      android:id="@+id/textView_title" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_alignBottom="@+id/imageView" 
      android:layout_alignLeft="@+id/imageView" 
      android:layout_alignParentLeft="true" 
      android:layout_alignParentStart="true" 
      android:layout_alignStart="@+id/imageView" 
      android:layout_gravity="left" 
      android:paddingLeft="5dp" 
      android:paddingRight="5dp" 
      android:text="TextView" 
      android:textColor="@android:color/white" 
      android:textSize="22sp" /> 

     <TextView 
      android:id="@+id/textView_info" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_alignLeft="@+id/imageView" 
      android:layout_alignParentLeft="true" 
      android:layout_alignParentStart="true" 
      android:layout_alignStart="@+id/textView_title" 
      android:layout_below="@+id/imageView" 
      android:layout_marginTop="12dp" 
      android:paddingLeft="5dp" 
      android:paddingRight="5dp" 
      android:text="TextView" /> 

     <Button 
      android:id="@+id/button_one" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_alignParentEnd="true" 
      android:layout_alignParentRight="true" 
      android:layout_below="@+id/textView_info" 
      android:layout_marginBottom="5pt" 
      android:layout_marginRight="5pt" 
      android:text="One" 
      android:textColor="@android:color/white" /> 

     <Button 
      android:id="@+id/button_two" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_alignLeft="@+id/imageView" 
      android:layout_below="@+id/textView_info" 
      android:layout_marginBottom="5pt" 
      android:layout_marginLeft="5pt" 
      android:backgroundTint="?android:attr/colorControlHighlight" 
      android:text="Two" 
      android:textColor="@android:color/white" /> 
    </RelativeLayout> 

</LinearLayout> 

の変更の背景の後に続いborder.xml

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle"> 
    <stroke android:color="@color/colorAccent" android:width="1dp"/> 
    <corners android:radius="5dp" /> 
</shape> 

という名前のDrawableのフォルダにXMLを作成します。

+0

THanks、うまくいきます。現在の問題は、私のドロップシャドウが私が追加した丸みを越えて広がっていることだけです。私は私のdrop_shadowと境界xmlファイルのコードを追加しました。これを解決するには、ドロップシャドウにパディングを追加するだけですか? –

+0

はい、これを試すことができます –

+0

@FredWhiteあなたがあなたの答えを得れば私の答えとあなたが問題がない場合は右のマークをマークする必要があります:) –

関連する問題