Android UI效果之绘图篇(一)

最近准备整理一套关于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:src="drawable" android:gravity="center" /> </item> <!-- item2 --> <item> <bitmap android:src="drawable" android:gravity="center" /> </item> <!-- item3 --> <item <bitmap android:src="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>

以上就是Android开发中的UI效果设计模块的一部分内容,之后还会继续更新,希望对大家的学习有所帮助。

时间: 2024-09-23 20:42:30

Android UI效果之绘图篇(一)的相关文章

Android UI效果之绘图篇(四)_Android

上一篇博文说到了Shader的五个子类 - BitmapShader - LinearGradient - RadialGradient - SweepGradient - ComposeShader 其中BitmapShader和LinearGradient已经做了说明,今天就把剩余的三个Shader补充一下 3. RadialGradient 先看下构造方法 /** @param centerX 中心X坐标 @param centerY 中心Y坐标 @param radius 半径 @par

Android UI效果之绘图篇(三)_Android

一. PorterDuffXfermode PorterDuffXfermode类似于数据集合里面的交集并集概念,只是数据里面取的是两个集合,而我们这里取的是两个图形之间的交集并集,我们先来看一张Android API Demo里面一张金典的图 图中的Src和Dst相当于是数学中的两个集合,而在我们的代码中我们可以这样来操作这两个集合 canvas.drawSrc(); paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.XXX));

Android UI效果之绘图篇(一)_Android

最近准备整理一套关于UI效果的文章,算是对这段时间的一个总结,主要讲Android开发中的UI效果设计模块.初步分为一下几个篇幅: Android XML绘图(Shape.Layer.Selector) Android Canvas绘图(canvas.point.porterDuffXfermode.shader) Android 动画详解 Android 自定义控件 今天就当开胃菜,先讲讲最简单的xml绘图,相信这个大家都用的比较熟,这里就当给大家做一个小文档,当那个参数配置忘了,便于查阅 一

Android UI效果之绘图篇(二)

一.Canvas Canvas中的方法很多,这里我们只挑常用的进行讲解说明 Canvas可以绘制的对象有: 弧线(arcs) canvas. 填充颜色(argb和color) Bitmap 圆(circle和oval) 点(point) 线(line) 矩形(Rect) 图片(Picture) 圆角矩形 (RoundRect) 文本(text) 顶点(Vertices) 路径(path) 绘制弧形 /** * 绘制弧形 * @param oval 绘制区域 * @param startAngle

Android UI效果之绘图篇(三)

一. PorterDuffXfermode PorterDuffXfermode类似于数据集合里面的交集并集概念,只是数据里面取的是两个集合,而我们这里取的是两个图形之间的交集并集,我们先来看一张Android API Demo里面一张金典的图 图中的Src和Dst相当于是数学中的两个集合,而在我们的代码中我们可以这样来操作这两个集合 canvas.drawSrc(); paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.XXX));

Android UI效果之绘图篇(四)

上一篇博文说到了Shader的五个子类 - BitmapShader - LinearGradient - RadialGradient - SweepGradient - ComposeShader 其中BitmapShader和LinearGradient已经做了说明,今天就把剩余的三个Shader补充一下 3. RadialGradient 先看下构造方法 /** @param centerX 中心X坐标 @param centerY 中心Y坐标 @param radius 半径 @par

Android UI开发第二十七篇——实现左右划出菜单

http://blog.csdn.net/xyz_lmn/article/details/8635967

Android UI开发专题(二) 之绘图基础

在Android UI开发专题(一) 之界面设计中我们介绍了有关Android平台资源使用以及Bitmap相关类的操作,接下来将会以实例的方式给大家演示各种类的用处以及注意点.今天我们继续了解android.graphics包中比较重要的绘图类. 一. android.graphics.Matrix 有关图形的变换.缩放等相关操作常用的方法有: void reset() // 重置一个matrix对象. void set(Matrix src) //复制一个源矩阵,和本类的构造方法 Matrix

Android UI实现广告Banner轮播效果_Android

本篇博客要分享的一个效果是实现广告Banner轮播效果,这个效果也比较常见,一些视频类应用就经常有,就拿360影视大全来举例吧:   用红框框住的那个效果就是小巫今天要分享的,先来思考一下会用到什么控件?有什么用户体验?  控件我们可能一下子就可以想到的自然是ViewPager,没错!用到的就是ViewPager,那么它会有什么用户体验呢,它可能有以下几个体验:  1. 间隔不停的切换图片,指示器也跟着变  2. 点击图片可以跳转到指定的页面 如何实现? 布局开始着手 /BannerAutoSc