创建一个顶部为半圆的CardView [英] Create a CardView with a semicircle on top

问题描述

我非常想设计一个登录屏幕.

I am very much into designing a login screen.

类似这样的东西:
我实际上如何从顶部切开卡片，以便在卡片上方填充可绘制对象?任何帮助都将具有巨大的价值.

Something like this:
How Do I actually cut the card from the top so as to fill the drawable on top of it? Any help would be of great value.

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

推荐答案

从Ferdous Ahamed的答案中得到了一些更新.您需要使图像循环显示.

A bit update from Ferdous Ahamed's answer. you need to make your image circular.

只需将其添加到您的gradle中

just add this to your 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中，边框使用相同的颜色.

all you need to do is use same color. in your parent background and in your imageview use same color for border.

app:civ_border_color="#f36121"

输出

请参阅Github 链接.

Refer Github link.

这篇关于创建一个顶部为半圆的CardView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！