一、前言:
我們?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>