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效果设计模块的一部分内容,之后还会继续更新,希望对大家的学习有所帮助。

(0)

相关推荐

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

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

  • Android编程之OpenGL绘图技巧总结

    本文实例讲述了Android编程之OpenGL绘图技巧.分享给大家供大家参考,具体如下: 很久不用OpenGL ES绘图,怕自己忘记了,于是重新复习一遍,顺便原理性的东西总结如下: 1. Android 3D坐标系统 如图: Android的三维坐标系统中: 坐标原点位于中央, X轴从左向右延伸,原点左边的值为负数,右边为正数: Y轴从下向上延伸,原点下边的值为负数,上边为正数: Z轴屏幕里面向外面延伸,屏幕里面为负数,外面为正数. 2. 开发工具(OpenGL和OpenGL ES)介绍 Ope

  • Android绘图常用方法汇总

    Android绘图常用方法有哪些,下面一一为大家列举: 1.有关画笔(Paint)的方法 Paint mPaint= new Paint(); mPaint.setAntiAlias(true); // 消除锯齿 mPaint.setStrokeWidth(mCircleWidth); // 设置圆环的宽度 mPaint.setStrokeCap(Paint.Cap.ROUND); // 定义线段断点形状为圆头 mPaint.setAntiAlias(true); // 消除锯齿 mPaint.

  • 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图像绘制(七)ClipRect局部绘图/切割原图绘制总结

    杂语:看了很多程序猿都有写博客的习惯,看来我也得练练,不管写的好不好了,学到点什么体会就写写吧. 内容解说:这几天开始学游戏地图制作,今天小小的总结一下Canvas的clipRect()接口的使用. 1)选取要在画布上绘制(刷新)的区域,如图以(x, y)为起点坐标.宽w.高h的区域 2)选择要绘制的图片,不一定是刚好宽高为(w,h),大图就需要切割了(本例子绘制绿色区域) 3)将图片绘制到画布上,使得绿色区域与白色方块重合 4)最后效果图 代码解说: 复制代码 代码如下: canvas.sav

  • Android自定义View绘图实现拖影动画

    前几天在"Android绘图之渐隐动画"一文中通过画线实现了渐隐动画,但里面有个问题,画笔较粗(大于1)时线段之间会有裂隙,我又改进了一下.这次效果好多了. 先看效果吧: 然后我们来说说基本的做法:  •根据画笔宽度,计算每一条线段两个顶点对应的四个点,四点连线,包围线段,形成一个路径.  •后一条线段的路径的前两个点,取(等于)前一条线段的后两点,这样就衔接起来了. 把Path的Style修改为FILL,效果是这样的: 可以看到一个个四边形,连成了路径. 好啦,现在说说怎样根据两点计

  • Android 通过onDraw实现在View中绘图操作的示例

    Android绘图操作,通过继承View实现,在onDraw函数中实现绘图.下面是一个简单的例子: 复制代码 代码如下: public class AndroidTest extends Activity {    /** Called when the activity is first created. */    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(save

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

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

  • Android学习教程之2D绘图基础及绘制太极图

    前言 Android是通过graphics类来显示2D图形的.其中graphics中包括了Canvas.Paint.Color.Bitmap等类.graphics具有绘制点.线.颜色.2D几何图形.图像处理等功能.其中Color和Bitmap是很常用的类,本文主要要讲的是Canvas和Paint.顾名思义就是画布和画笔. Canvas类 Canvas即画布,我们需要做的就是使用之前设置好的Paint来绘制图形.系统通过 Canvas 为我们提供了一些基础的绘图 API : 1.canvas.dr

  • Android自定义View绘图实现渐隐动画

    实现了一个有趣的小东西:使用自定义View绘图,一边画线,画出的线条渐渐变淡,直到消失.效果如下图所示: 用属性动画或者渐变填充(Shader)可以做到一笔一笔的变化,但要想一笔渐变(手指不抬起边画边渐隐),没在Android中找到现成的API可用.所以,自己做了一个. 基本的想法是这样的: •在View的onTouchEvent中记录触摸点,生成一条一条的线LineElement,放在一个List中.给每个LineElement配置一个Paint实例. •在onDraw中绘制线段. •变换Li

随机推荐