Android如何在具有图像视图和文本视图的圆形中创建这样的视图

Question

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

我正在使用我创建的布局获得此输出

我的布局代码是

    <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);

Answer 2

尝试用你期望的橙色和白色创建图像。

将其设置为 LL 或 RL 的背景

只需使用适当尺寸的 ImageView 和 Textview 即可显示信息。