漫话 Shape 、 layer-list 和Selector

最新推荐文章于 2024-09-19 17:04:16 发布

原创最新推荐文章于 2024-09-19 17:04:16 发布 · 587 阅读

0 ·

CC 4.0 BY-SA版权

android 学习笔记专栏收录该内容

9 篇文章

订阅专栏

本文介绍了 Android 开发中用于美化控件的 Shape 和 Selector 的详细使用方法，包括如何定义几何形状、实现渐变效果及利用状态选择器为控件添加交互反馈。

shape和selector是Android UI设计中经常用到的，比如我们要自定义一个圆角Button，点击Button有些效果的变化，就要用到shape和selector。可以这样说，shape和selector在美化控件中的作用是至关重要的。

1.Shape

简介

作用：XML中定义的几何形状

位置：res/drawable/文件的名称.xml

使用的方法：

Java代码中：R.drawable.文件的名称

XML中：android:background="@drawable/文件的名称"

<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> android:shape=["rectangle" | "oval" | "line" | "ring"]

其中rectagle矩形，oval椭圆，line水平直线，ring环形

<shape>中子节点的常用属性：

<gradient> 渐变
android:startColor 起始颜色

android:endColor 结束颜色

android:angle 渐变角度，0从上到下，90表示从左到右，数值为45的整数倍默认为0；

android:type ["linear" | "radial" | "sweep"] 渐变类型(取值：linear、radial、sweep)

linear 线性渐变，这是默认设置

radial 放射性渐变，以开始色为中心。

sweep 扫描线式的渐变。

android:useLevel ["true" | "false"] 如果要使用LevelListDrawable对象，就要设置为true。设置为true无渐变。false有渐变色

android:gradientRadius 整型渐变色半径.当 android:type="radial" 时才使用。单独使用 android:type="radial"会报错。

android:centerX 整型渐变中心X点坐标的相对位置

android:centerY 整型渐变中心Y点坐标的相对位置

<solid > 填充

android:color 填充的颜色

<stroke > 描边

android:width 描边的宽度

android:color 描边的颜色

android:dashWidth 表示'-'横线的宽度

android:dashGap 表示'-'横线之间的距离

<corners > 圆角

android:radius 圆角的半径值越大角越圆

android:topRightRadius 右上圆角半径
android:bottomLeftRadius 右下圆角角半径
android:topLeftRadius 左上圆角半径

android:bottomRightRadius 左下圆角半径

padding：间隔
可以设置上下左右四个方向的间隔

<size>

这个shape的大小。

android:height

Dimension。这个shape的高度。

android:width

Dimension。这个shape的宽度。

注意：默认情况下，这个shape会缩放到与他所在容器大小成正比。当你在一个ImageView中使用这个shape，你可以使用 android:scaleType="center"来限制这种缩放。

2.layer-list

android中的layer-list就是用来多个图层堆叠显示的。

在drawable文件夹下创建一个xml文件。比如：background.xml

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

android:drawable="@drawable/pic1">

android:drawable="@drawable/pic2">

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/ic_launcher" />
    </item>
    <item
        android:left="25dp"
        android:top="25dp ">
        <bitmap
            android:gravity="center"
            android:src="@drawable/ic_launcher" />
    </item>
    <item
        android:left="50dp"
        android:top="50dp ">
        <bitmap
            android:gravity="center"
            android:src="@drawable/ic_launcher" />
    </item>

</layer-list>

ImageView 引用自定义的图片

 <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
             <strong>   android:src="@drawable/logo" </strong>/>

效果图如下

3.Selector

根据不同的选定状态来定义不同的现实效果

分为四大属性：

android:state_selected 是选中

android:state_focused 是获得焦点

android:state_pressed 是点击

android:state_enabled 是设置是否响应事件,指所有事件

另：

android:state_window_focused 默认时的背景图片

引用位置：res/drawable/文件的名称.xml

<?xml version="1.0" encoding="utf-8" ?>       
<selector xmlns:Android="http://schemas.android.com/apk/res/android">     
<!-- 默认时的背景图片-->      
<item Android:drawable="@drawable/pic1" />        
<!-- 没有焦点时的背景图片 -->      
<item   
   Android:state_window_focused="false"        
   android:drawable="@drawable/pic_blue"   
   />       
<!-- 非触摸模式下获得焦点并单击时的背景图片 -->      
<item   
   Android:state_focused="true"   
   android:state_pressed="true"     
   android:drawable= "@drawable/pic_red"   
   />     
<!-- 触摸模式下单击时的背景图片-->      
<item   
   Android:state_focused="false"   
   Android:state_pressed="true"     
   Android:drawable="@drawable/pic_pink"   
   />      
<!--选中时的图片背景-->      
<item   
   Android:state_selected="true"   
   android:drawable="@drawable/pic_orange"   
   />       
<!--获得焦点时的图片背景-->      
<item   
   Android:state_focused="true"   
   Android:drawable="@drawable/pic_green"   
   />       
</selector>

使用xml文件：

1.方法一：在listview中配置android:listSelector="@drawable/xxx"

或者在listview的item中添加属性android：background="@drawable/xxx"

2.方法二：是

Drawable drawable = getResources().getDrawable(R.drawable.xxx);

ListView.setSelector(drawable);

但是这样会出现列表有时候为黑的情况，需要加上：android:cacheColorHint="@android:color/transparent"使其透明。