Android 创建顶部带有半圆的CardView

我非常喜欢设计登录屏幕

类似这样的内容：
我该如何从顶部切割卡片，以填充其顶部的可抽出部分？任何帮助都是很有价值的

---

[来源：

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

创建一个

RelativeLayout

作为

CardView

和

ImageView

将

card\u view:cardElevation=“0dp”

设置为在

CardView上显示
ImageView

在

ImageView

上，为profile

图标设置一个
透明圆形图像

供参考，如果您想为您的

CardView

提升， 将

CardView

立面设置为

card\u 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>

希望这将有助于~
更新Ferdous Ahamed的答案。你需要使你的图像循环

把这个加到你的梯度上

compile 'de.hdodenhof:circleimageview:2.2.0'

然后在xml中

<?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="#f36121">


    <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_blue_dark"/>

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


        <de.hdodenhof.circleimageview.CircleImageView
         xmlns:app="http://schemas.android.com/apk/res-auto"
         android:id="@+id/profile_image"
         android:layout_width="96dp"
         android:layout_height="96dp"
         android:src="@drawable/profile"
         app:civ_border_width="2dp"
         app:civ_border_color="#FF000000"/>

    </RelativeLayout>
</RelativeLayout>

输出


请参阅Github。
就当前Android上的形状和阴影实现而言，此屏幕非常复杂。实际上，使用官方库可能无法正确实现。您必须解决两个问题-如何剪切视图以及如何为该视图提供阴影

支持CardView的阴影是使用某种渐变创建的，只支持一种情况-圆角矩形。棒棒糖的阴影可以采取任何形状，只要形状是凸的-这不是你的情况。据我所知，没有第三方库可以帮助你。你必须使用Rende制作自己的阴影rScript模糊或仅提供带有阴影的背景

可以在顶部剪切圆形。这需要一些自定义绘图/遮罩，但可以使用标准Android库轻松完成。您可以使用Canvas.saveLayer/restore（）+PorterDuff.Mode.CLEAR来完成。大致如下：

Path circle, card;
PorterDuffXfermode xfereMode = new PorterDuffXfermode(PorterDuff.Mode.CLEAR);
Bitmap avatar;

// make a layer to make cutting shapes possible
int saveCount = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);

// draw the card and its content
canvas.drawPath(card, paint);
super.draw(canvas);

// clear the circular shape
paint.setXfermode(xfereMode);
canvas.drawPath(circle, paint);

// composite
canvas.restoreToCount(saveCount);
paint.setXfermode(null);

// draw the avatar
canvas.drawBitmap(avatar, x, y, paint);

这不是一个完整的解决方案，但我希望你能理解。要生成阴影，请添加一个黑色过滤器，用RenderScript模糊它，然后在实际视图下方绘制

这是一项繁重的工作。正确实现可能非常耗时，执行速度也非常慢。即使在现代桌面硬件上，图层合成和每像素操作也非常慢。
没有简单的方法可以做到这一点。您必须自定义实现。我可以通过xml或Java创建该形状吗？您可以提供任何链接以f教程？那真是太好了。布局不错+1@AdityaVyas-Lakhan谢谢：）。仅供参考，如果您的图像本身是带有透明背景的圆形，那么我认为不需要使用
circleimageview
库。但是如果您想显示任何具有圆形形状的图像，那么我们可以使用
circleimageview
。是的，您是对的。但发问者说“我实际上如何从顶部切割卡片”，所以我认为我们可以这样实现。是的，我同意你的解决方案。你的解决方案也是正确的。：）效果很好，但当我试图在对话框视图中实现这一点时，我得到了两层透明背景。有什么解决方法的建议吗？让我试试你的解决方案，我会回到你身边！就按照医生的吩咐！！干得好！Aditya@KARANCHAPANERI很高兴能帮助你。很高兴
Path circle, card;
PorterDuffXfermode xfereMode = new PorterDuffXfermode(PorterDuff.Mode.CLEAR);
Bitmap avatar;

// make a layer to make cutting shapes possible
int saveCount = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);

// draw the card and its content
canvas.drawPath(card, paint);
super.draw(canvas);

// clear the circular shape
paint.setXfermode(xfereMode);
canvas.drawPath(circle, paint);

// composite
canvas.restoreToCount(saveCount);
paint.setXfermode(null);

// draw the avatar
canvas.drawBitmap(avatar, x, y, paint);