zoukankan      html  css  js  c++  java
  • <Android 基础(十三)> shape

    介绍

    简单来说,shape就是用来在xml文件中定义形状,代码解析之后就可以当做Drawable一样使用

    官方说明

    关于shape定义的drawable

    文件位置:res/drawable/filename.xml

    编译资源类型:GradientDrawable

    文件引用:
    In Java: R.drawable.filename
    In XML: @[package:]drawable/filename

    语法:

    <?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说明

    实际使用

    矩形

    填充(solid)

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
        <!--填充颜色 -->
        <solid android:color="@color/colorAccent" />
    </shape>

    这里写图片描述


    描边(stroke)

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
    
        <!--填充颜色 -->
        <solid android:color="@color/colorAccent" />
    
        <!--描边颜色-->
        <!--android:dashGap  虚线间距,这里设置为0则显示的为实线-->
        <!--android:dashWidth 虚线宽度-->
        <stroke
            android:width="3dp"
            android:color="@color/colorPrimaryDark"
            android:dashGap="0dp"
            android:dashWidth="10dp" />
    </shape>

    这里写图片描述


    圆角(corner)

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
    
        <!--填充颜色 -->
        <solid android:color="@color/colorAccent" />
    
        <!--描边颜色-->
        <!--android:dashGap  虚线间距,这里设置为0则显示的为实线-->
        <!--android:dashWidth 虚线宽度-->
        <stroke
            android:width="3dp"
            android:color="@color/colorPrimaryDark"
            android:dashGap="4dp"
            android:dashWidth="10dp" />
        <!--圆角-->
        <!--android:randius 设置4个叫的圆角半径,会被特定的圆角设定覆盖-->
        <!--android:bottomLeftRadius 左下角的圆角半径-->
        <!--android:bottomRightRadius 右下角的圆角半径-->
        <!--android:topLeftRandius  左上角的圆角半径-->
        <!--android:topRightRadius  右上角的圆角半径-->
        <corners
            android:bottomLeftRadius="60dp"
            android:radius="30dp"
            android:topRightRadius="120dp" />
    </shape>

    这里写图片描述


    渐变(gradient):linear

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
    
        <!--描边颜色-->
        <!--android:dashGap  虚线间距,这里设置为0则显示的为实线-->
        <!--android:dashWidth 虚线宽度-->
        <stroke
            android:width="3dp"
            android:color="@color/colorPrimaryDark"
            android:dashGap="4dp"
            android:dashWidth="10dp" />
        <!--圆角-->
        <!--android:randius 设置4个叫的圆角半径-->
        <!--android:bottomLeftRadius 左下角的圆角半径-->
        <!--android:bottomRightRadius 右下角的圆角半径-->
        <!--android:topLeftRandius  左上角的圆角半径-->
        <!--android:topRightRadius  右上角的圆角半径-->
        <corners
            android:bottomLeftRadius="60dp"
            android:radius="30dp"
            android:topRightRadius="120dp" />
        <!--渐变-->
        <gradient
            android:angle="45"
            android:centerColor="@color/stone"
            android:endColor="@color/pink"
            android:startColor="@color/yellow" />
    
    </shape>

    这里写图片描述

    渐变(gradient):radial

    <gradient
        android:angle="90"
        android:startColor="@color/colorPrimary"
        android:centerColor="@color/pink"
        android:endColor="@color/yellow"
        android:gradientRadius="400dp"
        android:type="radial"/>

    这里写图片描述

    渐变(gradient):sweep

    <gradient
        android:startColor="@color/colorPrimary"
        android:centerColor="@color/pink"
        android:endColor="@color/yellow"
        android:gradientRadius="400dp"
        android:type="sweep"/>

    这里写图片描述


    圆形

    正圆

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <gradient
        android:centerColor="@color/pink"
        android:endColor="@color/yellow"
        android:startColor="@color/colorPrimary" />
    <size
        android:width="400dp"
        android:height="400dp" />
    </shape>

    这里写图片描述


    椭圆

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <gradient
        android:angle="90"
        android:centerColor="@color/pink"
        android:endColor="@color/yellow"
        android:startColor="@color/colorPrimary" />
    </shape>

    这里写图片描述


    线条

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="line">
        <stroke
            android:width="9dp"
            android:color="@color/pink" />
    </shape>

    这里写图片描述


    环形

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="ring"
        android:innerRadius="100dp"
        android:thickness="50dp"
        android:useLevel="false"
        >
        <gradient android:startColor="@color/colorAccent"
            android:endColor="@color/yellow"
            android:centerColor="@color/pink"/>
    </shape>

    这里写图片描述

    android:useLevel=”false”这个属性值一定要设置成false,根据google官网上的解释:

    这里写图片描述

    以下属性只能在android:shape="ring"的时候使用:

    属性 意义
    android:innerRadius 尺寸,内环的半径
    android:thickness 尺寸,环的厚度
    android:innerRadiusRatio 浮点型,以环的宽度比率来表示内环的半径, 例如,如果android:innerRadiusRatio=5,表示内环半径等于环的宽度除以5,这个值是可以被android:innerRadius的值覆盖,默认为9.
    android:thicknessRatio 浮点型,以环的宽度比率来表示环的厚度,例如,如果android:thicknessRatio=2, 那么环的厚度就等于环的宽度除以2。这个值是可以被android:thickness覆盖的,默认值是3.
    android:useLevel boolean值,如果当做是LevelListDrawable使用时值为true,否则为false.这个值一般为false,否则你的环可能不会出现

    其他说明

    这些自己定义的shape为根节点的drawable xml文件,可以用来当成背景使用在Button,TextView等视图

    上,同时由于可以设置size大小,也可以用来制作简单的图标等。总而言之,每个细小的东西,都有挖掘的

    价值,感觉这里面还有一些东西我没有注意到,还要好好的看一下文档。

    最后,google镜像网站,xsoftlab,当然有条件的建议使用Google官网。

  • 相关阅读:
    Spring Boot 返回 XML 数据,一分钟搞定!
    Spring Cloud Alibaba Sentinel 整合 Feign 的设计实现
    周末去面试,进去 5 分钟就出来了…
    Spring Boot 返回 JSON 数据,一分钟搞定!
    Java 11 已发布,String 还能这样玩!
    Hashtable 为什么不叫 HashTable?
    Java 中初始化 List 集合的 6 种方式!
    HashMap 和 Hashtable 的 6 个区别,最后一个没几个人知道!
    毕业不到一年,绩效打了个D!
    poj 3111 K Best (二分搜索之最大化平均值之01分数规划)
  • 原文地址:https://www.cnblogs.com/lanzhi/p/6467191.html
Copyright © 2011-2022 走看看