如何在 android 布局中的矩形上创建圆形个人资料图片视图？ [关闭]答案

【问题标题】：How can I create a circle profile picture view over rectangle in android layout? [closed]如何在 android 布局中的矩形上创建圆形个人资料图片视图？ [关闭]
【发布时间】：2017-12-04 07:37:13
【问题描述】：

如何绘制在矩形上有圆形的附加布局。表示圆圈为头像，矩形内为登录信息布局。有人可以推荐一下吗？

【问题讨论】：

到目前为止你有什么尝试？任何代码都会很棒。
请在此处粘贴您的代码

标签： android android-layout android-xml android-framelayout android-designer

【解决方案1】：

试试这个

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

    <View
        android:id="@+id/view"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:background="@color/colorPrimary" />

    <ScrollView
        android:id="@+id/scrolView_account"
        android:layout_width="match_parent"
        android:layout_height="match_parent">


        <RelativeLayout
            android:id="@+id/linear_account"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">


                <android.support.v7.widget.CardView
                    android:id="@+id/cardView_account_details"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="10dp"
                    android:layout_marginRight="10dp"
                    android:layout_marginTop="70dp"
                    app:cardCornerRadius="5dp"
                    app:cardElevation="5dp"
                    app:cardUseCompatPadding="true">


                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="@color/colorAccent"
                        android:orientation="vertical">


                        <LinearLayout
                            android:id="@+id/linear_account_input_details"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="50dp"
                            android:orientation="vertical"
                            android:padding="10dp">

                            <TextView
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:layout_marginTop="20dp"
                                android:gravity="center"
                                android:text="NILU"
                                android:textSize="30sp" />

                            <EditText
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:drawableLeft="@mipmap/ic_launcher_round"
                                android:hint="Enter Email" />

                            <EditText
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:drawableLeft="@mipmap/ic_launcher_round"
                                android:hint="Enter Paasword" />


                            <Button
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"

                                android:background="@drawable/temp"
                                android:text="Login" />

                        </LinearLayout>

                    </LinearLayout>

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

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="This is demo" />

            </LinearLayout>

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

                <de.hdodenhof.circleimageview.CircleImageView
                    android:id="@+id/imageview_account_profile"
                    android:layout_width="150dp"
                    android:layout_height="150dp"
                    android:layout_alignParentTop="true"
                    android:layout_centerHorizontal="true"
                    android:src="@mipmap/ic_launcher_round"
                    app:civ_border_color="@color/colorWhite"
                    app:civ_border_width="2dp" />

            </RelativeLayout>

        </RelativeLayout>


    </ScrollView>


</RelativeLayout>

现在像这样在 res/drawable 文件夹中创建一个@drawable/temp.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <stroke
        android:width="1dp"
        android:color="@color/colorBlue" />
    <solid android:color="@color/colorAccentCompany" />
    <corners android:radius="50dp" />
</shape>

别忘了编译这个依赖

compile 'com.android.support:cardview-v7:26.+'
compile 'de.hdodenhof:circleimageview:2.1.0'

【讨论】：

【解决方案2】：

试试下面的代码

    <?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:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:background="#be464545">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/user_profile_photo"
            android:layout_width="120dp"
            android:layout_height="120dp"
            android:layout_below="@+id/header_cover_image"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="60dp"
            android:background="@drawable/prof"
            android:elevation="5dp"
            android:scaleType="center"
            app:civ_border_color="#FFF"
            app:civ_border_width="5dp"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:layout_marginTop="-60dp"
        android:background="#fff"
        android:elevation="4dp"
        android:orientation="vertical"
        android:padding="20dp">



        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:paddingTop="30dp">

            <android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <EditText
                    android:id="@+id/username"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:drawableLeft="@drawable/ic_mood_black_24dp"
                    android:drawableTint="#f5701e"
                    android:hint="UserName"
                    android:inputType="textEmailAddress"
                    android:singleLine="true"/>
            </android.support.design.widget.TextInputLayout>

            <android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <EditText
                    android:id="@+id/password"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="16dp"
                    android:drawableLeft="@drawable/ic_lock_outline_black_24dp"
                    android:drawableTint="#f5701e"
                    android:hint="Password"
                    android:inputType="textPassword"
                    android:singleLine="true"/>
            </android.support.design.widget.TextInputLayout>

            <Button
                android:id="@+id/btnLogin"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_margin="22dp"
                android:background="#f5701e"
                android:text="Sign In"
                android:textAllCaps="false"
                android:textColor="#fff"
                android:textSize="18sp"/>
        </LinearLayout>

    </RelativeLayout>
    </LinearLayout>
</LinearLayout>

布局

对于 CircleImageView，您必须在应用级 gradle 文件中添加 compile 'de.hdodenhof:circleimageview:2.1.0' 依赖项

【讨论】：

【解决方案3】：

将此添加到具有名称形状的drawable中：

<?xml version="1.0" encoding="UTF-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">

        <stroke android:width="1dp" android:color="#1B5E20" />
        <corners android:radius="50dp"/>
        <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
    </shape>

这是你的布局：

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

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:scaleType="center"
        android:background="@drawable/shape"
        android:src="@drawable/verification_background"/>


    </FrameLayout>
</RelativeLayout>

【讨论】：

【解决方案4】：

最简单的方法。

dependencies: compile 'com.android.support:appcompat-v7:23.1.1'
              compile 'com.android.support:design:23.1.1'
              compile 'com.android.support:cardview-v7:23.1.1'

<android.support.v7.widget.CardView
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:elevation="12dp"
    android:id="@+id/view2"
   app:cardCornerRadius="40dp"
    android:layout_centerHorizontal="true"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thicknessRatio="1.9">
    <ImageView
        android:layout_height="80dp"
        android:layout_width="match_parent"
        android:id="@+id/imageView1"
        android:src="@drawable/YOUR_IMAGE"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true">
    </ImageView>
 </android.support.v7.widget.CardView>

【讨论】：

【解决方案5】：

这里是xml代码，

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

            <com.mylibrary.widgets.CircularImageView
                android:id="@+id/profile_profileimg"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="10dp"
                android:src="@drawable/no_user_image" />

  </RelativeLayout>

【讨论】：