android:shape标签代码

时间 2019-11-25

标签 android shape 标签代码栏目 Android 繁體版

原文原文链接

前言：就好比咱们想给界面跳转的button在界面的边角处用个箭头来代替按钮，使得界面简洁；或者是给TextView加个边框时；android

　　咱们能够经过在drawable文件夹下建立自定义的xml文件，经过shape标签来绘制须要的图案，而后做为组件的背景呈现。git

一、在介绍shape以前，先来对drawable粗糙了解一下。github

　　以下所示，drawable文件夹主要是一系列用来显示的视觉元素，包括位图、背景渐变等；经常使用来做为组件的背景使用。spa

　　drawable文件夹下能够存放图片，而后直接做为背景调用；但更多的是在该文件夹下建立xml文件，而后做为背景调用；code

　　1.一、而drawable夹下的xml文件的类型也有许多种，xml

　　　　好比selector标签，layer-list标签，shape标签、bitmap标签等；而且还能够在一种标签里嵌套另外一种标签使用。blog

　　　　本文主要是对其中的shape标签进行总结。可是shape标签用着用着就搭配上其余标签了，可是本文仍是只介绍shape标签。图片

二、以下所示是关于shape标签的知识导图。utf-8

三、结合以上思惟导图的知识点，附上使用代码。get

　　四个<shape属性/>分别建立了一个xml文件。

　　其中<shape子标签corners、solid、stroke/>主要在rectangle.xml进行举例，<shape子标签gradient、size、padding/>主要在shape_gradient_linear.xml中进行举例。

　　而后<子标签gradient/>由于有三种经常使用渐变方式，因此又单独加了xml举例。

　　顺带着在oval.xml中使用到了layerlist和bitmap制做背景。

　　3.一、rectangle.xml：包含子标签corners、solid、stroke。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape android:shape="rectangle">
            <corners android:radius="10dp" />
            <gradient
                android:type="sweep"
                android:centerX="1"
                android:centerY="0.5"
                android:startColor="@color/colorMediumPurple"
                android:endColor="@color/colorKhaki1"/>
            <stroke
                android:width="2dp"
                android:color="@color/colorMediumPurple"/>
        </shape>
    </item>

    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <corners android:radius="10dp" />
            <solid android:color="@color/colorThistle" />
            <stroke
            android:width="5dp"
            android:dashWidth="10dp"
            android:dashGap="10dp"
            android:color="@color/colorMediumPurple"/>
        </shape>
    </item>
</selector>
<!--使用selector状态选择器，能够设置button点击先后的不一样shape-->

　　　　3.二、line.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <stroke
        android:width="8dp"
        android:color="@color/colorTomato2"/>
    <size
        android:height="10dp"
        android:width="300dp"/>
</shape>
<!-- stroke的width描述stroke的宽度，size的height描述shape的宽度；
     由于stroke属于shape内的标签，因此stroke的宽度要小于shape的高度 -->
<!--size和组件长宽不一样时，显示数值大的-->

　　3.三、ring.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadius="15dp"
    android:thickness="10dp"
    android:useLevel="false">

    <gradient
        android:type="sweep"
        android:startColor="@color/colorAccent"
        android:endColor="@color/colorWhite" />
</shape>
<!--shape是环形的，因此子标签的属性描述的是环形，而不是环心的空心部分-->
<!--须要定义内环半径innerRadius和内环厚度thickness-->
<!--至于属性innerRadiusRatio和thicknessRatio的比例不知道怎么计算-->
<!--useLevel属性是必要属性，否则不显示，不知道为何-->

　　3.四、oval.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="@color/colorgreen"/>
        </shape>
    </item>
    <item>
        <bitmap
            android:src="@drawable/pic"/>
    </item>
</layer-list>

<!--layer-list是经过层叠来自定义按钮，最早写的是最底层。-->

四、主要是演示子标签gradient的三种渐变方式。

　　4.一、shape_gradient_linear.xml 。包含子标签gradient、size、padding。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <gradient
                android:type="linear"
                android:angle="270"
                android:startColor="@color/darkGrey"
                android:endColor="@color/colorRosyBrown1" />
            <size
                android:width="50dp"
                android:height="50dp"/>
            <padding
                android:top="15dp"/>
        </shape>
    </item>
    <!--线性gradient，angle属性只有线性渐变能用-->
</selector>
    <!--总结：gradient标签使用的三步骤能够归纳为先肯定type，而后肯定位置，最后肯定颜色-->
    <!--总结：angle是linear的特有属性，gradientRadius是radial的必要属性-->

　　4.二、shape_gradient_raidial.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:type="radial"
        android:gradientRadius="50dp"
        android:centerX="0.5"
        android:centerY="0.5"
        android:startColor="@color/colorRosyBrown1"
        android:endColor="@color/colorgreen" />
    <size
        android:width="50dp"
        android:height="50dp"/>
    <!--gradientRadius属性是反射性渐变的半径，是必要属性-->
</shape>

　　4.三、shape_gradient_sweep.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <gradient
        android:type="sweep"
        android:centerX="0.5"
        android:centerY="0.5"
        android:startColor="@color/colorLightBlue"
        android:endColor="@color/colorRosyBrown1" />
    <size android:width="50dp"
        android:height="50dp"/>
    <!--扫描gradient，先肯定类型，而后肯定扫描中心点，而后肯定颜色-->
</shape>

　　4.四、activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background"
    tools:context=".MainActivity">
    <TextView
        android:id="@+id/line_name"
        android:text="line"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true"/>
    <LinearLayout
        android:id="@+id/line_view"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:orientation="vertical"
        android:layout_below="@id/line_name"
        android:background="@drawable/line">
    </LinearLayout>

    <TextView
        android:id="@+id/btns_name"
        android:text="ring、oval、rectangle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/line_view"
        android:gravity="center"/>
    <LinearLayout
        android:id="@+id/btns_shape"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/btns_name"
        android:orientation="horizontal"
        android:gravity="center">
        <Button
            android:id="@+id/btn_ring"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_margin="10dp"
            android:background="@drawable/ring" />
        <Button
            android:id="@+id/btn_oval"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_margin="10dp"
            android:background="@drawable/oval" />
        <Button
            android:id="@+id/btn_rectangle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:background="@drawable/rectangle"/>
    </LinearLayout>

    <TextView
        android:id="@+id/gradient_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/btns_shape"
        android:layout_marginTop="80dp"
        android:text="gradient"
        android:gravity="center"/>
    <TextView
        android:id="@+id/gradients_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/gradient_name"
        android:text="linear、radial、sweep"
        android:gravity="center"/>
    <LinearLayout
        android:id="@+id/gradient_btns"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_below="@id/gradients_name"
        android:orientation="horizontal"
        android:gravity="center">
        <Button
            android:id="@+id/btn4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:text="padding"
            android:textColor="@color/colorWhite"
            android:background="@drawable/shape_gradient_linear"/>
        <Button
            android:id="@+id/btn5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:background="@drawable/shape_gradient_radial"/>
        <Button
            android:id="@+id/btn6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:background="@drawable/shape_gradient_sweep"/>
    </LinearLayout>

</RelativeLayout>

五、最后，附上效果图，源码地址https://github.com/caesura-k/button_activity