在顶部创建一个半圆形的CardView

Question

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

像这样的东西：我如何从顶部切割卡片以填充其上面的抽屉？任何帮助都会很有价值。

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

Answer 1

来自Ferdous Ahamed的答案有点更新。你需要让你的形象循环。

只需将此添加到您的gradle

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>

你需要做的就是使用相同的颜色。在父级背景和imageview中使用相同的颜色作为边框。

app:civ_border_color="#f36121"

OUTPUT

请参阅Github link。

Answer 2

您可以通过以下方式实现几乎相似：

创建一个RelativeLayout作为CardView和ImageView的容器
设置card_view:cardElevation="0dp"在ImageView上显示CardView
在ImageView，为transparent circle image配置Icon。

仅供参考，如果你想要升级你的CardView，设置CardView海拔ascard_view:cardElevation="4dp"并设置ImageView海拔更高asandroid:elevation="8dp"以显示ImageView超过CardView。

这是完全有效的代码。试试这个：

<?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>

OUTPUT：

ICON：我使用过link的圆形图标图像

希望这会有所帮助〜

Answer 3

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

支持CardView的阴影是使用某种渐变创建的，只支持一种情况 - 圆角矩形。只要形状是凸起的，棒棒糖的阴影就可以呈现任何形状 - 这不是你的情况。据我所知，没有第三方图书馆可以帮助你。您必须使用RenderScript模糊制作自己的阴影，或者只提供带阴影的背景。

可以在顶部切出圆形形状。它需要一些自定义绘图/屏蔽，但可以使用标准的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对其进行模糊，然后在实际视图下方绘制。

这是一项繁重的工作。最有可能实现正确且执行速度非常慢。即使在现代桌面硬件上，图层组合和每像素操作也非常慢。

在顶部创建一个半圆形的CardView

问题描述投票：0回答：3

3个回答

最新问题

在顶部创建一个半圆形的CardView

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3