屏幕的尺寸信息
1.屏幕参数
一块屏幕通常具有以下几个参数
(1)屏幕大小
指屏幕对角线的长度,通常使用“寸”来度量。
(2)分辨率
分辨率是指手机屏幕的像素点的个数。
(3)DPI
每英寸像素。它是由对角线的像素点数除以屏幕大小得到的。
系统屏幕密度
每个厂商的Android手机具有不同的大小尺寸和像素密度的屏幕。因此,系统定义了几个标准的DPI值,作为手机的固定DPI
独立像素密度dp
正式由于各种屏幕密度的不同,导致同样像素大小的长度,在不同密度的屏幕上显示长度不同。因为相同长度的屏幕,搞密度的屏幕包含更多的像素点。Android系统使用mdpi即密度为160的屏幕密度作为标准,在这个屏幕上1px=1dp。其他屏幕则可以通过此比例进行换算。
单位转换
在程序中,可以非常方便地对这些单位进行转换。下面的代码给出了一种转换的方法,我们可以把这些代码作为工具类保存到项目中。
/**
* dp,sp转换成px的工具类
* Created by lgl on 16/3/23.
*/
public class DisplayUtils {
/**
* 将px值转换成dpi或者dp值,保持尺寸不变
*
* @param content
* @param pxValus
* @return
*/
public static int px2dip(Context content, float pxValus) {
final float scale = content.getResources().getDisplayMetrics().density;
return (int) (pxValus / scale + 0.5f);
}
/**
* 将dip和dp转化成px,保证尺寸大小不变。
*
* @param content
* @param pxValus
* @return
*/
public static int dip2px(Context content, float pxValus) {
final float scale = content.getResources().getDisplayMetrics().density;
return (int) (pxValus / scale + 0.5f);
}
/**
* 将px转化成sp,保证文字大小不变。
*
* @param content
* @param pxValus
* @return
*/
public static int px2sp(Context content, float pxValus) {
final float fontScale = content.getResources().getDisplayMetrics().scaledDensity;
return (int) (pxValus / fontScale + 0.5f);
}
/**
* 将sp转化成px,保证文字大小不变。
*
* @param content
* @param pxValus
* @return
*/
public static int sp2px(Context content, float pxValus) {
final float fontScale = content.getResources().getDisplayMetrics().scaledDensity;
return (int) (pxValus / fontScale + 0.5f);
}
}
其中density就是前面我们所说的换算比例。这里使用的是公式换算的方法进行转换。同时,系统也提供了TypeValue类帮助我们转换。
/**
* 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(圆),等等。通过它们的名字,我们基本可以大致了解它们的功能。当然,Paint作为一个非常重要的元素,功能也是很强大的,这里简单列举了一些它的属性和对应的功能。
1.setAntiAlias() //设置画笔的锯齿效果
2.setColor() //设置画笔的颜色
3.setARGB() //设置画笔的A R G B值
4.setAlpha() //设置画笔的Alpha值 0.0表示完全透明 1.0表示完全不透明
5.setTextSize() //设置字体的尺寸
6.setStyle() //设置画笔的风格(空心或实心)
7.setStrokeWidth();//设置空心边框的宽度
正是由于画笔功能的不一样,再结合各种不同的绘画API。这样任意组合就可以实现不同的绘图效果,比如同样是矩形,设置Paint的Style就可以画出空心或者实心的矩形。
下面我们看看Canvas家族的成员们。
1.DrawPoint 绘制点
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawPoint(x,y,paint);
}
2.DrawLine 绘制线
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawLine(startX,startY,endX,endY,paint);
}
3.DrawLines,绘制多条直线
Float[] pts = {startX1,startY1,endX1,endY1,.........};
canvas.drawLines(pts,paint);
4.drawRect,绘制矩形
canvas.drawRect(left,top,right,botton,paint);
5.DrawRoundRect,绘制圆角矩形
canvas.drawRoundRect(left,top,right,botton,radiusX,radiusY,paint);
6.DrawCircle,绘制圆
canvas,drawCircle(circleX,circleY,radius,paint)
7.DrawArc,绘制弧形、扇形
paint.setStyle(Paint.Style.STROKE);
canvas.drawArc(left,top,right,bottom,startAngle,sweepAngle,useCenter,paint);
这里需要注意下,绘制弧形与扇形的区分就是倒数第二个参数useCenter的区别 。使用不同的Paint.Style和useCenter属性产生不同的效果。
8.DrawOval,绘制椭圆
//通过椭圆的外接矩形来绘制椭圆
canvas.drawOval(left,top,right,bottom,paint)
9.DrawText,绘制文本
canvas.drawText(text,startX,startY,paint);
10.DrawPosText,在指定位置绘制文本
canvas.drawPosText(new Float[]{X1,Y1,X2,Y2....},paint);
11.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在Android系统中可不仅仅是Java中的一个布局文件、配置列表。在Android开发者的手上,它甚至可以变成一幅画,一张图。Android的开发者给XML提供了几个强大的技能来帮助我们实现这一功能。
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让我们在程序中使用
Shape
通过Shape可以在XML中绘制各种形状,下面展示了Shape所支持的参数
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
//rectangel oval line ring
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绘图的精华所在。Shape功能十分强大,无论是扁平化、拟物化还是渐变,它都能绘制。整个Shape的可用参数,在上面的表中已经列举的很清楚了。
Layer
Layer是在PhototShop中非常常用的功能。在Android中,同样可以通过Layer来实现类似PhotoShop中图层的概念。
<?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>
通过layer,layer-list 可以很方便地实现Photoshop中的图层效果,图片会依次叠加
Selector
Selector的作用在于帮助开发者实现静态绘图中的事件反馈,通过给不同的事件设置不同的图像,从而在程序中根据用户输入,返回不同的效果。
<?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的时候,我们就不用再使用原生Button单调的背景,而使用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绘图技巧
1.Canvas作为绘制图形的直接对象,提供了以下几个非常有用的方法。
(1)Canvas.save()
(2)Canvas.restore()
(3)Canvas.translate()
(4)Canvas.rotate()
首先,来看Canvas.save()和Canvas.restore()这俩个方法。
Canvas.save()这个方法, 从字面上可以理解为保存画布。它的作用就是将之前的所有已绘制图形保存起来,让后续的操作就好像在一个新的图层上操作一样,这一点雨PhotoShop中的图层理解基本一致。
而Canvas.restore()这个方法,则可以理解为PhotoShop中的合并图层操作。它的操作是将我们在save()之后绘制的所有图像与save()之前的图像进行合并。
那么translate()方法与rotate()方法呢?虽然从字面上看,可以将它们理解为是画布平移、画布翻转,但是把它理解为坐标系的平移与翻转则会更加形象。前面说了,默认绘图坐标零点位于屏幕左上角,那么在调用translate(x,y)方法之后,则将原点(0,0)移动到了(x,y).之后的所有绘图操作都将以(x,y)为原点执行。同理,rotate()方法也一样。当然这些方法都是为了简化绘图而创建的。
public class DialView extends View {
// 宽高
private int mWidth;
private int mHeight;
// 构造方法
public DialView(Context context, AttributeSet attrs) {
super(context, attrs);
// 获取屏幕的宽高
WindowManager wm = (WindowManager) getContext().getSystemService(
Context.WINDOW_SERVICE);
mWidth = wm.getDefaultDisplay().getWidth();
mHeight = wm.getDefaultDisplay().getHeight();
}
@Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);
// 画外圆
Paint paintCircle = new Paint();
paintCircle.setAntiAlias(true);
paintCircle.setStyle(Paint.Style.STROKE);
paintCircle.setStrokeWidth(5);
canvas.drawCircle(mWidth / 2, mHeight / 2, mWidth / 2, paintCircle);
// 画刻度
Paint paintDegree = new Paint();
paintDegree.setStrokeWidth(3);
for (int i = 0; i < 24; i++) {
// 区别整点和非整点
if (i == 0 || i == 6 || i == 12 || i == 18) {
paintDegree.setStrokeWidth(5);
paintDegree.setTextSize(30);
canvas.drawLine(mWidth / 2, mHeight / 2 - mWidth / 2,
mWidth / 2, mHeight / 2 - mWidth / 2 + 60, paintDegree);
String degree = String.valueOf(i);
canvas.drawText(degree,
mWidth / 2 - paintDegree.measureText(degree) / 2,
mHeight / 2 - mWidth / 2 + 90, paintDegree);
} else {
paintDegree.setStrokeWidth(3);
paintDegree.setTextSize(15);
canvas.drawLine(mWidth / 2, mHeight / 2 - mWidth / 2,
mWidth / 2, mHeight / 2 - mWidth / 2 + 30, paintDegree);
String degree = String.valueOf(i);
canvas.drawText(degree,
mWidth / 2 - paintDegree.measureText(degree) / 2,
mHeight / 2 - mWidth / 2 + 60, paintDegree);
}
// 通过旋转画布简化坐标运算
canvas.rotate(15, 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();
}
}
Layer图层
Android中的绘图API,很大程度上都来自于现实生活中的绘图,特别是借鉴了很多PhotoShop中的概念,比如图层的概念。那么什么是图层呢?相信用过ShotoShop的朋友一定会非常清楚,一张复杂的画可以由很多个图层叠加起来,形成一个复杂的图像。在Android中,使用saveLayer()方法可以由很多图层叠加起来,形成一个复杂的图像。在Android中,使用setLayer()方法来创建一个图层,图层同样是基于栈的结构进行管理的。
Android通过调用saveLayer()方法、saveLayerAlpha()方法将一个图层入栈,使用restore()方法、restoreToCount()方法将一个图层出栈。入栈的时候,后面所有的操作都发生在这个图层上,而出栈的时候,则会把图像绘制到上层Canvas上。
@Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);
canvas.drawColor(Color.WHITE);
mPaint.setColor(Color.BLUE);
canvas.drawCircle(150, 150, 100, mPaint);
canvas.saveLayerAlpha(0, 0,400,400,127,LAYER_TYPE_NONE);
mPaint.setColor(Color.RED);
canvas.drawCircle(200, 200, 100, mPaint);
canvas.restore();
}
在onDraw方法中绘制两个相交的圆,当然这两个圆位于两个图层上。
接下来将图层后面的透明度设置成0-255不同值
我们分别演示 127 255 0三个
Android 图像处理之色彩特效处理
Android对于图片的处理,最常使用到的数据结构是位图-------Bitmap,它包含了一张图片所有的数据。整个图片都是由点阵和颜色值组成的,所谓点阵就是一个包含像素的矩阵,每一个元素对应着图片的一个像素。而颜色值-----ARGB,分别对应透明度、红、绿、蓝这四个通道分量,它们共同决定了每个像素点显示的颜色。
色彩矩阵分析
在色彩处理中,通常使用以下三个角度来描述一个图像。
1.色调-------物体传播的颜色
2.饱和度-------颜色的纯度,从0到100%来进行描述
3.亮度--------颜色的相对明暗程度
而在Android中,系统使用一个颜色矩阵--------ColorMatrix,来处理图像的这些色彩效果。Android中的颜色矩阵是一个4*5的颜色矩阵,它用来对图片的色彩进行处理。而对于每个像素点,都有一个颜色分量矩阵用来保存颜色的RGBA值。
图中矩阵A就是一个4X5的颜色矩阵,在Android中,他们会以一段一维数组的形式来存储[a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t],则C就是一个颜色矩形分量,在处理图像中,使用矩阵乘法运算AC处理颜色分量矩阵如下图
矩阵运算的乘法公式相信大家都在线性代数课程中学过,计算过程如下
从这个公式我们可以发现
这些是这样归类的
- 第一行的abcde用来决定新的颜色值R——红色
- 第二行的fghij用来决定新的颜色值G——绿色
- 第三行的kimno用来决定新的颜色值B——蓝色
- 第四行的pqrst用来决定新的颜色值A——透明
这样划分好各自的范围之后,这些值就比较慢明确了,不过只这样说可能会比较抽象,我们通过几个小李子不断的去分析
首先,我们来看一下矩阵变换的计算公式,以R分量为例,计算过程是
R1 = a * R + b* G + c*B+d *A + e
如果让a = 1,b,c,d,e都等于0,那么计算的结果为R1 = R,因此我们可以构建一个矩阵
如果把这个矩阵公式带入R1 = AC,那么根据矩阵的乘法运算法则,可以得到R1 = R;因此,这个矩阵通常是用来作为初始的颜色矩阵来使用,他不会对原有颜色进行任何改变
那么当我们要变换颜色值的时候通常有两种方法,一个是直接改变颜色的offset,即修改颜色的分量。另一种方法直接改变RGBA值的系数来改变颜色分量的值。
改变偏移量
从前面的分析中,可以知道要修改R1的值,只要将第五列的值进行修改即可,即改变颜色的偏移量,其它值保存初始矩阵的值,如图所示的颜色矩阵实现了这样的效果。
在上面这个矩阵中,我们修改了R,G,所对应的颜色偏移量,那么最后的处理结果,就是图像的红色绿色分别增加了100,而我们知道,红色混合绿色的到了黄色,所以最终的颜色处理结果就是让整个图片的色调偏黄色
2.改变颜色系数
如果修改颜色分量中的某个系数值而其他只依然保存初始矩阵的值
在上面这个矩阵中改变了G分量所对应的系数据g,这样在矩形运算后G分量会变成以前的两倍,最终效果就是图像的色调更加偏绿。
改变色光属性
图像的色调,饱和度,亮度这三个属性在图像处理中使用的非常多,因此在颜色矩阵中也封装了一些API来快速调用这些参数,而不用每次都去计算矩阵的值。下面通过一个实例来看看如何通过句正改变图像的色调,饱和度和亮度。
在Android中,系统封装了一个类——ColorMatrix,也就是前面所说的颜色矩阵。通过这个类,可以很方便地通过改变矩阵值来处理颜色的效果,创建一个ColorMatrix对象非常简单代码如下。
ColorMatrix colorMatrix = new ColorMatrix();
下面我们来处理不同的色光属性
色调
安卓安卓系统提供了setRotate()帮助我们设置三个颜色的色调,第一个参数系统分别使用0,1,2来代表red green blue 三个颜色的处理而第二个参数就是需要处理的值了
ColorMatrix colorMatrix = new ColorMatrix();
colorMatrix.setRotate(0, 2);
colorMatrix.setRotate(1, 4);
colorMatrix.setRotate(2, 3);
通过这样的方法,可以为RGB三个颜色的分量重新设置不同的值了
饱和度
Android系统中提供了setSaturation()来设置颜色的饱和度,参数即代表饱和度的值,当饱和度为0的时候是灰色的
ColorMatrix colorMatrix = new ColorMatrix();
colorMatrix.setSaturation(10);
亮度
当三原色以相同的比例及及混合的时候,就会显示出白色,系统也正在使用这个原理来改变一个图像的亮度,代码如下,当亮度为零时图像会变成全黑。
ColorMatrix colorMatrix = new ColorMatrix();
colorMatrix.setScale(10, 10, 10, 10);
除了单独使用上面的三种方法来经颜色效果的处理之外,Android系统还封装了矩阵的乘法运算,它提供了PostConcat方法来将矩阵的作用效果混合,从而叠加处理效果代码如下
ColorMatrix colorMatrix = new ColorMatrix();
colorMatrix.postConcat(colorMatrix);
colorMatrix.postConcat(colorMatrix);
colorMatrix.postConcat(colorMatrix);
在了解了改变色光属性之后,我们回到现实中的例子,在本例子中,我们通过seekBar来改变不同的数值,并将这些数值作用到对应的矩阵中,最后通过PostConcat方法混合处理
滑动seekbar获得输入值的代码如下