(《群英传》)整理笔记:
基本知识点:
分辨率:手机屏幕的像素点个数。
PPI(DPI):对角线的像素点除以屏幕的大小。
系统屏幕密度:
Ldpi:240×320;
Mdpi:320×480;
Hdpi:480×800;
Xhdpi:720×1280;
Xxhdpi:1080×1920。
单位转换:
package com.android.utils;
import android.content.Context;
/**
* 单位转换工具类(公式换算方法)
*
* @author Administrator
*
*/
public class UnitConversion {
/**
* 将px值转换为dip或dp值,保证尺寸不变。 density为换算比例
*
* @param context
* @param pxValue
* @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
* @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
* @return
*/
public static int px2sp(Context context, float pxValue) {
final float fontScale = context.getResources().getDisplayMetrics().density;
return (int) (pxValue / fontScale + 0.5f);
}
/**
* 将sp值转换为px值,保证尺寸大小不变
*
* @param context
* @param spValue
* @return
*/
public static int sp2px(Context context, float spValue) {
final float fontScale = context.getResources().getDisplayMetrics().density;
return (int) (spValue * fontScale + 0.5f);
}
}
2D绘图基础:
Paint的基本属性:
setAntiAlias(true); // 设置画笔的锯齿效果
setColor(); // 设置画笔的颜色
SetARGB(); // 设置画笔的A、R、G、B值
setAlpha(); // 设置画笔的Alpha(透明度)值
setTextSize() ; //设置字体的尺寸
setStyle(); // 设置画笔的风格(空心或实心)
setStrokeWidth(); // 设置空心边框的宽度
Canvas的常用方法:
DrawPoint:绘制点;
DrawLine:绘制直线;
DrawLines:绘制多条直线;
float[] pts = {
startX1, startY1, endX1, endY1,
…… ……
startXn, startYn, endXn, endYn
};
canvas.drawLines(pts, paint);
DrawRect:绘制矩形;
DrawRoundRect:绘制圆角矩形;
DrawCircle:绘制圆;
DrawArc:绘制弧形、扇形。useCenter(true)为扇形;
DrawOval:绘制椭圆(外接矩形);
DrawText():绘制文本;
DrawPosText:在指定位置绘制文本;
DrawPath:绘制路径–>
Path patn = new Path();
path.moveTo(50, 50);
path.lineTo(100, 100);
path.lineTo(100, 300);
path.lineTo(300, 50);
canvas.drawPath(path,paint);
Android XML绘图:
1、Bitmap:可以将图片转换成Bitmap在程序中使用
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="@drawable/ic_launcher" >
</bitmap>
2、Shape:可以在XML中绘制各种形状
(为了说明用法,格式并不准确)
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<!-- 绘制各种形状 -->
<!-- 指定大小,一般用在imageview配合scaleType属性使用 -->
<size
android:width="integer"
android:height="integer"/>
<!-- 渐变 -->
<gradient
android:angle="45"
android:endColor="color"
android:startColor="color"
android:centerX="integer"
android:centerY="integer"
android:centerColor="color"
android:gradientRadius="integer"
android:type="linear"
android:useLevel="true" />
<padding
android:left="integer"
android:top="integer"
android:right="integer"
android:bottom="integer"/>
<!-- 填充颜色 -->
<solid android:color="color"/>
<!-- 指定边框 -->
<stroke android:width="integer"
android:color="color"
// 虚线宽度
android:dashWidth="integer"
// 虚线间隔宽度
android:dashGap="integer"/>
<corners android:radius="integer"/>
</shape>
通过渐变实现的阴影效果
<?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图层:
图片会依次叠加
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- 图层 -->
<!-- 图片1 -->
<item android:drawable="@drawable/ic_launcher">
</item>
<!-- 图片2 -->
<item
android:bottom="10.0dp"
android:drawable="@drawable/ic_launcher"
android:left="10.0dp"
android:right="10.0dp"
android:top="10.0dp">
</item>
</layer-list>
4、Selector:
他的作用是帮助开发者实现静态绘图中的事件反馈,通过给不同的事件设置不同的图像,从而在程序中根据用户输入,返回不同的效果。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 默认时的背景图片 -->
<item android:drawable="@drawable/pic1"></item>
<!-- 没有焦点时的背景图片 -->
<item android:drawable="@drawable/pic2" android:state_window_focused="false"></item>
<!-- 非触摸模式下获得焦点并单击时的背景图片 -->
<item android:drawable="@drawable/pic3" android:state_focused="true" android:state_pressed="true"></item>
<!-- 触摸模式下单击时的背景图片 -->
<item android:drawable="@drawable/pic4" android:state_focused="false" android:state_pressed="true"></item>
<!-- 选中时的背景图片 -->
<item android:drawable="@drawable/pic5" android:state_selected="true"></item>
<!-- 获得焦点时的背景图片 -->
<item android:drawable="@drawable/pic6" android:state_focused="true"></item>
</selector>
5、上面方法的共同作用:
<?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 android:state_pressed="true">
<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>
绘图技巧:
1、Canvas:
Canvas.save():将之前的所有已绘制图像保存起来;
Canvas.restore():合并图层;
Canvas.translate():坐标系的平移;
Canvas.rotate():坐标系的反转。
示例:时钟
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.WindowManager;
public class MyClock extends View {
private int mWidth;
private int mHeight;
public MyClock(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView(context);
}
public MyClock(Context context, AttributeSet attrs) {
super(context, attrs);
initView(context);
}
public MyClock(Context context) {
super(context);
initView(context);
}
// 获取屏幕的宽和高
private void initView(Context context) {
WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics dm = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(dm);
mWidth = dm.widthPixels;
mHeight = dm.heightPixels;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Paint panintCicle = new Paint();
panintCicle.setStyle(Paint.Style.STROKE);
panintCicle.setAntiAlias(true);
panintCicle.setStrokeWidth(5);
canvas.drawCircle(mWidth / 2, mHeight / 2, mWidth / 2, panintCicle);
Paint paintDegree = new Paint();
panintCicle.setStrokeWidth(3);
for (int i = 0; i < 12; i++) {
// 区分整点与非整点
if (i == 0 || i == 3 || i == 6 || i == 9) {
paintDegree.setStrokeWidth(5);
paintDegree.setTextSize(100);
canvas.drawLine(
mWidth / 2,
mHeight / 2 - mWidth / 2 + 100,
mWidth / 2, mHeight / 2 - mWidth,
paintDegree);
String degree = String.valueOf(i);
canvas.drawText(
degree,
mWidth / 2 - paintDegree.measureText(degree) / 2,
mHeight / 2 - mWidth / 2 + 170,
paintDegree);
} else {
paintDegree.setStrokeWidth(3);
paintDegree.setTextSize(50);
canvas.drawLine(
mWidth / 2,
mHeight / 2 - mWidth / 2 + 60,
mWidth / 2,
mHeight / 2 - mWidth,
paintDegree);
String degree = String.valueOf(i);
canvas.drawText(
degree,
mWidth / 2 - paintDegree.measureText(degree) / 2,
mHeight / 2 - mWidth / 2 + 100,
paintDegree);
}
// 通过旋转画布简化坐标运算
canvas.rotate(30, mWidth / 2, mHeight / 2);
}
// 画指针
Paint paintHour = new Paint();
paintHour.setStrokeWidth(20);
Paint paintMinute = new Paint();
paintMinute.setStrokeWidth(10);
canvas.save();
canvas.translate(mWidth / 2, mHeight / 2);
canvas.drawLine(0, 0, 100, 100, paintHour);
canvas.drawLine(0, 0, 100, 200, paintMinute);
canvas.restore();
}
}
2、Layer图层
使用saveLayer()方法来创建一个图层,图层是基于栈的结构进行管理。调用saveLayer()、saveLayerAlpha(),使用restore()、restoreToCount()将一个图层出栈。
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawColor(Color.WHITE);
Paint mPaint = new Paint();
mPaint.setColor(Color.BLUE);
canvas.drawCircle(150, 150, 100, mPaint);
// 入栈
canvas.saveLayerAlpha(0, 0, 400, 400, 127, LAYER_FLAGS);
mPaint.setColor(Color.RED);
canvas.drawCircle(200, 200, 100, mPaint);
// 出栈
canvas.restore();
}
透明度为127时,即半透明;
透明度为255时,即完全不透明;
透明度为0时,即完全透明。