android - 创建一个顶部有一个半圆的 CardView

Question

我非常喜欢设计登录屏幕。

类似这样的:
我如何实际从顶部切割卡片以填充其顶部的可绘制对象？任何帮助都会很有值(value)。

[来源:https://www.uplabs.com/posts/login-android-app/]

Answer 1

您可以通过以下方式实现几乎相似的效果:

1. 创建一个 RelativeLayout 作为 CardView 和 ImageView
的容器
2. 设置 card_view:cardElevation="0dp" 以在 CardView
上显示 ImageView
3. 在ImageView上，为配置文件Icon设置一个透明圆形图片。

仅供引用，如果您想要提升您的 CardView，将 CardView 高程设置为card_view:cardElevation="4dp" 并将 ImageView 高程设置为android:elevation="8dp" 在 CardView 上显示 ImageView。

这是完整的工作代码。试试这个:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#727272">


    <RelativeLayout
        android:id="@+id/card_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"
        android:layout_marginLeft="24dp"
        android:layout_marginRight="24dp"
        android:layout_centerInParent="true">

        <android.support.v7.widget.CardView
            android:id="@+id/card_login"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="50dp"
            android:foreground="?android:attr/selectableItemBackground"
            card_view:cardBackgroundColor="#ffffff"
            card_view:cardCornerRadius="4dp"
            card_view:cardElevation="0dp"
            card_view:cardUseCompatPadding="false" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:layout_marginTop="50dp"
                android:padding="24dp">

                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="Login"/>

                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="16dp"
                    android:hint="Password"
                    android:inputType="textPassword"/>

                <Button
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="16dp"
                    android:text="Sign In"
                    android:background="@android:color/holo_orange_light"/>

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

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@drawable/icon_circular_profile"
            android:layout_centerHorizontal="true" />

    </RelativeLayout>
</RelativeLayout>

输出:

图标:我使用了来自 link 的圆形轮廓图标图像

希望对你有帮助~