Android 实现虚线、圆角、渐变色效果的教程案例

460

小师评

1年前发布

效果图：

1504775773298530

代码实现：
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">
 
 
    <!-- 显示一条虚线    开始 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:layout_marginLeft="50dp"
        android:layout_marginRight="50dp"
        android:layout_marginTop="40dp"
        android:gravity="center"
        android:text="一条虚线"/>
    <View
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:layout_marginLeft="50dp"
        android:layout_marginRight="50dp"
        android:background="@drawable/style1" />
     
     
    <!-- 显示边框虚线    开始 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:layout_marginLeft="50dp"
        android:layout_marginRight="50dp"
        android:layout_marginTop="40dp"
        android:background="@drawable/style2"
        android:gravity="center"
        android:text="边框虚线"/>
    <!-- 显示边框实线    开始 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:layout_marginLeft="50dp"
        android:layout_marginRight="50dp"
        android:layout_marginTop="5dp"
        android:background="@drawable/style3"
        android:gravity="center"
        android:text="边框实线"/>
     
     
    <!-- 显示边框圆角虚线    开始 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:layout_marginLeft="50dp"
        android:layout_marginRight="50dp"
        android:layout_marginTop="40dp"
        android:background="@drawable/style4"
        android:gravity="center"
        android:text="圆角虚线"/>
    <!-- 显示边框圆角实线    开始 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:layout_marginLeft="50dp"
        android:layout_marginRight="50dp"
        android:layout_marginTop="5dp"
        android:background="@drawable/style5"
        android:gravity="center"
        android:text="圆角实线"/>
     
     
    <!-- 显示边框部分圆角1    开始 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:layout_marginLeft="50dp"
        android:layout_marginRight="50dp"
        android:layout_marginTop="40dp"
        android:background="@drawable/style6"
        android:gravity="center"
        android:text="部分圆角1"/>
    <!-- 显示边框部分圆角2    开始 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:layout_marginLeft="50dp"
        android:layout_marginRight="50dp"
        android:layout_marginTop="5dp"
        android:background="@drawable/style7"
        android:gravity="center"
        android:text="部分圆角2"/>
 
     
    <!-- 显示渐变色    开始 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:layout_marginLeft="50dp"
        android:layout_marginRight="50dp"
        android:layout_marginTop="40dp"
        android:background="@drawable/style8"
        android:gravity="center"
        android:text="渐变色"/>
</LinearLayout>

1、一条虚线，设置文件（drawable/style1.xml文件）

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <!--
        显示一条虚线，
        破折线的宽度为dashWith，
        破折线之间的空隙的宽度为dashGap，
        如果dashGap=0dp显示的就是一条实线
    -->
    <stroke
        android:dashGap="3dp"
        android:dashWidth="6dp"
        android:width="1dp"
        android:color="#ec5959" />
    <!-- 虚线的高度 -->
    <size android:height="1dp" />
</shape>

2、边框虚线，设置文件（drawable/style2.xml文件）

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!--
        显示一条虚线，
        破折线的宽度为dashWith，
        破折线之间的空隙的宽度为dashGap，
    -->
    <stroke
        android:dashGap="3dp"
        android:dashWidth="6dp"
        android:width="1dp"
        android:color="#ec5959" />
    <!-- 虚线的高度 -->
    <size android:height="1dp" />
</shape>

3、边框实线，设置文件（drawable/style3.xml文件）

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!--
        显示一条虚线，
        破折线的宽度为dashWith，
        破折线之间的空隙的宽度为dashGap，
    -->
    <stroke
        android:dashGap="0dp"
        android:dashWidth="6dp"
        android:width="1dp"
        android:color="#ec5959" />
    <!-- 虚线的高度 -->
    <size android:height="1dp" />
</shape>

4、圆角虚线，设置文件（drawable/style4.xml文件）

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- 填充颜色 -->
    <solid android:color="#FFFFFF"></solid>
    <!-- 线的宽度，颜色灰色 -->
    <stroke
        android:dashGap="3dp"
        android:dashWidth="6dp"
        android:width="1dp"
        android:color="#ec5959">
    </stroke>
    <!-- 矩形的圆角半径 -->
    <corners android:radius="10dp" />
</shape>

5、圆角实线，设置文件（drawable/style5.xml文件）

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- 填充颜色 -->
    <solid android:color="#FFFFFF"></solid>
    <!-- 线的宽度，颜色灰色 -->
    <stroke
        android:dashGap="0dp"
        android:dashWidth="6dp"
        android:width="1dp"
        android:color="#ec5959">
    </stroke>
    <!-- 矩形的圆角半径 -->
    <corners android:radius="10dp" />
</shape>

6、部分圆角1，设置文件（drawable/style6.xml文件）

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- 填充颜色 -->
    <solid android:color="#FFFFFF"></solid>
    <!-- 线的宽度，颜色灰色 -->
    <stroke
        android:dashGap="0dp"
        android:dashWidth="6dp"
        android:width="1dp"
        android:color="#ec5959">
    </stroke>
    <!--
        矩形的圆角半径
        android:bottomLeftRadius="10dp"
        android:bottomRightRadius="10dp"
    -->
    <corners
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp"/>
</shape>

7、部分圆角2，设置文件（drawable/style7.xml文件）

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- 填充颜色 -->
    <solid android:color="#FFFFFF"></solid>
    <!-- 线的宽度，颜色灰色 -->
    <stroke
        android:dashGap="3dp"
        android:dashWidth="6dp"
        android:width="1dp"
        android:color="#ec5959">
    </stroke>
    <!--
        矩形的圆角半径
        android:bottomLeftRadius="10dp"
        android:bottomRightRadius="10dp"
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp"
    -->
    <corners
        android:bottomLeftRadius="10dp"
        android:bottomRightRadius="10dp"/>
</shape>

8、渐变色，设置文件（drawable/style8.xml文件）

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!--
        shape是用来定义形状的，
        gradient定义该形状里面为渐变色填充，
            startColor起始颜色，
            endColor结束颜色，
        angle表示方向角度。
            当angle=0时，渐变色是从左向右。 然后逆时针方向转，
            当angle=90时为从下往上。
     -->
    <gradient
        android:startColor="#ec5959"
        android:endColor="#FFFFFF"
        android:angle="0"/><!-- 90阴影冲上，－90，阴影冲下-->
    <padding android:left="0dp"
        android:top="0dp"
        android:right="0dp"
        android:bottom="0dp" />
</shape>