Shape Drawable Resources 【android xml】

Shape Drawable Resources

shape是一个通过声明属性来自定义图形的xml文件的根节点,可以做图片使用。

  • 经常需要自己设置某个view的背景,比如类似新浪微博客户端微博源内容的灰底圆角效果,这个时候我们就可以使用Shape。
  • 自定义一个圆角Button,点击Button有些效果的变化,就要用到shape和selector。

Shape Drawable Resources是指一个XML文件,它定义了几何形状,包括颜色和渐变。放在res/Drawable文件夹下,文件名即为资源id,可以在其他layout中调用R.drawable.filename,对应的类为ShapeDrawable .

shape必须为根元素,Android上支持以下几种属性shape、gradient、stroke、corners、padding、solid等。

1. shape定义了形状,默认为矩形。<shape>  android:shape=[“rectangle” | “oval” | “line” | “ring”]

<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#FFFF0000"
android:endColor="#80FF00FF"
android:angle="270" />
<padding android:left="50dp"
android:top="20dp" android:right="7dp"
android:bottom="7dp" />
<corners android:radius="8dp" />
</shape>

2. <gradient>  渐变

  • android:startColor  起始颜色
  • android:endColor  结束颜色
  • android:angle  渐变角度,0从上到下,90表示从左到右,数值为45的整数倍默认为0;
  • android:type  渐变的样式 liner线性渐变 radial环形渐变 sweep

3.  <solid >  填充

4. <stroke > 描边

  • android:width 描边的宽度
  • android:color 描边的颜色
  • android:dashWidth 表示’-‘横线的宽度
  • android:dashGap 表示’-‘横线之间的距离
  • android:color  填充的颜色

<?xml version="1.0" encoding="UTF-8"?>
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#b4000000" />
<stroke android:width="2.0dip"
android:color="#b4ffffff"
android:dashWidth="3.0dip"
android:dashGap="0.0dip" />
<padding android:left="7.0dip"
android:top="7.0dip" android:right="7.0dip"
android:bottom="7.0dip" />
<corners android:radius="8.0dip" />
</shape>

5. <corners > 圆角

  • android:radius  圆角的半径 值越大角越圆
  • android:topRightRadius  右上圆角半径
  • android:bottomLeftRadius 右下圆角角半径
  • android:topLeftRadius 左上圆角半径
  • android:bottomRightRadius 左下圆角半径

也可以通过代码的方式来实现Shape画图,对应类为ShapeDrawable. 对应关系为:

  • 父节点 shape   —   ShapeDrawable
    •  [子节点] gradient   —
    •  [子节点] padding   —
    •  [子节点] corners   —   setCornerRadius 、setCornerRadii
    •  [子节点] solid       —
    •  [子节点]  stroke   —   setStroke
    •  [子节点]  size —   setSize

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<corners android:radius="10dp" />
<padding android:left="10dp" />
<solid android:color="#29acf5" />
<stroke  android:width="10dp"  android:color="#f0f0f0" />
</shape>

image

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<corners android:radius="10dp" />
<padding android:left="10dp" />
<solid android:color="#29acf5" />
<stroke android:width="10dp" android:color="#f0f0f0" />
</shape>

image

via

Android Shape Drawable Resources

【Android进阶学习】shape和selector的结合使用

【Android UI】 Shape详解 (GradientDrawable)

Drawable Shape

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

生活在西班牙

自己动手丰衣足食

BlueAsteroid

Just another WordPress.com site

Jing's Blog

Just another WordPress.com site

Start from here......

我的心情魔方

天才遠私廚

希望能做一個分享各種資訊的好地方

语义噪声

西瓜大丸子汤的博客

笑对人生,傲立寰宇

Just another WordPress.com site

Where On Earth Is Waldo?

A Project By Melanie Coles

the Serious Computer Vision Blog

A blog about computer vision and serious stuff

Cauthy's Blog

paper review...

Cornell Computer Vision Seminar Blog

Blog for CS 7670 - Special Topics in Computer Vision

datarazzi

Life through nerd-colored glasses

Luciana Haill

Brainwaves Augmenting Consciousness

槑烎

1,2,∞

Dr Paul Tennent

and the university of nottingham

turn off the lights, please

A bunch of random, thinned and stateless thoughts around the Web

%d bloggers like this: