Android ShapeDrawable

ShapeDrawable 是绘制形状的 Drawable ,定义了基本的几何图形,如(矩形,圆形,线条等)

ShapeDrawable 根元素是 <shape />

ShapeDrawable 节点

  1. <shape>

    属性 说明
    android:visible 设置是否可见
    android:shape 形状,可选:
    rectangle(矩形,包括正方形)
    oval(椭圆,包括圆)
    line(线段)
    ring(环形)
    android:innerRadiusRatio 当 shape 为 ring 才有效,表示环内半径所占半径的比率,如果设置了 innerRadius, 则会被忽略
    android:innerRadius 当 shape 为 ring 才有效,表示环的内半径的尺寸
    android:thicknessRatio 当 shape为 ring 才有效,表环厚度占半径的比率
    android:thickness 当 shape 为 ring 才有效,表示环的厚度,即外半径与内半径的差
    android:useLevel 当 shape 为 ring 才有效,表示是否允许根据level来显示环的一部分
  2. <size>

    属性 说明
    android:width 图形形状宽度
    android:height 图形形状高度
  3. <gradient>

    属性 说明
    android:startColor 渐变的起始颜色
    android:centerColor 渐变的中间颜色
    android:endColor 渐变的结束颜色
    android:type 渐变类型,可选( linear , radial , sweep ), 线性渐变 (可设置渐变角度),发散渐变(中间向四周发散),平铺渐变
    android:centerX 渐变中间颜色的x坐标,取值范围为:0~1
    android:centerY 渐变中间颜色的Y坐标,取值范围为:0~1
    android:angle 只有linear类型的渐变才有效,表示渐变角度,必须为45的倍数哦
    android:gradientRadius 只有radial和sweep类型的渐变才有效,radial 必须设置,表示渐变效果的半径
    android:useLevel 判断是否根据level绘制渐变效果
  4. <solid>

    属性 说明
    android:color 背景填充色,设置 solid 后会覆盖 gradient 设置的所有效果
  5. <stroke>

    属性 说明
    android:width 边框的宽度
    android:color 边框的颜色
    android:dashWidth 边框虚线段的长度
    android:dashGap 边框的虚线段的间距
  6. <conner>

    属性 说明
    android:radius 圆角半径,适用于上下左右四个角
    android:topLeftRadius
    android:topRightRadius
    android:BottomLeftRadius
    android:tBottomRightRadius
    依次是左上,右上,左下,右下的圆角值,按自己需要设置!
  7. <padding>

    属性 说明
    android:left
    android:top
    android:right
    android:bottm
    依次是左上右下方向上的边距

范例

绘制文本框 TextView 的背景

  1. 创建一个 空的 Android 项目 cn.twle.android.ShapeDrawable

  2. 创建一个 ShapeDrawable 资源

    res/drawable/shape_rect.xml

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" >
    
        <!-- 设置一个黑色边框 -->
        <stroke android:width="2px" android:color="#000000"/>
        <!-- 渐变 -->
        <gradient
            android:angle="270"
            android:endColor="#C0C0C0"
            android:startColor="#FCD209" />
        <!-- 设置一下边距,让空间大一点 -->
        <padding
            android:left="5dp"
            android:top="5dp"
            android:right="5dp"
            android:bottom="5dp"/>
    
    </shape>
    

    res/drawable/shape_round.xml

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
    
        <!-- 设置透明背景色 -->
        <solid android:color="#87CEEB" />
    
        <!-- 设置一个黑色边框 -->
        <stroke
            android:width="2px"
            android:color="#000000" />
        <!-- 设置四个圆角的半径 -->
        <corners
            android:bottomLeftRadius="10px"
            android:bottomRightRadius="10px"
            android:topLeftRadius="10px"
            android:topRightRadius="10px" />
        <!-- 设置一下边距,让空间大一点 -->
        <padding
            android:bottom="5dp"
            android:left="5dp"
            android:right="5dp"
            android:top="5dp" />
    
    </shape>
    
  3. 修改 activity_main.xml

    <LinearLayout 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="#FFFFFF"
        android:gravity="center"
        android:orientation="vertical"
        tools:context=".MainActivity">
    
        <TextView
            android:id="@+id/txtOne"
            android:layout_width="200dp"
            android:layout_height="64dp"
            android:textSize="18sp"
            android:gravity="center"
            android:background="@drawable/shape_rect"
            android:text="矩形边框的 TextView" />
    
        <TextView
            android:id="@+id/txtTwo"
            android:layout_width="200dp"
            android:layout_height="64dp"
            android:layout_marginTop="10dp"
            android:textSize="18sp"
            android:gravity="center"
            android:background="@drawable/shape_round"
            android:text="圆角边框的 TextView" />
    
    </LinearLayout>
    

Android 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.