android 在右上角添加三角形图标并在图标内显示文字

项目一新模块有个右边图标在右上角显示的图标，如图

思索了下用shape画一个背景，放在右上角，画出来字好像放上去显示有问题，就google了下，找到了篇资料。

在Android右上角的RelativeLayout上绘制三角形

原理是使用 Drawable 画出一个正方形，然后将其旋转 45 度，使其达到三角形的效果。

方案是，使用 View 单独显示三角形背景，然后再使用 TextView 单独显示文字。这样做的好处就是可以随意的调整文字的相对位置以及三角形的大小。最终效果详见上图。 

代码如下：在 drawable 文件夹下新建 triangle_shape.xml 文件，用以显示三角形图标。

<?xml version="1.0" encoding="utf-8"?>  
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >  
    <item>  
        <rotate  
            android:fromDegrees="-45"  
            android:toDegrees="45"  
            android:pivotX="0%"  
            android:pivotY="-45%" >  
            <shape android:shape="rectangle" >  
                <!-- Border -->  
                <stroke  
                    android:width="10dp"  
                    android:color="@color/red" />  
                <!-- Background -->  
                <solid android:color="@color/red" />  
            </shape>  
        </rotate>  
    </item>  
</layer-list> 

在自己的 Layout 中，使用 triangle_shape.xml 作为背景，并添加三角形内需要显示的文字。 
核心代码如下： 

 <FrameLayout  
                android:id="@+id/onAirLayout"  
                android:visibility="gone"  
                android:layout_width="wrap_content"  
                android:layout_height="wrap_content"  
                android:layout_alignEnd="@+id/thumbnail"  
                android:layout_alignParentTop="true"  
                android:layout_alignRight="@+id/thumbnail">  
  
                <!-- Attention Please -->  
                <!--layout_width must be equal to layout_height and its value plus layout_marginBottom must be equal 85-->  
                <!--PS: 85 is the height of placeholder image-->  
                <View  
                    android:layout_width="115dp"  
                    android:layout_height="115dp"  
                    android:layout_gravity="top|right|end"  
                    android:layout_marginBottom="-30dp"  
                    android:background="@drawable/triangle_shape"  
                    android:rotation="0" />  
  
                <TextView  
                    android:id="@+id/txtOnAir"  
                    android:layout_width="wrap_content"  
                    android:layout_height="wrap_content"  
                    android:layout_gravity="right|end"  
                    android:layout_marginTop="12dp"  
                    android:rotation="45"  
                    android:text="@string/cmn_on_air"  
                    android:textColor="@android:color/white"  
                    android:textSize="14sp" />  
            </FrameLayout>  

完整代码如下： 

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">

    <!--大师勋章-->
    <RelativeLayout
        android:id="@+id/re_master_medal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/btn_click_back_color">

        <ImageView
            android:id="@+id/img_integral_shop"
            android:layout_width="48dp"
            android:layout_height="66dp"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:src="@mipmap/stair" />

        <TextView
            android:id="@+id/tv_intro"
            style="@style/index_layout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/img_integral_shop"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="5dp"
            android:background="@drawable/shape_both_green"
            android:gravity="center"
            android:paddingBottom="5dp"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:paddingTop="5dp"
            android:text="@string/stair"
            android:textColor="@color/bgcolor" />

        <TextView
            style="@style/help_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/tv_intro"
            android:layout_marginTop="5dp"
            android:gravity="center"
            android:text="@string/note"
            android:textColor="@color/gray_66" />

        <FrameLayout
            android:id="@+id/onAirLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true">

            <!-- Attention Please -->
            <!--layout_width must be equal to layout_height and its value plus layout_marginBottom must be equal 85-->
            <!--PS: 85 is the height of placeholder image-->
            <View
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:layout_gravity="top|right|end"
                android:layout_marginBottom="-30dp"
                android:background="@drawable/triangle_style"
                android:rotation="0" />

            <TextView
                android:id="@+id/txtOnAir"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="right|end"
                android:layout_marginTop="8dp"
                android:gravity="center"
                android:rotation="45"
                android:text="实物"
                android:textColor="@android:color/white"
                android:textSize="12sp" />
        </FrameLayout>
    </RelativeLayout>

</layout>