首页 > Android如何实现背景圆角的文字效果?

Android如何实现背景圆角的文字效果?

本人新手,美工的设计图有如图所示的文本效果,黔驴技穷,希望sf的朋友们能指点迷津,谢谢啦


定义一个 drawable ,设置 shape corners,把这个 drawable 设为 background 。或者切.9图,会是更省心的方案。


如果文字长度就像图片上那样你就让设计将背景切给你,你用线性布局实现。如果文字长度不定,可以用drawable或者点九图实现


http://shapes.softartstudio.com/ 在这个网站设计好背景样式,点击GETCODE 保存为xml文件放在drawable文件夹下,设为background


其实,把美工妹子抓来打一顿就好了。


正题:用.9比较简单。。。就是画一个图定义为背景。。


虽然全部用xml也能实现,有点曲线救国。。。
效果如下:

txt_left.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape
            android:shape="rectangle">
            <gradient
                android:angle="0"
                android:startColor="#00f874"
                android:endColor="#2fe9a5"
                android:type="linear" />
            <corners android:radius="20dp"/>

        </shape>
    </item>

    <item android:left="30dp"
        >
        <shape
            android:shape="rectangle">
            <gradient
                android:angle="0"
                android:startColor="#00f874"
                android:endColor="#2fe9a5"
                android:type="linear" />
            <padding
                android:left="15dp"
                android:right="15dp"
                android:top="10dp"
                android:bottom="10dp"/>
        </shape>
    </item>
</layer-list>  

txt_right.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape
            android:shape="rectangle">
            <gradient
                android:angle="0"
                android:startColor="#F00"
                android:endColor="#F55"
                android:type="linear" />
            <corners android:radius="20dp"/>

        </shape>
    </item>
    <item android:right="20dp">
        <shape
            android:shape="rectangle">
            <gradient
                android:angle="0"
                android:startColor="#F00"
                android:endColor="#F55"
                android:type="linear" />
            <padding
                android:left="15dp"
                android:right="15dp"
                android:top="10dp"
                android:bottom="10dp"/>
        </shape>
    </item>
</layer-list>  

TextView布局

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/txt_left"
        android:text="总"
        android:textSize="32sp"
        android:textColor="#FFF"
        android:id="@+id/tv_total_voltage_title" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/txt_right"
        android:text="400v"
        android:textSize="32sp"
        android:textColor="#000"
        android:id="@+id/tv_total_voltage_value"
        android:layout_toEndOf="@+id/tv_total_voltage_title" />

感觉可以用clipDrawable实现


看设计文字长度不会变了,直接要背景图片就行了


canvas.drawRect(Rect,Paint)
用Android自带的画图类就可以解决。

【热门文章】
【热门文章】