Android TextView 自定义布局

一、前言:

我们在工作中经常遇到自定义背景,下面我就 以 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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 5,556评论 0 7
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 5,539评论 0 6
  • CSS参考手册 一、初识CSS3 1.1 CSS是什么 CSS3在CSS2.1的基础上增加了很多强大的新功能。目前...
    没汁帅阅读 9,337评论 1 13
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 6,818评论 0 11
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 13,793评论 1 32