Android如何在具有 ImageView 和 TextView 的圆形中创建这样的 View

Question

我想创建一个像我在屏幕截图中发布的这样的 View ，布局为圆形，其中一个 ImageView 具有一些背景颜色，一个 TextView 位于具有白色背景的 ImageView 下方，完整的父 View 应该如图所示为蓝色，我已经尝试但无法得到结果我将在下面发布我的代码，请指导我？我需要的观点是

我用我创建的布局得到这个输出

我的布局代码是

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/parent_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#202230"
    android:orientation="vertical" >

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

        <RelativeLayout
            android:id="@+id/circle_layout"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:background="@drawable/whitecircle" >

            <RelativeLayout
                android:id="@+id/circle_layoutinner"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_above="@+id/rating_viewtv"
                android:layout_alignParentTop="true"
                android:background="@drawable/circletwo"
                android:layout_marginTop="1dp"
                android:layout_centerHorizontal="true" >

                <TextView
                    android:id="@+id/ratingcup_viewtv_fonts"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_centerHorizontal="true"
                    android:layout_centerVertical="true"
                    android:text="M"
                    android:gravity="center"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:textColor="@android:color/holo_purple" />
            </RelativeLayout>

            <View android:id="@+id/seprater_viewtv"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp"
                android:layout_above="@+id/rating_viewtv"
                android:background="#2b2c3a" />

            <TextView
                android:id="@+id/rating_viewtv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true"
                android:layout_marginBottom="3dp"
                android:text="4.5"
                android:textColor="@android:color/holo_purple" />
        </RelativeLayout>


        </LinearLayout>
    </LinearLayout>

</LinearLayout>

and my whitecircle.xml is 
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thicknessRatio="2"
    android:useLevel="false">

    <solid android:color="@color/white" />

</shape>

and my circletwo.xml is
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thicknessRatio="2"
    android:useLevel="false">

    <solid android:color="#ff9546" />

</shape>

Answer 1

更改 circle_layoutinner RelativeLayout 的声明以指定 dp 中的高度而不是 wrap_content 并去掉 marginTop:

<RelativeLayout
    android:id="@+id/circle_layoutinner"
    android:layout_width="match_parent"
    android:layout_height="70dp"
    android:layout_above="@+id/rating_viewtv"
    android:layout_alignParentTop="true"
    android:background="@drawable/circle_inset_drawable"
    android:layout_centerHorizontal="true" >

定义 circle_inset_drawable.xml 以将橙色圆偏移正确的量:

<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/circletwo"
    android:insetTop="20dp"
    android:visible="true" />

insetTop应该是circle_layout的高度减去circle_layoutinner的高度

您可以像这样在代码中设置可绘制对象的颜色。您只需要从您的布局对象开始，然后继续向下挖掘对象，直到找到允许您设置颜色的对象:

RelativeLayout rl = (RelativeLayout)findViewById(R.id.circle_layoutinner);
InsetDrawable id = (InsetDrawable)rl.getBackground();
GradientDrawable gd = (GradientDrawable)id.getDrawable(); // API 19+ only!
gd.setColor(0xffff0000);   // set to red

或者您可以用如下代码创建 InsetDrawable:

RelativeLayout rl = (RelativeLayout)findViewById(R.id.circle_layoutinner);
GradientDrawable gd = (GradientDrawable)getResources().getDrawable( R.drawable.circletwo );
gd.setColor(0xffff0000);   // set to red
int dpInPixels = (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20, getResources().getDisplayMetrics());
InsetDrawable id = new InsetDrawable(gd, 0, dpInPixels, 0, 0);
rl.setBackground(id);