您的位置:首页 > 移动开发 > Android开发

Android使用XML文件绘图(Shape,Layer,Selector)

2017-08-24 11:53 846 查看

Shape的使用

Shape基础知识

Shape支持图形:

1、rectangle
2、oval
3、line
4、ring


Shape常用属性含义

属性名称属性含义用处
cornersshape = rectangle时使用,可以用来绘制圆角矩形
size大小为这个shape指定大小,一般在ImageView配合ScaleType使用
gradient渐变无限制
solid颜色填充无限制
stroke线条无限制

gradient与oval

效果图



从上到下:辐射渐变 radial,线性渐变 linear,sweep,雷达扫描渐变

shape_oval_with_gradient

<?xml version="1.0" encoding="utf-8"?>

<!--
shape:oval
渐变:辐射渐变 radial(必须设置gradientRadius)
-->

<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<gradient
android:startColor="@color/colorAccent"
android:endColor="@android:color/white"
android:type="radial"
android:gradientRadius="50dp"
>
</gradient>

<size
android:width="100dp"
android:height="100dp"/>
</shape>


shape_oval_with_gradient1

<?xml version="1.0" encoding="utf-8"?>

<!--
shape:oval
渐变:线性渐变 linear, angle指的是渐变方向角(只对linear有效)
-->

<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<gradient
android:angle="45"
android:centerX="0.5"
android:centerY="0.5"
android:startColor="@android:color/white"
android:centerColor="@color/colorAccent"
android:endColor="@android:color/white"
android:type="linear"
>
</gradient>

<size
android:width="100dp"
android:height="100dp"/>
</shape>


shape_oval_with_gradient2

<?xml version="1.0" encoding="utf-8"?>

<!--
shape:oval
渐变:sweep,雷达扫描渐变
-->

<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<gradient
android:startColor="@color/colorAccent"
android:endColor="@android:color/white"
android:type="sweep"
android:angle="45"
>
</gradient>

<size
android:width="100dp"
android:height="100dp"/>
</shape>


solid,stroke,corners

效果图



圆角矩形1

<?xml version="1.0" encoding="utf-8"?>

<!--圆角矩形-->

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

<corners
android:topLeftRadius="20dp"
android:bottomLeftRadius="20dp"/>

<!--填充颜色-->

<solid
android:color="@color/colorAccent"/>
<size
android:width="120dp"
android:height="50dp"/>
</shape>


圆角矩形2

<?xml version="1.0" encoding="utf-8"?>

<!--圆角矩形-->

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

<corners
android:radius="15dp"/>

<!--填充颜色-->

<solid
android:color="@color/colorAccent"/>
<size
android:width="120dp"
android:height="50dp"/>
</shape>


圆角矩形3

<?xml version="1.0" encoding="utf-8"?>

<!--圆角矩形-->

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

<corners
android:radius="10dp"/>

<!--填充颜色-->
<solid
android:color="@android:color/transparent"/>

<!--设置线条-->
<stroke
android:width="2dp"
android:color="@color/colorAccent"
/>
<size
android:width="120dp"
android:height="50dp"/>
</shape>


圆环1

<?xml version="1.0" encoding="utf-8"?>

<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadius="40dp"
android:thickness="10dp"
android:useLevel="false">

<solid
android:color="@color/colorAccent"/>

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

</shape>


圆环2

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="40dp"
android:shape="ring"
android:thickness="10dp"
android:useLevel="false">

<solid android:color="@color/colorAccent" />

<gradient
android:endColor="@color/colorAccent"
android:startColor="@android:color/white"
android:type="sweep" />
<size
android:width="120dp"
android:height="120dp" />

</shape>


Layer的使用

在这里不为Layer的使用贴效果图了。只是举一个Layer使用的例子

<?xml version="1.0" encoding="utf-8"?>

<!--两个图层叠加-->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item
android:drawable="@drawable/shape_ring1"/>

<item
android:gravity="center"
android:drawable="@drawable/shape_rect_with_corners3"
android:width="60dp"
android:height="25dp"/>

</layer-list>


Selector的使用

Selector大概是我们用到最多的XML绘图了。当我们想要对于一个View再不同事件相应下表现出不同的样式,这个时候我们就需要用Selector。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true">
<shape
android:shape ="rectangle">
<corners android:radius="10dp"/>
<size
android:width="120dp"
android:height="50dp"/>
<solid android:color="@android:color/holo_blue_light"/>
</shape>
</item>

<item
android:state_pressed="false">
<shape
android:shape ="rectangle">
<corners android:radius="10dp"/>
<size
android:width="120dp"
android:height="50dp"/>
<solid android:color="@android:color/holo_blue_dark"/>
</shape>
</item>

</selector>


MainAcivity的xml文件如下,大家可以自己尝试:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
tools:context="com.example.xiaojun.blog.activity.MainActivity">

<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="@dimen/activity_vertical_margin"
android:src="@drawable/shape_oval_with_gradient" />

<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="@dimen/activity_vertical_margin"
android:src="@drawable/shape_oval_with_gradient1" />

<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="@dimen/activity_vertical_margin"
android:src="@drawable/shape_oval_with_gradient2" />

<TextView
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/activity_vertical_margin"
android:background="@drawable/shape_rect_with_corners1"
android:textColor="@android:color/white"
android:text="圆角矩形1"/>

<TextView
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/activity_vertical_margin"
android:background="@drawable/shape_rect_with_corners2"
android:textColor="@android:color/white"
android:text="圆角矩形2"/>

<TextView
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/activity_vertical_margin"
android:background="@drawable/shape_rect_with_corners3"
android:textColor="@color/colorAccent"
android:text="圆角矩形3"/>

<TextView
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/activity_vertical_margin"
android:background="@drawable/shape_ring1"
android:text="Ring1"/>

<TextView
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/activity_vertical_margin"
android:background="@drawable/shape_ring2"
android:text="Ring2"/>

<TextView
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/activity_vertical_margin"
android:background="@drawable/layer"
android:text="Layer"/>

<TextView
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/activity_vertical_margin"
android:background="@drawable/text_background_selector"
android:clickable="true"
android:text="selector"/>
</LinearLayout>
</ScrollView>


参考:

1、Android群英传

2、Android中shape属性详解
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息