zoukankan      html  css  js  c++  java
  • android开发之shape详解

    很多时候,使用shape能够实现的效果,你用一张图片也能够实现,但问题是一张图片无论你怎么压缩,它都不可能比一个xml文件小,因此,为了获得一个高性能的手机App,我们在开发中应该遵循这样一个原则:能够用shape实现的效果尽量不使用图片来实现。


    今天我们就一起来看看shape的使用。

    首先,使用shape画的图形,这个xml文件的根节点是shape,如下:

    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle|oval|line|ring" >
    
    <shape>

    shape取值有四种,可以是rectangle(长方形),oval(椭圆),line(线条),ring(圆环),如果设置的话默认是长方形,只有当我们要画的图形是ring的时候,下面这几个属性才会生效:


    1. android:innerRadius:内环的半径。
    2. android:innerRadiusRatio:内环的比例,比如这个值为2,那么内环的半径就为环半径除以2,如果设置了第一个属性,则这个属性不起作用。
    3. android:thickness:环的厚度。
    4. android:thicknessRatio:环的厚度比例,比如这个值为2,那么环的厚度就为环半径除以2,如果设置了第三个属性,则这个属性不起作用。
    5. android:useLevel:只有当我们的shape使用在LevelListDrawable中的时候,这个值为true,否则为false。


    以上是shape节点,在shape节点中我们还可以定义其他的节点:


    圆角:

    <corners 
        android:radius="20dp"
        android:topLeftRadius="20dp"
        android:topRightRadius="20dp"
        android:bottomLeftRadius="0dp"
        android:bottomRightRadius="0dp"
        />

    android:radius表示长方形四个角的半径,当然也可以每个角单独设定,后面单独设定的圆角半径会覆盖android:radius。


    渐变:


        <gradient
            android:angle="90"
            android:centerColor="#9ACD32"
            android:endColor="#9AC0CD"
            android:startColor="#9AFF9A"
            android:type="linear"
            android:useLevel="false" />


    1. android:angle="90"表示渐变的起始位置,这个值必须为45的倍数,包括0,0表示从左往右渐变,逆时针旋转,依次是45,90,135.....,90表示从下往上渐变,270表示从上往下渐变,剩下的大家依次去推理。
    2. android:startColor="#9AFF9A",表示渐变的起始颜色
    3. android:centerColor="#9ACD32"表示渐变的过渡颜色
    4. android:endColor="#9AC0CD"表示渐变的结束颜色
    5. type表示渐变的类型,有三种,分别是linear(线性变化),radial(辐射渐变)以及sweep(扫描渐变)
    6. 当type为radial时,我们要设置android:gradientRadius="",这个表示渐变的半径(线性渐变和扫描渐变不需要设置)


    填充:

    <solid android:color="#ADFF2F" />

    这个比较简单,不多说。


    描边:

    <stroke 
        android:width="1dp"
        android:color="#FFFF00"
        android:dashWidth="15dp"
        android:dashGap="5dp"
        />

    1. android:dashWidth表示虚线的宽度
    2. android:dashGap表示虚线之间的间隔
    3. 以上两个属性如果不设置则为实线


    大小:


    <size 
        android:width="1dp"
        android:height="1dp"
        />

    这个表示该shape的大小,默认情况下,shape的大小与它所在的容器大小成正比。如果我们在ImageView中使用这个shape,那么可以通过android:scaleType="center"属性来限制这种缩放。


    当然,还有一种padding,这和我们在xml文件中用的一样,我这里就不多说了。


    最后,基于以上几种特性,我做了以下几种效果供大家参考。



    示例效果代码下载https://github.com/lenve/shape







  • 相关阅读:
    jMeter 里 CSV Data Set Config Sharing Mode 的含义详解
    如何使用 jMeter Parallel Controller
    使用 Chrome 开发者工具 coverage 功能分析 web 应用的渲染阻止资源的执行分布情况
    使用 Chrome 开发者工具的 lighthouse 功能分析 web 应用的性能问题
    关于 SAP 电商云首页加载时触发的 OCC API 请求
    SAP UI5 确保控件 id 全局唯一的实现方法
    SAP 电商云 Accelerator 和 Spartacus UI 的工作机制差异
    介绍一个好用的能让网页变成黑色背景的护眼 Chrome 扩展应用
    Chrome 开发者工具 performance 标签页的用法
    Client Side Cache 和 Server Side Cache 的区别
  • 原文地址:https://www.cnblogs.com/qitian1/p/6461734.html
Copyright © 2011-2022 走看看