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

Question

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

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

我的布局代码是

    <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

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

将其设置为 LL 或 RL 的背景

只需使用具有适当尺寸的 ImageView 和 Textview 来显示信息。

Answer 2

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

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

Android how to create view like this in Circular shape having imageview and text view

android

xml

android-layout