Android 样式 :shape selector 篇

一个view控件的各种样式:包括控件间隔、文字大小和颜色、阴影、形状等等,这些样式主要通过shape、selector、layer-list、level-list、style、theme等组合实现。控件包括Button、EditText、ProgressBar、Toast、Checkbox等。

一 , shape

shape 用于形状和背景颜色的样式,分为以下四种形状。

android:shape属性:
  • rectangle: 矩形,默认的形状,可以画出直角矩形、圆角矩形、弧形等
  • oval: 椭圆形,用得比较多的是画正圆
  • line: 线形,可以画实线和虚线
  • ring: 环形,可以画环形进度条
效果属性:比如颜色,圆角:
  • solid: 设置形状填充的颜色,只有android:color一个属性
    android:color 填充的颜色
  • padding: 设置内容与形状边界的内间距,可分别设置左右上下的距离
    android:left 左内间距
    android:right 右内间距
    android:top 上内间距
    android:bottom 下内间距
  • gradient: 设置形状的渐变颜色,可以是线性渐变、辐射渐变、扫描性渐变
    android:type 渐变的类型
    -----> linear 线性渐变,默认的渐变类型
    -----> radial 放射渐变,设置该项时,android:gradientRadius也必须设置
    -----> sweep 扫描性渐变
    android:startColor 渐变开始的颜色
    android:endColor 渐变结束的颜色
    android:centerColor 渐变中间的颜色
    android:angle 渐变的角度,线性渐变时才有效,必须是45的倍数,0表示从左到右,90表示从下到上
    android:centerX 渐变中心的相对X坐标,放射渐变时才有效,在0.0到1.0之间,默认为0.5,表示在正中间
    android:centerY 渐变中心的相对X坐标,放射渐变时才有效,在0.0到1.0之间,默认为0.5,表示在正中间
    android:gradientRadius 渐变的半径,只有渐变类型为radial时才使用
    android:useLevel 如果为true,则可在LevelListDrawable中使用
  • corners: 设置圆角,只适用于rectangle类型,可分别设置四个角不同半径的圆角,当设置的圆角半径很大时,比如200dp,就可变成弧形边了
    android:radius 圆角半径,会被下面每个特定的圆角属性重写
    android:topLeftRadius 左上角的半径
    android:topRightRadius 右上角的半径
    android:bottomLeftRadius 左下角的半径
    android:bottomRightRadius 右下角的半径
  • stroke: 设置描边,可描成实线或虚线。
    android:color 描边的颜色
    android:width 描边的宽度
    android:dashWidth 设置虚线时的横线长度
    android:dashGap 设置虚线时的横线之间的距离
  • size: 设置形状默认的大小,可设置宽度和高度
    android:width 宽度
    android:height 高度
rectangle 矩形列子:
效果图
  这是一个带圆角,渐变背景矩形;如果不要渐变效果,直接删掉,这里是为了综合运用。
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/orange"  />
    <padding
        android:left="@dimen/dp5"
        android:right="@dimen/dp5"/>
// 这里如果不需要四个角都是圆弧,可以自定义想要的角圆弧,具体属性看上面 (效果属性)
    <corners android:radius="@dimen/dp10" />
    <gradient
        android:angle="90"
        android:centerColor="@color/colorPrimaryDark"
        android:endColor="@color/orange"
        android:startColor="@color/colorAccent"
        android:type="linear" />
</shape>
line: 线形:

这里就不用给案例了,用上面的效果属性(stroke)实现,也可以用View来实现线.

oval 圆例子:
效果图
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/orange" />
    <gradient
        android:angle="90"
        android:centerColor="@color/colorPrimaryDark"
        android:endColor="@color/orange"
        android:startColor="@color/colorAccent"
        android:type="linear" />

    // 设置形状的大小,这个大小最好不要在这里设置,如果内容多大于设置的这个尺寸,就会被拉伸变形,在View控件设置大小
    <size
        android:width="@dimen/dp80"
        android:height="@dimen/dp80"
    />
</shape>
ring: 环形例子
效果图
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadiusRatio="3"
    android:shape="ring"
    android:thicknessRatio="9"
    android:useLevel="false">
    <solid android:color="@color/orange" />
// 如果不要这个属性,就是一个标准的环形, 可以通过android:type的三个属性设置不同的效果
    <gradient
        android:angle="90"
        android:endColor="@color/orange"
        android:startColor="@color/white"
        android:type="sweep" />
// 设置边线
    <stroke android:width="1dp"
        android:color="@color/black"/>

    // 设置形状的大小,这个大小最好不要在这里设置,如果内容多大于设置的这个尺寸,就会被拉伸变形,在View控件设置大小
    <size
        android:width="@dimen/dp80"
        android:height="@dimen/dp80" />
</shape>

二, selector

selector样式,一般用于改变样式状态,比如button按下改变背景,CheckBox选中状态, 是通过item标签中定义的属性改变的,可以添加一个或多个item子标签.

item常用属性
  • android:state_enabled: 设置触摸或点击事件是否可用状态,一般只在false时设置该属性,表示不可用状态
  • android:state_pressed: 设置是否按压状态,一般在true时设置该属性,表示已按压状态,默认为false
  • android:state_selected: 设置是否选中状态,true表示已选中,false表示未选中
  • android:state_checked: 设置是否勾选状态,主要用于CheckBox和RadioButton,true表示已被勾选,false表示未被勾选
  • android:state_checkable: 设置勾选是否可用状态,类似state_enabled,只是state_enabled会影响触摸或点击事件,而state_checkable影响勾选事件
  • android:state_focused: 设置是否获得焦点状态,true表示获得焦点,默认为false,表示未获得焦点
  • android:state_window_focused: 设置当前窗口是否获得焦点状态,true表示获得焦点,false表示未获得焦点,例如拉下通知栏或弹出对话框时,当前界面就会失去焦点;另外,ListView的ListItem获得焦点时也会触发true状态,可以理解为当前窗口就是ListItem本身
  • android:state_activated: 设置是否被激活状态,true表示被激活,false表示未激活,API Level 11及以上才支持,可通过代码调用控件的setActivated(boolean)方法设置是否激活该控件
  • android:state_hovered: 设置是否鼠标在上面滑动的状态,true表示鼠标在上面滑动,默认为false,API Level 14及以上才支持

按钮背景

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/orange"/>
    <item android:drawable="@drawable/pressed_orange" android:state_pressed="true"/>
</selector>

按钮文本颜色

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@android:color/white" android:state_pressed="true" />
    <item android:color="@android:color/black" android:state_checked="false" />
</selector>

最后控件的引用

<Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="xiaowu"
            android:textColor="@drawable/text_color"
            android:background="@drawable/first_selector"/>

CheckBox 切换

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/item_uncheck" android:state_pressed="true" />
    <item android:drawable="@drawable/item_check" android:state_checked="true" />
    <item android:drawable="@drawable/item_uncheck" android:state_checked="false" />
</selector>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,242评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,769评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,484评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,133评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,007评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,080评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,496评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,190评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,464评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,205评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,567评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2 335

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,049评论 25 707
  • 概述 今天我们来探究一下android的样式。其实,几乎所有的控件都可以使用 background属性去引用自定义...
    CokeNello阅读 4,794评论 1 19
  • 记得刚开始学Android时,看着自己完全用系统控件写出的不忍直视的界面,对于如何做出不一样的按钮,让它们在不同状...
    biloba阅读 1,680评论 1 11
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,327评论 0 17
  • 概念JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。JSONP是JS...
    _Henry_阅读 192评论 0 0