如何制作布局，带背景的圆形imageView答案

【问题标题】：how to make layout ,circle imageView with background如何制作布局，带背景的圆形imageView
【发布时间】：2019-12-07 21:39:20
【问题描述】：

我尝试制作像这张图片一样的布局，但我做不到

我尝试像这样在RelativeLayout中添加ImageView，但效果不佳

<RelativeLayout
                android:id="@+id/relative"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/dark_blue">

                <de.hdodenhof.circleimageview.CircleImageView
                    android:id="@+id/circleImageView"
                    android:layout_width="250dp"
                    android:layout_height="150dp"
                    android:layout_centerInParent="true"
                    android:layout_centerHorizontal="true"
                    android:layout_gravity="center"
                    android:layout_marginTop="20dp"
                    android:src="@drawable/ic_default_profile" />

</RelativeLayout>

image I want to make

【问题讨论】：

您可以在<de.hdodenhof.circleimageview.CircleImageView 中使用app:border_width="2dp", app:border_color="#FFF" 和android:elevation="8dp" 并给您预期的结果

标签： android xml android-studio android-layout layout

【解决方案1】：

您可以将样式应用到您的图像视图，如下所示，

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">

<size
    android:height="@dimen/margin_30dp"
    android:width="@dimen/margin_30dp"/>
<solid android:color="@color/red"/>

<corners
    android:bottomRightRadius="10dp"
    android:bottomLeftRadius="10dp"
    android:topLeftRadius="10dp"
    android:topRightRadius="10dp"/>

希望对你有帮助！

【讨论】：

【解决方案2】：

更新： 像这样的：

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

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_centerVertical="true"
        android:layout_marginStart="32dp"
        android:background="@color/color"
        android:gravity="center_vertical"
        android:paddingStart="72dp" />

    <de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:src="@drawable/avatar"
        android:layout_centerInParent="true"
        />


    <ImageView
        android:layout_width="80dp"
        android:layout_height="30dp"
        android:layout_alignParentEnd="true"
        android:layout_centerVertical="true"
        android:background="@color/green"
        android:layout_marginRight="100dp"
         />


    <ImageView
        android:layout_width="80dp"
        android:layout_height="30dp"
        android:layout_centerVertical="true"
        android:background="@color/mdtp_red"
        android:layout_alignParentStart="true"
        android:layout_marginLeft="100dp"
        />

</RelativeLayout>

【讨论】：

我使用线性布局而不是 imageView 工作，但我应该为评级栏做什么？ @Amirhosein
只需在上面添加两个图像视图，一个对齐父左，另一个对齐父右！

【解决方案3】：

要实现此布局，请使用相对布局和圆形 imageview gradle Circle Image view

试试这个代码来创建相同的布局

main_activity.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">

<RelativeLayout
    android:layout_width="300dp"
    android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="#242C5E">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="70dp"
            android:layout_weight=".35"
            android:gravity="center"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Chrish"
                android:textColor="#fff"
                android:textSize="17sp"
                android:textStyle="bold" />

            <RatingBar
                style="?android:attr/ratingBarStyleSmall"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:backgroundTint="#f9cd0c"
                android:max="5"
                android:rating="3"
                android:progressTint="#f9cd0c"
                android:scaleX=".8"
                android:scaleY=".8"
                android:theme="@style/RatingBar"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".3"
            android:gravity="center">

        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="70dp"
            android:layout_weight=".35"
            android:gravity="center"
            android:orientation="vertical">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Chrish"
                android:textColor="#fff"
                android:textSize="17sp"
                android:textStyle="bold" />

            <RatingBar
                style="?android:attr/ratingBarStyleSmall"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:backgroundTint="#f9cd0c"
                android:max="5"
                android:rating="3"
                android:progressTint="#f9cd0c"
                android:scaleX=".8"
                android:scaleY=".8"
                android:theme="@style/RatingBar"/>
        </LinearLayout>
    </LinearLayout>

    <RelativeLayout
        android:layout_width="98dp"
        android:layout_height="98dp"
        android:layout_centerInParent="true"
        android:background="@drawable/circle_bg">

        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/account_user_image"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_centerInParent="true"
            android:src="@drawable/house1" />

    </RelativeLayout>

</RelativeLayout>

Style.xml

 <style name="RatingBar" parent="Theme.AppCompat">
    <item name="colorControlNormal">@color/colorPrimaryGolden</item>
    <item name="colorControlActivated">@color/colorPrimaryGolden</item>
</style>

circle_bg.xml

<?xml version="1.0" encoding="utf-8"?>
 <shape android:shape="oval"
  xmlns:android="http://schemas.android.com/apk/res/android">
  <stroke
   android:color="#fff"
  android:width="10dp"/>
   </shape>

看截图

【讨论】：