Question

我要进行以下设计：

但是我不知道如何将ImageView和垂直线四舍五入。

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


    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:layout_margin="10dp"
        app:cardCornerRadius="40dp">



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


</LinearLayout>

minSdkVersion 16
targetSdkVersion 28

编辑：

根据文档：CardView

由于圆角修剪的昂贵性质，在平台上在棒棒糖之前，CardView不会裁剪其相交的子对象圆角的。相反，它添加了填充来避免这种情况相交（请参见setPreventCornerOverlap（boolean）更改此设置行为）。

我写了这段代码：

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


    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:layout_margin="10dp"
        android:clickable="true"
        android:focusable="true"
        android:foreground="?attr/selectableItemBackgroundBorderless"
        app:cardCornerRadius="40dp"
        app:cardElevation="0dp"
        app:cardPreventCornerOverlap="false">


        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">


            <com.makeramen.roundedimageview.RoundedImageView
                android:layout_width="170dp"
                android:layout_height="match_parent"
                android:scaleType="fitXY"
                android:src="@drawable/test_ex"
                app:riv_corner_radius_bottom_left="40dp"
                app:riv_corner_radius_top_left="40dp" />


            <View
                android:layout_width="4dp"
                android:layout_height="match_parent"
                android:layout_alignParentRight="true"
                android:layout_marginRight="10dp"
                android:background="@color/colorPrimaryDark" />


        </RelativeLayout>

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


</LinearLayout>

然后是Android 4.3模拟器中的结果：

我该如何剪裁？最好的解决方案是什么？

Answer 1

尝试以下代码：

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


<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="150dp"
    android:layout_margin="10dp"
    app:cardCornerRadius="40dp"
    >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

    <ImageView
        android:layout_width="150dp"
        android:layout_height="match_parent"
        android:src="@drawable/ic_launcher_background"
        android:scaleType="centerCrop"
        android:id="@+id/image_"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#fff"
        android:rotation="15"
        android:layout_marginLeft="-30dp"
        android:layout_marginBottom="-40dp"
        android:layout_toRightOf="@id/image_">

    </View>


       <View
           android:layout_width="5dp"
           android:layout_height="match_parent"
           android:background="#be0202"
           android:layout_alignParentRight="true"
           android:layout_marginRight="20dp"/>

        <View
            android:layout_width="5dp"
            android:layout_height="match_parent"
            android:background="#be0202"
            android:layout_alignParentRight="true"
            android:layout_marginRight="30dp"/>

    </RelativeLayout>


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


</LinearLayout>

结果：

Answer 2

已经由charan回答

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:map="http://schemas.android.com/tools"
    android:id="@+id/cardview1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    card_view:cardCornerRadius="26dp"
    card_view:cardElevation="10dp"
    card_view:cardMaxElevation="2dp"
    card_view:contentPadding="0dp"
    android:layout_margin="@dimen/dp_8">

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="200dp"
        android:padding="5dp">
        <TextView
            android:id="@+id/name_tag"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="HELLO!"
            android:textSize="40sp"/>

       </RelativeLayout>

</androidx.cardview.widget.CardView>

Result

如何创建带有圆角边框的CardView和ImageView？

2 个答案: