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

可以集合T像這樣代碼中的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

嘗試創建與橙色ñ白色U中的圖像預期。

其設置爲背景，以LL或RL

只需使用的ImageView和TextView的具有適當尺寸，以顯示信息。