美文网首页
Android开罐头——ShapeDrawable全面解析

Android开罐头——ShapeDrawable全面解析

作者: youyuge | 来源:发表于2017-06-01 11:48 被阅读0次

    Drawable种类繁多,ShapeDrawable 是一种很常见的Drawable,可以理解为通过颜色来构造的图形,它既可以是纯色的图形,也可以是具有渐变效果的图形。

    一、ShapeDrawable语法

    ShapeDrawable语法稍显复杂,如下所示:

    <?xml version="1.0" encoding="utf-8"?>
    <shape
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape=["rectangle" | "oval" | "line" | "ring"] >
        <corners
            android:radius="integer"
            android:topLeftRadius="integer"
            android:topRightRadius="integer"
            android:bottomLeftRadius="integer"
            android:bottomRightRadius="integer" />
        <gradient
            android:angle="integer"
            android:centerX="integer"
            android:centerY="integer"
            android:centerColor="integer"
            android:endColor="color"
            android:gradientRadius="integer"
            android:startColor="color"
            android:type=["linear" | "radial" | "sweep"]
            android:useLevel=["true" | "false"] />
        <padding
            android:left="integer"
            android:top="integer"
            android:right="integer"
            android:bottom="integer" />
        <size
            android:width="integer"
            android:height="integer" />
        <solid
            android:color="color" />
        <stroke
            android:width="integer"
            android:color="color"
            android:dashWidth="integer"
            android:dashGap="integer" />
    </shape>
    

    需要注意的是<shape>标签创建的Drawable,其实体类实际上是GradientDrawable,下面分别介绍各个属性的含义。

    二、各属性含义

    • android:shape

    根元素shape表示图形的形状,有四个选项:

    • rectangle 矩形
    • oval 椭圆
    • line 横线
    • ring 圆环

    另外四个当中,line 和 ring 一定需要通过<stroke>标签来指定线的宽和和颜色信息等。

    • <corners>

    表示shape图形四个交的角度,即四个角的圆角程度。单位是px,只适用于矩形shape

    android:radius优先级较低,会被其他四个属性覆盖。属性含义望文生义即可。注意:每个圆角半径值都必须大于1,否侧就没有圆角。

    • <solid>

    表示纯色填充,利用 android:color 就可以指定shape的颜色。

    • <gradient>

    渐变效果,和<solid>标签互斥。

    gradient标签属性 作用
    android:angle 渐变的角度,默认是0,其值必须是45的整数倍。0表示从左边到右,90表示从上到下。具体效果随着角度的调整而产生变化,角度影响渐变方向。
    android:centerX 渐变中心的横坐标点
    android:centerY 渐变中心的纵坐标点
    android:startColor 渐变色的起始色
    android:centerColor 渐变色的中间色
    android:endColor 渐变色的结束色
    android:type 渐变的类型,分3种,linear(线性渐变),radio(径向渐变),sweep(扫描线渐变),默认值是 线性渐变 。
    android:gradientRadius 渐变的半径(仅当 android:type 为radio时有效)
    android:useLevel 一般为false,当Drawable作为StateListDrawable时有效。
    • <stroke>

    Shape的描边,有如下几个属性:

    stroke标签属性 作用
    android:width 描边的宽度,越大则shape的边缘线越粗
    android:color 描边的颜色
    android:dashWidth 虚线的宽度
    android:dashGap 虚线的空隙的间隔

    注:如果 android:dashWidth 和 android:dashGap 两者有任意一个为0,那么虚线效果就无法显示。

    • <padding>

    不是shape的空白,而是包含它的View的空白

    • <size>

    shape没有宽/高的概念,总结来说,标签设置的宽高就是ShapeDrawable的固有宽高(这时调用getIntrinsicWidth获得的就不是-1了),但是作为View的背景时,它还是会拉伸或缩小自适应View的大小。

    三、示例代码

    3.1 搜索框渐变背景:

    xml代码:

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
    
       <gradient
            android:angle="90"
            android:startColor="@color/color_fed952"
            android:endColor="#ff9b00"
            />
    
    </shape>
    

    实际效果:

    渐变实际效果.png

    3.2 搜索框文字背景:

    xml代码:

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
           android:shape="rectangle"
    >
        <corners android:radius="6dp"/>
        <solid android:color="@color/white"/>
    </shape>
    

    其实就是个editText的背景是白色的圆角矩形,配合上渐变背景,最后搜索框整体效果图:

    整体效果图.png

    3.3 搜索框布局文件代码

    xml代码:

    <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/bg_home_search"
            android:padding="8dp"
        >
        <TextView
                android:id="@+id/qrcode_view"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:background="@drawable/bar_code_scan_icon"
            />
    
       <TextView
                android:id="@+id/category_view"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:background="@drawable/category"
           />
            <TextView
                android:id="@+id/search_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_toLeftOf="@id/category_view"
                android:layout_toRightOf="@id/qrcode_view"
                android:background="@drawable/bg_home_edittext"
                android:gravity="center"
                android:padding="6dp"
                android:text="@string/home_edittext_hint"
                android:textColor="@color/color_cdcdcd"
                android:textSize="16sp"
            />
        </RelativeLayout>
    

    相关文章

      网友评论

          本文标题:Android开罐头——ShapeDrawable全面解析

          本文链接:https://www.haomeiwen.com/subject/oxwsfxtx.html