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

2023-12-01

i want to create a view like this i have posted in screen shot, in circle shape of layout with one image view with some background colour and one text view just below the image view with white background and the parent of the complete should be in blue colour as shown in picture, i have tried but not able to get the result I will post my code below, please guide me? my required view is enter image description here

and i am getting this output with the layout i created 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>

更改circle_layoutinnerrelativelayout的声明以指定以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);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

随机推荐