Android TextView 自定義布局

一、前言:

我們?cè)诠ぷ髦薪?jīng)常遇到自定義背景,下面我就 以 TextView 舉例浪耘,寫(xiě)幾個(gè)常見(jiàn)的Text 常見(jiàn)的背景谤祖。比如:自定義圓角邊框咳促,自定義圓角背景漸變色,自定義下邊框,自定義右邊框,自定義字體背景脱篙。

gitHub 地址:

效果圖如下:

效果圖.png

二娇钱、使用:

1. box_blue.xml 自定義布局

第1個(gè)自定義圓角邊框

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="10dp" />
    <!-- 實(shí)心 -->
    <solid android:color="@color/white" />
    <!-- 邊框 -->
    <stroke
        android:width="1dp"
        android:color="@color/btn_press_bg_color" />
    <!-- 邊距 -->
    <padding
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp" />
</shape>

效果:


image.png

2. gradual_box.xml 自定義布局

第2個(gè)自定義圓角背景漸變色

<?xml version="1.0" encoding="utf-8"?>
<!--為T(mén)extView加邊框。須要在drawable建xml文件绊困,里面設(shè)置shape來(lái)設(shè)置文本框的特殊效果文搂。-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- 圓角 -->
    <corners android:radius="10dp" />
    <!-- 實(shí)心 -->
    <solid android:color="#ffffffff" />
    <!-- 邊框 -->
    <stroke
        android:width="1dp"
        android:color="#FF4081" />

    <!-- 邊距 -->
    <padding
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp" />

    <!-- 漸變 -->
    <gradient
        android:angle="270"
        android:endColor="#FFF782"
        android:startColor="#FF13C7AF" />
</shape>

效果:

image.png

基本上經(jīng)常使用的就這幾種,要達(dá)到非常好的效果秤朗,須要仔細(xì)地調(diào)整煤蹭。
以下是要在用到這個(gè)shape的TextView設(shè)置背景就可以。

3. line_blue_bottom.xml 自定義布局

第3個(gè)自定義下邊框

<?xml version="1.0" encoding="utf-8"?>

<!--這是兩層布局嵌套取视,可以隨意定義任何一邊-->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 主布局 -->
<item>
    <shape>
        <!-- 實(shí)心 -->
        <solid android:color="@color/btn_press_bg_color" />
    </shape>
</item>
<!-- 第二層布局硝皂,相對(duì)于主布局提升 1dp -->
<!-- 相對(duì)于主布局,距離底部 1dp 的距離 -->
<item android:bottom="@dimen/dp_1">
    <shape>
        <!-- 實(shí)心 -->
        <solid android:color="@color/white" />
    </shape>
</item>
</layer-list>

效果:


image.png

4. line_blue_right.xml 自定義布局

第4個(gè)自定義右邊框

<?xml version="1.0" encoding="utf-8"?>

<!--這是兩層布局嵌套作谭,可以隨意定義任何一邊-->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 主布局 -->
<item>
    <shape>
        <solid android:color="@color/btn_press_bg_color" />
    </shape>
</item>
<!-- 第二層布局吧彪,相對(duì)于主布局提升 1dp -->
<item android:right="@dimen/dp_1">
    <shape>
        <solid android:color="@color/white" />
    </shape>
</item>
</layer-list>

效果:


image.png

5. entity_red.xml 自定義布局

第5個(gè)自定義字體背景

<!--這是兩層布局嵌套,可以隨意定義任何一邊-->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 主布局 -->
    <item>
        <shape>
            <!-- 實(shí)心 -->
            <solid android:color="@color/white" />
        </shape>
    </item>
    <!-- 第二層布局 -->
    <!-- 相對(duì)于主布局距離頭部 10dp -->
    <!-- 相對(duì)于主布局距離底部 10dp -->
    <item
        android:bottom="@dimen/dp_8"
        android:top="@dimen/dp_8">
        <shape>
            <!-- 實(shí)心 -->
            <solid android:color="@color/color_ffe04f5d" />
        </shape>
    </item>
</layer-list>

效果:

image.png

5. activity_three.xml 布局調(diào)用

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:orientation="horizontal"

        >
        <TextView
            android:id="@+id/tv_text1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="方框:"
            android:textSize="@dimen/dp_20"
            android:layout_gravity="center_vertical"
            />


        <TextView
            android:layout_marginLeft="@dimen/dp_20"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="@drawable/box_blue"
            android:layout_gravity="center_vertical"
            android:text="0"
            android:textSize="@dimen/dp_20"
            android:gravity="center"
            />
    </LinearLayout>



    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:orientation="horizontal"

        >
        <TextView
            android:id="@+id/tv_text5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="漸變的方框:"
            android:textSize="@dimen/dp_20"
            android:layout_gravity="center_vertical"
            />


        <TextView
            android:layout_marginLeft="@dimen/dp_20"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="@drawable/gradual_box"
            android:layout_gravity="center_vertical"
            android:text="0"
            android:textSize="@dimen/dp_20"
            android:gravity="center"
            />
    </LinearLayout>



    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:orientation="horizontal"

        >
        <TextView
            android:id="@+id/tv_text2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="下方框:"
            android:textSize="@dimen/dp_20"
            android:layout_gravity="center_vertical"
            />


        <TextView
            android:layout_marginLeft="@dimen/dp_20"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="@drawable/line_blue_bottom"
            android:layout_gravity="center_vertical"
            android:text="0"
            android:textSize="@dimen/dp_20"
            android:gravity="center"
            />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:orientation="horizontal"

        >
        <TextView
            android:id="@+id/tv_text3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="右方框:"
            android:textSize="@dimen/dp_20"
            android:layout_gravity="center_vertical"
            />


        <TextView
            android:layout_marginLeft="@dimen/dp_20"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="@drawable/line_blue_right"
            android:layout_gravity="center_vertical"
            android:text="0"
            android:textSize="@dimen/dp_20"
            android:gravity="center"
            />
    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:orientation="horizontal"

        >
        <TextView
            android:id="@+id/tv_text4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="字體背景:"
            android:textSize="@dimen/dp_20"
            android:layout_gravity="center_vertical"
            />


        <TextView
            android:layout_marginLeft="@dimen/dp_8"
            android:layout_width="wrap_content"
            android:layout_height="30dp"
            android:background="@drawable/entity_red"
            android:layout_gravity="center_vertical"
            android:text="我的心略大于宇宙丢早!"
            android:textSize="@dimen/dp_20"
            android:gravity="center"
            />
    </LinearLayout>
</LinearLayout>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市秧倾,隨后出現(xiàn)的幾起案子怨酝,更是在濱河造成了極大的恐慌,老刑警劉巖那先,帶你破解...
    沈念sama閱讀 222,183評(píng)論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件农猬,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡售淡,警方通過(guò)查閱死者的電腦和手機(jī)斤葱,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,850評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)揖闸,“玉大人揍堕,你說(shuō)我怎么就攤上這事√乐剑” “怎么了衩茸?”我有些...
    開(kāi)封第一講書(shū)人閱讀 168,766評(píng)論 0 361
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)贮泞。 經(jīng)常有香客問(wèn)我楞慈,道長(zhǎng),這世上最難降的妖魔是什么啃擦? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,854評(píng)論 1 299
  • 正文 為了忘掉前任囊蓝,我火速辦了婚禮,結(jié)果婚禮上令蛉,老公的妹妹穿的比我還像新娘聚霜。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,871評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布俯萎。 她就那樣靜靜地躺著傲宜,像睡著了一般。 火紅的嫁衣襯著肌膚如雪夫啊。 梳的紋絲不亂的頭發(fā)上函卒,一...
    開(kāi)封第一講書(shū)人閱讀 52,457評(píng)論 1 311
  • 那天,我揣著相機(jī)與錄音撇眯,去河邊找鬼报嵌。 笑死,一個(gè)胖子當(dāng)著我的面吹牛熊榛,可吹牛的內(nèi)容都是我干的锚国。 我是一名探鬼主播,決...
    沈念sama閱讀 40,999評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼玄坦,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼血筑!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起煎楣,我...
    開(kāi)封第一講書(shū)人閱讀 39,914評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤豺总,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后择懂,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體喻喳,經(jīng)...
    沈念sama閱讀 46,465評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,543評(píng)論 3 342
  • 正文 我和宋清朗相戀三年困曙,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了表伦。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,675評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡慷丽,死狀恐怖蹦哼,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情要糊,我是刑警寧澤翔怎,帶...
    沈念sama閱讀 36,354評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站杨耙,受9級(jí)特大地震影響赤套,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜珊膜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,029評(píng)論 3 335
  • 文/蒙蒙 一容握、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧车柠,春花似錦剔氏、人聲如沸塑猖。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,514評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)羊苟。三九已至,卻和暖如春感憾,著一層夾襖步出監(jiān)牢的瞬間蜡励,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,616評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工阻桅, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留凉倚,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,091評(píng)論 3 378
  • 正文 我出身青樓嫂沉,卻偏偏與公主長(zhǎng)得像稽寒,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子趟章,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,685評(píng)論 2 360

推薦閱讀更多精彩內(nèi)容

  • 1杏糙、屬性選擇器:id選擇器 # 通過(guò)id 來(lái)選擇類(lèi)名選擇器 . 通過(guò)類(lèi)名來(lái)選擇屬性選擇器 ...
    Yuann閱讀 1,637評(píng)論 0 7
  • 一、CSS入門(mén) 1蚓土、css選擇器 選擇器的作用是“用于確定(選定)要進(jìn)行樣式設(shè)定的標(biāo)簽(元素)”宏侍。 有若干種形式的...
    寵辱不驚丶?xì)q月靜好閱讀 1,600評(píng)論 0 6
  • CSS參考手冊(cè) 一、初識(shí)CSS3 1.1 CSS是什么 CSS3在CSS2.1的基礎(chǔ)上增加了很多強(qiáng)大的新功能北戏。目前...
    沒(méi)汁帥閱讀 3,595評(píng)論 1 13
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類(lèi)選擇器 屬性選擇器 繼承屬性: color,font漫蛔,text-align嗜愈,li...
    love2013閱讀 2,316評(píng)論 0 11
  • Swift1> Swift和OC的區(qū)別1.1> Swift沒(méi)有地址/指針的概念1.2> 泛型1.3> 類(lèi)型嚴(yán)謹(jǐn) 對(duì)...
    cosWriter閱讀 11,113評(píng)論 1 32