为了账号安全,请及时绑定邮箱和手机立即绑定

Android UI效果之绘图篇(一)

标签:
Android

准备出一个UI效果的系列,算是对这段时间的一个总结,主要讲Android开发中的UI效果设计模块。初步分为一下几个篇幅:

  • Android XML绘图(Shape、Layer、Selector)
  • Android Canvas绘图(canvas、point、porterDuffXfermode、shader)
  • Android 动画详解
  • Android 自定义控件
    今天就当开胃菜,先讲讲最简单的xml绘图,相信这个大家都用的比较熟,这里就当给大家做一个小文档,当那个参数配置忘了,便于查阅
    一、Shape
    
    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" 
    // 此处可以设置shape的形状 不设置默认为rectangle
    android:shape=["rectangle"|"oval"|"line"|"ring"|]
<!-- 圆角 shape="rectangle"是使用 默认为1dp -->
<corners
    android:radius="xdp"
    android:topLeftRadius="xdp"
    android:topRightRadius="xdp"
    android:bottomLeftRadius="xdp"
    android:bottomRightRadius="xdp"/>

<!-- 渐变 -->
<gradient
    android:startColor="color"
    android:centerColor="color"
    android:endColor="color"
    android:useLevel="boolean"
    android:angle="integer"//angle的值必须是45的倍数(包括0),仅在type="linear"有效
    android:type=["linear"|"radial"|"sweep"]
    android:centerX="integer"
    android:centerY="integer"
    android:gradientRadius="integer"/>

<!-- 间隔 -->
<padding
    android:left="xdp"
    android:top="xdp"
    android:right="xdp"
    android:bottom="xdp"/>

<!-- 大小 宽度和高度 -->
<size
    android:width="dp"
    android:height="dp"/>

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

<!-- 描边 -->
<stroke
    android:width="dp"
    android:color="color"
    android:dashWidth="dp" //虚线宽度
    android:dashGap="dp"/> //虚线间隔宽度

</shape>

 二、Layer
 这个用过photoshop的朋友,应该很好理解,用于实现图层效果

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- item1 -->
<item>
<bitmap android:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="drawable"
android:gravity="center" />
</item>
<!-- item2 -->
<item>
<bitmap android:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="drawable"
android:gravity="center" />
</item>
<!-- item3 -->
<item
<bitmap android:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="drawable"
android:gravity="center" />
</item>
</layer-list>

 三、Selector
 这个常用语Button、CheckBox、Radio等控件中,通过不同的事件切换控件效果

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

点击查看更多内容
15人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
JAVA开发工程师
手记
粉丝
8548
获赞与收藏
6550

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消