- 一屏幕的尺寸信息
- 1屏幕参数
- 2系统屏幕密度
- 3独立像素密度dp
- 4单位换算
- 二2D绘图基础
- 三Android XML 绘图
- Bitmap
- Shape
- Layer
- Selector
- 四绘图技巧
- Canvas
一.屏幕的尺寸信息
1屏幕参数
- 屏幕大小
指屏幕对角线的长度,通常使用”寸”来度量,例如4.7寸手机 5.5寸手机等.
- 分辨率
分辨率是指手机屏幕的像素点个数,例如720*1280是指屏幕分变率,指宽有720个像素点,高有1280个像素点.
- PPI
每英寸像素(Pixels Per Inch)又被称为DPI(Dots Per Inch).它有对角线的像素点数除以屏幕的大小得到的.
2系统屏幕密度
系统定义了几个标准的DPI值,作为手机的固定DPI
3独立像素密度dp
相同长度的屏幕,高密度的屏幕包含更多的像素点,Android系统使用mdpi即密度值为160的屏幕作为标准,在这个屏幕上1px=1dp.
各个分辨率直接的换算比例:ldpi:mdpi:xhdpi:xxhdpi=3:4:6:8:12
4单位换算
package com.jia.androidfirst;
import android.content.Context;
/**
* dp sp 转换为px的工具类
*
* @author aldrich
*
*/
public class DisplayUtil {
/**
* 将px值转换为dip或dp值,保证尺寸大小不变
*
* @param context
* @param pxValue
* @param scale
* (DisplayMetrics类中属性density)
* @return
*/
public static int px2dip(Context context, float pxValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (pxValue / scale + 0.5f);
}
/**
* 将dip或dp值转换为px值,保证尺寸大小不变
*
* @param context
* @param dipValue
* @param scale
* (DisplayMetrics类中属性density)
* @return
*/
public static int dip2px(Context context, float dipValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dipValue * scale + 0.5f);
}
/**
* 将px值转换为sp值,保证文字大小不变
*
* @param context
* @param pxValue
* @param fontScale
* (DisplayMetrics类中属性scaledDensity)
* @return
*/
public static int px2sp(Context context, float pxValue) {
final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;
return (int) (pxValue / fontScale + 0.5);
}
/**
* 将sp值转换为px值,保证文字大小不变
*
* @param context
* @param spValue
* @param fontScale
* (DisplayMetrics类中属性scaledDensity)
* @return
*/
public static int sp2px(Context context, float spValue) {
final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;
return (int) (spValue * fontScale + 0.5f);
}
}
其实的density就是前面所说的换算比例，这里使用的是公式换算方法进行转换，同时系统也提供了TypedValue帮助我们转换
/**
* dp2px
* @param dp
* @return
*/
protected int dp2px(int dp){
return (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,dp,getResources().getDisplayMetrics());
}
/**
* sp2px
* @param dp
* @return
*/
protected int sp2px(int sp){
return (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,sp,getResources().getDisplayMetrics());
}二.2D绘图基础
通过Canvas对象提供的各种绘制图像的API:
drawPoint(点)/drawLine(线)/drawRect(矩形)/drawVertices(多边形)/drawArc(弧)/drawCircle(圆).
- setAntiAlias(); //设置画笔的锯齿效果
- setColor(); //设置画笔的颜色
- setARGB(); //设置画笔的A R G B值
- setAlpha(); //设置画笔的Alpha值
- setTextSize(); //设置字体的尺寸
- setStyle(); //设置画笔的风格(空心或实心)
- setStrokeWidth(); //设置空心边框的宽度
- DrawPoint,绘制点
canvas.drawPoint(x,y,paint);
- DrawLine,绘制直线
canvas.drawLine(startX,startY,endX,endY,paint);
- DrawLines,绘制多条直线
float[]pts={
startX1,startX1,endX1,endY1,
……
startXn,startYn,endYn,endYn};
canvas.drawLines(pts,paint);
- DrawRect,绘制矩形
canvas.drawRect(left,top,right,bottom,paint);
- DrawRoundRect,绘制圆角矩形
canvas.drawRoundRect(left,top,right,bottom,radiusX,radiusY,paint);
- DrawCircle,绘制圆
canvas.drawCircle(circleX,circleY,radius,paint);
- DrawArc,绘制弧形 扇形
paint.setStyle(Paint.style.STROKE);
canvas.drawArc(left,top,right,bottom,startAngle,sweepAngle,useCenter,paint);
绘制弧形与扇形的区分就是倒数第二个参数useCenter的区别
- DrawOval,绘制椭圆
//通过椭圆的外接矩形来绘制椭圆
canvas.drawOval(left,top,right,bottom,paint);
- DrawText,绘制文本
canvas.drawText(text,startX,startY,paint);
- DrawPosText,在指定位置绘制文本
canvas.drawPosText(text,new float[]{X1,Y1,X2,Y2,……Xn,Yn},paint);
- DrawPath,绘制路径
Path path=new Path();
path.moveTo(50,50);
path.lineTo(100,100);
path.lineTo(100,300);
path.lineTo(300,50);
canvas.drawPath(path,paint);
三.Android XML 绘图
XML在安卓系统中可不仅仅是JAVA中的一个布局文件配置列表，在安卓开发者的手头上他甚至可以变成一张画，一幅画，Android开发者给XML提供了几个强大的属性
1.Bitmap
在XML中使用Bitmap很简单
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="@mipmap/ic_launcher">
</bitmap>通过这样引用图片就可以将图片直接转化成Bitmap让我们在程序中使用
2.Shape
通过Shape可以绘制各种图形，下面展示一下shape的参数
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!--默认是rectangle-->
<!--当shape= rectangle的时候使用-->
<corners
android:bottomLeftRadius="1dp"
android:bottomRightRadius="1dp"
android:radius="1dp"
android:topLeftRadius="1dp"
android:topRightRadius="1dp" />
<!--半径，会被后面的单个半径属性覆盖，默认是1dp-->
<!--渐变-->
<gradient
android:angle="1dp"
android:centerColor="@color/colorAccent"
android:centerX="1dp"
android:centerY="1dp"
android:gradientRadius="1dp"
android:startColor="@color/colorAccent"
android:type="linear"
android:useLevel="true" />
<!--内间距-->
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<!--大小，主要用于imageview用于scaletype-->
<size
android:width="1dp"
android:height="1dp" />
<!--填充颜色-->
<solid android:color="@color/colorAccent" />
<!--指定边框-->
<stroke
android:width="1dp"
android:color="@color/colorAccent" />
<!--虚线宽度-->
android:dashWidth= "1dp"
<!--虚线间隔宽度-->
android:dashGap= "1dp"
</shape>
shape可以说是xml绘图的精华所在，而且功能十分的强大，无论是扁平化，拟物化还是渐变，都是十分的OK，我们现在来做一个阴影的效果
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="45"
android:endColor="#805FBBFF"
android:startColor="#FF5DA2FF" />
<padding
android:bottom="7dp"
android:left="7dp"
android:right="7dp"
android:top="7dp" />
<corners android:radius="8dp" />
</shape>
看效果
3.Layer
Layer是在PhotoShop中是非常常用的功能，在Android中，我们同样可以实现图层的效果
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--图片1-->
<item android:drawable="@mipmap/ic_launcher"/>
<!--图片2-->
<item
android:bottom="10dp"
android:top="10dp"
android:right="10dp"
android:left="10dp"
android:drawable="@mipmap/ic_launcher"
/>
</layer-list>4.Selector
Selector的作用是帮助开发者实现静态View的反馈，通过设置不同的属性呈现不同的效果
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 默认时候的背景-->
<item android:drawable="@mipmap/ic_launcher" />
<!-- 没有焦点时候的背景-->
<item android:drawable="@mipmap/ic_launcher" android:state_window_focused="false" />
<!-- 非触摸模式下获得焦点并点击时的背景图片-->
<item android:drawable="@mipmap/ic_launcher" android:state_pressed="true" android:state_window_focused="true" />
<!-- 触摸模式下获得焦点并点击时的背景图片-->
<item android:drawable="@mipmap/ic_launcher" android:state_focused="false" android:state_pressed="true" />
<!--选中时的图片背景-->
<item android:drawable="@mipmap/ic_launcher" android:state_selected="true" />
<!--获得焦点时的图片背景-->
<item android:drawable="@mipmap/ic_launcher" android:state_focused="true" />
</selector>
这一方法可以帮助开发者迅速制作View的反馈，通过配置不同的触发事件，selector会自动选中不同的图片，特别是自定义button的时候，而我们不再使用原生单调的背景，而是使用selector特别制作的背景，就能完美实现触摸反馈了
通常情况下，上面提到的这些方法都可以共同实现，下面这个例子就展示了在一个selector中使用shape作为他的item的例子，实现一个具体点击反馈效果的，圆角矩形的selector，代码如下
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="rectangle">
<!--填充颜色-->
<solid android:color="#33444444" />
<!--设置按钮的四个角为弧形-->
<corners android:radius="5dp" />
<!--间距-->
<padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<!--填充颜色-->
<solid android:color="#FFFFFF" />
<!--设置按钮的四个角为弧形-->
<corners android:radius="5dp" />
<!--间距-->
<padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
</shape>
</item>
</selector>
我们来看一下效果图
四.绘图技巧
在Android中,默认的坐标零点位于屏幕左上角,向下为Y轴正方向,向右为X轴正方向.
1.Canvas
canvas中常用方法:
- Canvas.save():将之前的所有已绘制图像保存起来,让后续的操作就好像在一个新的图层操作
- Canvas.restore():合并图层操作,将我们在save()之后绘制的所有图像,与sava()之前的图像进行合并.
- Canvas.translate():坐标平移,调用translate(x,y)方法之后,则将原点(0,0)移动到了(x,y).之后的所有绘图操作都将以(x,y)为原点进行.
- Canvas.rotate():翻转,将坐标系旋转了一定的角度.