一、前言:
我们在工作中经常遇到自定义背景,下面我就 以 TextView 举例,写几个常见的Text 常见的背景。比如:自定义圆角边框,自定义圆角背景渐变色,自定义下边框,自定义右边框,自定义字体背景。
gitHub 地址:
效果图如下:
效果图.png
二、使用:
1. box_blue.xml 自定义布局
第1个自定义圆角边框
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="10dp" />
<!-- 实心 -->
<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个自定义圆角背景渐变色
<?xml version="1.0" encoding="utf-8"?>
<!--为TextView加边框。须要在drawable建xml文件,里面设置shape来设置文本框的特殊效果。-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- 圆角 -->
<corners android:radius="10dp" />
<!-- 实心 -->
<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
基本上经常使用的就这几种,要达到非常好的效果,须要仔细地调整。
以下是要在用到这个shape的TextView设置背景就可以。
3. line_blue_bottom.xml 自定义布局
第3个自定义下边框
<?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>
<!-- 第二层布局,相对于主布局提升 1dp -->
<!-- 相对于主布局,距离底部 1dp 的距离 -->
<item android:bottom="@dimen/dp_1">
<shape>
<!-- 实心 -->
<solid android:color="@color/white" />
</shape>
</item>
</layer-list>
效果:
image.png
4. line_blue_right.xml 自定义布局
第4个自定义右边框
<?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>
<!-- 第二层布局,相对于主布局提升 1dp -->
<item android:right="@dimen/dp_1">
<shape>
<solid android:color="@color/white" />
</shape>
</item>
</layer-list>
效果:
image.png
5. entity_red.xml 自定义布局
第5个自定义字体背景
<!--这是两层布局嵌套,可以随意定义任何一边-->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 主布局 -->
<item>
<shape>
<!-- 实心 -->
<solid android:color="@color/white" />
</shape>
</item>
<!-- 第二层布局 -->
<!-- 相对于主布局距离头部 10dp -->
<!-- 相对于主布局距离底部 10dp -->
<item
android:bottom="@dimen/dp_8"
android:top="@dimen/dp_8">
<shape>
<!-- 实心 -->
<solid android:color="@color/color_ffe04f5d" />
</shape>
</item>
</layer-list>
效果:
image.png
5. activity_three.xml 布局调用
<?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>