Question

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

我正在使用我创建的布局获取此输出 enter image description here

我的布局代码是

    <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的高度

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

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即可显示信息。

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

2 个答案: