`

Android美工之Shape

 
阅读更多
Android中常常使用shape来定义控件的一些显示属性,今天看了一些shape的使用,对shape有了大体的了解,稍作总结:

先看下面的代码:
       
<shape>
            <!-- 实心 -->
            <solid android:color="#ff9d77"/>
            <!-- 渐变 -->
            <gradient
                android:startColor="#ff8c00"
                android:endColor="#FFFFFF"
                android:angle="270" />
            <!-- 描边 -->
            <stroke
                android:width="2dp"
                android:color="#dcdcdc" />
            <!-- 圆角 -->
            <corners
                android:radius="2dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>


  • solid:实心,就是填充的意思
  • android:color指定填充的颜色
  • gradient:渐变
  • android:startColor和android:endColor分别为起始和结束颜色,ndroid:angle是渐变角度,必须为45的整数倍。
  • 另外渐变默认的模式为android:type="linear",即线性渐变,可以指定渐变为径向渐变,android:type="radial",径向渐变需要指定半径android:gradientRadius="50"。
  • stroke:描边
  • android:width="2dp" 描边的宽度,android:color 描边的颜色。
  • 我们还可以把描边弄成虚线的形式,设置方式为:
  • android:dashWidth="5dp"
  • android:dashGap="3dp"
  • 其中android:dashWidth表示'-'这样一个横线的宽度,android:dashGap表示之间隔开的距离。


  • corners:圆角
  • android:radius为角的弧度,值越大角越圆。

我们还可以把四个角设定成不同的角度,方法为:
<corners
        android:topRightRadius="20dp"    右上角
        android:bottomLeftRadius="20dp"    右下角
        android:topLeftRadius="1dp"    左上角
        android:bottomRightRadius="0dp"    左下角
 />

这里有个地方需要注意,bottomLeftRadius是右下角,而不是左下角,这个有点郁闷,不过不影响使用,记得别搞错了就行。
还有网上看到有人说设置成0dp无效,不过我在测试中发现是可以的,我用的是2.2,可能修复了这个问题吧,如果无效的话那就只能设成1dp了。

padding:间隔
这个就不用多说了,XML布局文件中经常用到。


大体的就是这样,以下是一个使用的具体示例:用在Selector中作为Button的背景,分别定义了按钮的一般状态、获得焦点状态和按下时的状态,具体代码如下:

main.xml:
<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TestShapeButton"
    android:background="@drawable/button_selector"
    />

button_selector.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
            <!-- 渐变 -->
            <gradient
                android:startColor="#ff8c00"
                android:endColor="#FFFFFF"
                android:type="radial"
                android:gradientRadius="50" />
            <!-- 描边 -->
            <stroke
                android:width="2dp"
                android:color="#dcdcdc"
                android:dashWidth="5dp"
                android:dashGap="3dp" />
            <!-- 圆角 -->
            <corners
                android:radius="2dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>

    <item android:state_focused="true" >
        <shape>
            <gradient
                android:startColor="#ffc2b7"
                android:endColor="#ffc2b7"
                android:angle="270" />
            <stroke
                android:width="2dp"
                android:color="#dcdcdc" />
            <corners
                android:radius="2dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>

    <item>      
        <shape>
            <solid android:color="#ff9d77"/>
            <stroke
                android:width="2dp"
                android:color="#fad3cf" />
            <corners
                android:topRightRadius="5dp"
                android:bottomLeftRadius="5dp"
                android:topLeftRadius="0dp"
                android:bottomRightRadius="0dp"
            />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>


运行效果如下图:

一般状态:



获得焦点状态:



按下状态:

分享到:
评论

相关推荐

    AndroidPSD android美工设计psd图,这下可方便多了~

    "AndroidPSD" 提供的是一套专为Android平台设计的美工资源,包括了PSD(Photoshop Document)文件,这对于设计师和开发者来说是一个非常实用的工具。PSD文件是Adobe Photoshop软件的原生格式,可以用来编辑和修改...

    Android中shape的使用

    在Android开发中,Shape是XML资源文件中定义的一种图形元素,常用于自定义视图的外观,例如按钮、背景等。Shape元素提供了多种属性来控制视图的填充、边框、渐变效果以及圆角等视觉特性。以下是对Shape及其相关属性...

    美工之路 网页设计视频教程Html篇-22.媒体的嵌入.rar

    美工之路系列视频是为那些想从事网页前台设计的设计师们和网页设计爱好者量身定制的,本教程包含4个部分:HTML篇,CSS篇,Javascript篇和XML篇.不仅适用于网页设计的初学者,对中级以上水平的人员也有一定参考价值,使...

    美工之路 网页设计视频教程CSS篇-19.文本:文本变换.rar

    美工之路系列视频是为那些想从事网页前台设计的设计师们和网页设计爱好者量身定制的,本教程包含4个部分:HTML篇,CSS篇,Javascript篇和XML篇.不仅适用于网页设计的初学者,对中级以上水平的人员也有一定参考价值,使...

    美工素材(美工必备的素材,涵盖1000多种图案)大全集

    在IT行业中,美工设计是一项至关重要的工作,它关乎到产品的视觉表现力和用户体验。"美工素材(美工必备的素材,涵盖1000多种图案)大全集"是针对美工设计师们精心整理的一份资源包,包含了丰富的设计元素,能够极大...

    Qt自界面美工实例.doc

    Qt 美工实例详细介绍 Qt 是一个功能强大的 GUI 框架,它提供了强大的美工功能,让开发者可以轻松地创建出美观的用户界面。美工是指通过 Qt StyleSheet 实现的样式表,可以对 Qt 中的部件进行自定义的美工设计。...

    饭客美工之仿站教程免KEY

    饭客美工之仿站教程 饭客美工之仿站教程免KEY

    美工外包合同_美工外包协议书范本.pdf

    美工外包合同_美工外包协议书范本.pdf

    美工调色板-美工调色工具

    "美工调色板-美工调色工具"这个压缩包文件集合了丰富的色彩资源,旨在为美工人员提供全面的配色参考和指导。下面将详细阐述其中包含的知识点。 首先,"配色辞典"通常是一个包含大量色彩组合和理论的资源,它可能...

    淘宝美工助手5.0绿色特别版

    其中美工助理之中拥有大量的特效代码,常用工具之中拥有代码采集器、代码预览器等诸多使用软件,能够为相关人员节约大量的工作时间。 主要功能:1、软件能生成全屏装修代码、固定背景代码、全屏海报、反暗亮模块、...

    电商美工人才需求调研报告.pdf

    随着网络购物用户规模的扩大,电商美工的需求也随之增加。而电商美工的人才需求调研内容包括了对电商美工的职能要求、职业素质要求以及对应的教育与培训需求。 报告还通过问卷调查来设计、发放与回收,问卷调查内容...

    美工设计之色彩调和

    配备了图案,讲解如何进行色彩搭配,对初学美工的很有帮助。

    美工之路 网页设计视频教程CSS篇-25.边框:border.rar

    美工之路系列视频是为那些想从事网页前台设计的设计师们和网页设计爱好者量身定制的,本教程包含4个部分:HTML篇,CSS篇,Javascript篇和XML篇.不仅适用于网页设计的初学者,对中级以上水平的人员也有一定参考价值,使...

    网页美工特训视频教程(22讲)

    教程名称:网页美工特训视频教程(22讲)课程目录:【】网页美工特训班-个人网站【】网页美工特训班-设计【】网页美工特训班-韩站1【】网页美工特训班-韩站2【】网页美工特训班01讲-dw01【】网页美工特训班02讲-dw02...

    android:仪表盘(简单易实现)

    总之,创建一个简单的Android仪表盘并不复杂,关键在于合理地使用Android提供的UI组件和绘图API,结合美工设计,实现既美观又实用的界面。通过实践和不断优化,开发者可以构建出满足各种需求的个性化仪表盘。

    淘宝美工电子图书

    淘宝美工是电子商务领域中一个重要的职位,主要负责电商平台店铺的视觉设计与装修,提升商品展示效果,从而吸引顾客并促进销售。这份“淘宝美工电子图书”包含了丰富的知识,旨在帮助学习者掌握网店美工的基本技能和...

    美工用的图像素材

    在IT行业中,美工工作是视觉设计的重要组成部分,主要负责创建吸引人的图形界面,提升用户体验。图像素材是美工工作中不可或缺的元素,它们包括各种图片、图标、背景、纹理等,用于网站、应用、广告、海报等各种设计...

    各种美工素材、图标

    在IT行业中,美工素材和图标是网页设计和应用程序界面设计不可或缺的部分。这些元素能够极大地提升用户界面的吸引力和易用性,使产品更具视觉吸引力。以下是对标题、描述和标签所涉及知识点的详细说明: 1. **美工...

    美工之路 网页设计视频教程Html篇-18.Form表单标签(1).rar

    美工之路系列视频是为那些想从事网页前台设计的设计师们和网页设计爱好者量身定制的,本教程包含4个部分:HTML篇,CSS篇,Javascript篇和XML篇.不仅适用于网页设计的初学者,对中级以上水平的人员也有一定参考价值,使...

Global site tag (gtag.js) - Google Analytics