Android软件开发之盘点自定义View界面大合集

今天我用自己写的一个Demo 和大家详细介绍一个Android中自定义View中的使用与绘制技巧。

1.自定义view绘制字符串      

       相信在实际开发过程中必然很多地方都须要用到系统字 为什么会用到系统字？ 方便 省内存 我相信做过J2ME游戏开发的朋友应该深知内存有多么多么重要  而且使用它还可以带来一个更重要的好处就是很方便的可以实现多国语言的切换 笔者现在在正在做的一个产品就是可以多语言切换的软件  有英语 繁体中文 等等 设想如果使用图片字的话那每个语言都须要出一套图，我用一个例子简单介绍一下绘制字符串。

​​view plain​​​ ​​copy to clipboard​​​ ​​print​​​ ​​?​​

1. package
2. 
   
3. import
4. import
5. import
6. import
7. import
8. import
9. import
10. import
11. import
12. 
    
13. public class Font extends
14. public int mScreenWidth = 0;
15. public int mScreenHeight = 0;
16. @Override
17. protected void
18. new FontView(this));
19. // 获取屏幕宽高
20. Display display = getWindowManager().getDefaultDisplay();
21. mScreenWidth  = display.getWidth();
22. mScreenHeight = display.getHeight();
23. super.onCreate(savedInstanceState);
24. 
    
25. }
26. 
    
27. class FontView extends
28. public final static String STR_WIDTH = "获取字符串宽为：";
29. public final static String STR_HEIGHT = "获取字体高度为：";
30. null;
31. 
    
32. public
33. super(context);
34. new
35. }
36. 
    
37. @Override
38. protected void
39. //设置字符串颜色
40. mPaint.setColor(Color.WHITE);
41. "当前屏幕宽" + mScreenWidth, 0, 30, mPaint);
42. "当前屏幕高"+ mScreenHeight, 0, 60, mPaint);
43. //设置字体大小
44. mPaint.setColor(Color.RED);
45. 18);
46. "字体大小为18", 0, 90, mPaint);
47. //消除字体锯齿
48. mPaint.setFlags(Paint.ANTI_ALIAS_FLAG);
49. "消除字体锯齿后", 0, 120, mPaint);
50. //获取字符串宽度
51. 0, 150, mPaint);
52. //获取字体高度
53. 0, 180, mPaint);
54. //从string.xml读取字符串绘制
55. mPaint.setColor(Color.YELLOW);
56. 0, 210, mPaint);
57. super.onDraw(canvas);
58. }
59. 
    
60. /**
61. * 获取字符串宽
62. * @param str
63. * @return
64. */
65. private int
66. return (int) mPaint.measureText(STR_WIDTH);
67. }
68. /*
69. * 获取字体高度
70. */
71. private int
72. FontMetrics fm = mPaint.getFontMetrics();
73. return (int)Math.ceil(fm.descent - fm.top) + 2;
74. }
75. }
76. }

package cn.m15.xys;import android.app.Activity;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Paint.FontMetrics;import android.os.Bundle;import android.view.Display;import android.view.View;public class Font extends Activity { public int mScreenWidth = 0; public int mScreenHeight = 0; @Override protected void onCreate(Bundle savedInstanceState) {setContentView(new FontView(this));// 获取屏幕宽高Display display = getWindowManager().getDefaultDisplay();mScreenWidth = display.getWidth();mScreenHeight = display.getHeight();super.onCreate(savedInstanceState); } class FontView extends View { public final static String STR_WIDTH = "获取字符串宽为："; public final static String STR_HEIGHT = "获取字体高度为："; Paint mPaint = null; public FontView(Context context) { super(context); mPaint = new Paint();}@Overrideprotected void onDraw(Canvas canvas) { //设置字符串颜色 mPaint.setColor(Color.WHITE); canvas.drawText("当前屏幕宽" + mScreenWidth, 0, 30, mPaint); canvas.drawText("当前屏幕高"+ mScreenHeight, 0, 60, mPaint); //设置字体大小 mPaint.setColor(Color.RED); mPaint.setTextSize(18); canvas.drawText("字体大小为18", 0, 90, mPaint); //消除字体锯齿 mPaint.setFlags(Paint.ANTI_ALIAS_FLAG); canvas.drawText("消除字体锯齿后", 0, 120, mPaint); //获取字符串宽度 canvas.drawText(STR_WIDTH + getStringWidth(STR_WIDTH), 0, 150, mPaint); //获取字体高度 canvas.drawText(STR_HEIGHT + getFontHeight(), 0, 180, mPaint); //从string.xml读取字符串绘制 mPaint.setColor(Color.YELLOW); canvas.drawText(getResources().getString(R.string.string_font), 0, 210, mPaint); super.onDraw(canvas);}/** * 获取字符串宽 * @param str * @return */private int getStringWidth(String str) { return (int) mPaint.measureText(STR_WIDTH); }/* * 获取字体高度 */private int getFontHeight() { FontMetrics fm = mPaint.getFontMetrics(); return (int)Math.ceil(fm.descent - fm.top) + 2;} }}

2.绘制无规则几何图形

        绘制无规则几何图形似乎在实际工作中很少可以用到 原因是用程序去绘制图形即使在精准再好看也不会有美术出的图片好看 但是使用程序绘制图形作为学习来说却是基础中的基础，所以建议大家都看一看。

​​view plain​​​ ​​copy to clipboard​​​ ​​print​​​ ​​?​​

1. package
2. 
   
3. import
4. import
5. import
6. import
7. import
8. import
9. import
10. import
11. import
12. 
    
13. public class Geometry extends
14. public int mScreenWidth = 0;
15. public int mScreenHeight = 0;
16. 
    
17. @Override
18. protected void
19. new GeometryView(this));
20. super.onCreate(savedInstanceState);
21. 
    
22. }
23. 
    
24. class GeometryView extends
25. null;
26. 
    
27. public
28. super(context);
29. new
30. mPaint.setFlags(Paint.ANTI_ALIAS_FLAG);
31. }
32. 
    
33. @Override
34. protected void
35. super.onDraw(canvas);
36. 
    
37. //设置画布颜色 也就是背景颜色
38. canvas.drawColor(Color.WHITE);
39. 
    
40. mPaint.setColor(Color.BLACK);
41. "绘制无规则几何图形喔！！！", 150, 30, mPaint);
42. 
    
43. //绘制一条线
44. mPaint.setColor(Color.BLACK);
45. 4);
46. 0, 0, 100, 100, mPaint);
47. 
    
48. //绘制一个矩形
49. mPaint.setColor(Color.YELLOW);
50. 0, 120, 100, 200, mPaint);
51. 
    
52. //绘制一个圆形
53. mPaint.setColor(Color.BLUE);
54. 80, 300, 50, mPaint);
55. 
    
56. //绘制一个椭圆
57. mPaint.setColor(Color.CYAN);
58. new RectF(300,370,120,100), mPaint);
59. 
    
60. //绘制多边形
61. mPaint.setColor(Color.BLACK);
62. new
63. 150+5 , 400 -50);
64. 150+45, 400 - 50);
65. 150+30, 460 - 50);
66. 150+20, 460 - 50);
67. path.close();
68. canvas.drawPath(path, mPaint);
69. 
    
70. }
71. }
72. }

package cn.m15.xys;import android.app.Activity;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Path;import android.graphics.RectF;import android.os.Bundle;import android.view.View;public class Geometry extends Activity { public int mScreenWidth = 0; public int mScreenHeight = 0; @Override protected void onCreate(Bundle savedInstanceState) {setContentView(new GeometryView(this));super.onCreate(savedInstanceState); } class GeometryView extends View {Paint mPaint = null;public GeometryView(Context context) { super(context); mPaint = new Paint(); mPaint.setFlags(Paint.ANTI_ALIAS_FLAG);}@Overrideprotected void onDraw(Canvas canvas) { super.onDraw(canvas); //设置画布颜色 也就是背景颜色 canvas.drawColor(Color.WHITE); mPaint.setColor(Color.BLACK); canvas.drawText("绘制无规则几何图形喔！！！", 150, 30, mPaint); //绘制一条线 mPaint.setColor(Color.BLACK); mPaint.setStrokeWidth(4); canvas.drawLine(0, 0, 100, 100, mPaint); //绘制一个矩形 mPaint.setColor(Color.YELLOW); canvas.drawRect(0, 120, 100, 200, mPaint); //绘制一个圆形 mPaint.setColor(Color.BLUE); canvas.drawCircle(80, 300, 50, mPaint); //绘制一个椭圆 mPaint.setColor(Color.CYAN); canvas.drawOval(new RectF(300,370,120,100), mPaint); //绘制多边形 mPaint.setColor(Color.BLACK); Path path = new Path(); path.moveTo(150+5 , 400 -50); path.lineTo(150+45, 400 - 50); path.lineTo(150+30, 460 - 50); path.lineTo(150+20, 460 - 50); path.close(); canvas.drawPath(path, mPaint); } }}

3.图片的绘制以及旋转缩放的实现

        在这点上Android 确实比J2ME 强大很多  手机游戏开发最痛苦的是什么？？ 是游戏引擎的开发，但是工程师会把大部分时间浪费在对坐标上，如果写引擎的时候没有把自适应考虑周全后期会非常痛苦，现在手机屏幕分辨率是各式各样 内存大小也是各式各样 所以可见自适应屏幕算法有多么的重要。

​​view plain​​​ ​​copy to clipboard​​​ ​​print​​​ ​​?​​

1. package
2. 
   
3. import
4. import
5. import
6. import
7. import
8. import
9. import
10. import
11. import
12. import
13. import
14. import
15. 
    
16. public class Image extends
17. null;
18. 
    
19. @Override
20. protected void
21. new ImageView(this);
22. setContentView(R.layout.image);
23. LinearLayout ll = (LinearLayout) findViewById(R.id.iamgeid);
24. ll.addView(imageView);
25. // 向左移动
26. Button botton0 = (Button) findViewById(R.id.buttonLeft);
27. new
28. @Override
29. public void
30. imageView.setPosLeft();
31. }
32. });
33. 
    
34. // 向右移动
35. Button botton1 = (Button) findViewById(R.id.buttonRight);
36. new
37. @Override
38. public void
39. imageView.setPosRight();
40. }
41. });
42. // 左旋转
43. Button botton2 = (Button) findViewById(R.id.buttonRotationLeft);
44. new
45. @Override
46. public void
47. imageView.setRotationLeft();
48. }
49. });
50. 
    
51. // 右旋转
52. Button botton3 = (Button) findViewById(R.id.buttonRotationRight);
53. new
54. @Override
55. public void
56. imageView.setRotationRight();
57. }
58. });
59. 
    
60. // 缩小
61. Button botton4 = (Button) findViewById(R.id.buttonNarrow);
62. new
63. 
    
64. @Override
65. public void
66. imageView.setNarrow();
67. }
68. });
69. 
    
70. // 放大
71. Button botton5 = (Button) findViewById(R.id.buttonEnlarge);
72. new
73. 
    
74. @Override
75. public void
76. imageView.setEnlarge();
77. }
78. });
79. 
    
80. super.onCreate(savedInstanceState);
81. 
    
82. }
83. 
    
84. class ImageView extends
85. null;
86. null;
87. null;
88. int m_posX = 120;
89. int m_posY = 50;
90. int m_bitMapWidth = 0;
91. int m_bitMapHeight = 0;
92. null;
93. float mAngle = 0.0f;
94. float mScale = 1f;//1为原图的大小
95. 
    
96. public
97. super(context);
98. new
99. mPaint.setFlags(Paint.ANTI_ALIAS_FLAG);
100. this.getResources(),
101. R.drawable.image);
102. bitMapDisplay = bitMap;
103. new
104. // 获取图片宽高
105. m_bitMapWidth = bitMap.getWidth();
106. m_bitMapHeight = bitMap.getHeight();
107. }
108. 
     
109. // 向左移动
110. public void
111. 10;
112. }
113. 
     
114. // 向右移动
115. public void
116. 10;
117. }
118. 
     
119. // 向左旋转
120. public void
121. mAngle--;
122. setAngle();
123. }
124. 
     
125. // 向右旋转
126. public void
127. mAngle++;
128. setAngle();
129. }
130. 
     
131. // 缩小图片
132. public void
133. if (mScale > 0.5) {
134. 0.1;
135. setScale();
136. }
137. }
138. 
     
139. // 放大图片
140. public void
141. if (mScale < 2) {
142. 0.1;
143. setScale();
144. }
145. }
146. 
     
147. // 设置缩放比例
148. public void
149. mMatrix.reset();
150. mMatrix.setRotate(mAngle);
151. 0, 0, m_bitMapWidth,
152. true);
153. }
154. 
     
155. // 设置旋转比例
156. public void
157. mMatrix.reset();
158. //float sx X轴缩放
159. //float sy Y轴缩放
160. mMatrix.postScale(mScale, mScale);
161. 0, 0, m_bitMapWidth,
162. true);
163. }
164. 
     
165. @Override
166. protected void
167. super.onDraw(canvas);
168. canvas.drawBitmap(bitMapDisplay, m_posX, m_posY, mPaint);
169. invalidate();
170. }
171. }
172. }

package cn.m15.xys;import android.app.Activity;import android.content.Context;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.graphics.Canvas;import android.graphics.Matrix;import android.graphics.Paint;import android.os.Bundle;import android.view.View;import android.view.View.OnClickListener;import android.widget.Button;import android.widget.LinearLayout;public class Image extends Activity { ImageView imageView = null; @Override protected void onCreate(Bundle savedInstanceState) {imageView = new ImageView(this);setContentView(R.layout.image);LinearLayout ll = (LinearLayout) findViewById(R.id.iamgeid);ll.addView(imageView);// 向左移动Button botton0 = (Button) findViewById(R.id.buttonLeft);botton0.setOnClickListener(new OnClickListener() { @Override public void onClick(View arg0) {imageView.setPosLeft(); }});// 向右移动Button botton1 = (Button) findViewById(R.id.buttonRight);botton1.setOnClickListener(new OnClickListener() { @Override public void onClick(View arg0) {imageView.setPosRight(); }});// 左旋转Button botton2 = (Button) findViewById(R.id.buttonRotationLeft);botton2.setOnClickListener(new OnClickListener() { @Override public void onClick(View arg0) {imageView.setRotationLeft(); }});// 右旋转Button botton3 = (Button) findViewById(R.id.buttonRotationRight);botton3.setOnClickListener(new OnClickListener() { @Override public void onClick(View arg0) {imageView.setRotationRight(); }});// 缩小Button botton4 = (Button) findViewById(R.id.buttonNarrow);botton4.setOnClickListener(new OnClickListener() { @Override public void onClick(View arg0) {imageView.setNarrow(); }});// 放大Button botton5 = (Button) findViewById(R.id.buttonEnlarge);botton5.setOnClickListener(new OnClickListener() { @Override public void onClick(View arg0) {imageView.setEnlarge(); }});super.onCreate(savedInstanceState); } class ImageView extends View {Paint mPaint = null;Bitmap bitMap = null;Bitmap bitMapDisplay = null;int m_posX = 120;int m_posY = 50;int m_bitMapWidth = 0;int m_bitMapHeight = 0;Matrix mMatrix = null;float mAngle = 0.0f;float mScale = 1f;//1为原图的大小public ImageView(Context context) { super(context); mPaint = new Paint(); mPaint.setFlags(Paint.ANTI_ALIAS_FLAG); bitMap = BitmapFactory.decodeResource(this.getResources(), R.drawable.image); bitMapDisplay = bitMap; mMatrix = new Matrix(); // 获取图片宽高 m_bitMapWidth = bitMap.getWidth(); m_bitMapHeight = bitMap.getHeight();}// 向左移动public void setPosLeft() { m_posX -= 10;}// 向右移动public void setPosRight() { m_posX += 10;}// 向左旋转public void setRotationLeft() { mAngle--; setAngle();}// 向右旋转public void setRotationRight() { mAngle++; setAngle();}// 缩小图片public void setNarrow() { if (mScale > 0.5) {mScale -= 0.1;setScale(); }}// 放大图片public void setEnlarge() { if (mScale < 2) {mScale += 0.1;setScale(); }}// 设置缩放比例public void setAngle() { mMatrix.reset(); mMatrix.setRotate(mAngle); bitMapDisplay = Bitmap.createBitmap(bitMap, 0, 0, m_bitMapWidth, m_bitMapHeight, mMatrix, true);}// 设置旋转比例public void setScale() { mMatrix.reset(); //float sx X轴缩放 //float sy Y轴缩放 mMatrix.postScale(mScale, mScale); bitMapDisplay = Bitmap.createBitmap(bitMap, 0, 0, m_bitMapWidth, m_bitMapHeight, mMatrix, true);}@Overrideprotected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.drawBitmap(bitMapDisplay, m_posX, m_posY, mPaint); invalidate();} }}

​​view plain​​​ ​​copy to clipboard​​​ ​​print​​​ ​​?​​

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:id="@+id/iamgeid"
4. android:orientation="vertical"
5. android:layout_width="fill_parent"
6. android:layout_height="fill_parent"
7. >
8. <Button android:id="@+id/buttonLeft"
9. android:layout_width="fill_parent" android:layout_height="wrap_content"
10. android:text="图片向左移动"
11. />
12. <Button android:id="@+id/buttonRight"
13. android:layout_width="fill_parent" android:layout_height="wrap_content"
14. android:text="图片向右移动"
15. />
16. <Button android:id="@+id/buttonRotationLeft"
17. android:layout_width="fill_parent" android:layout_height="wrap_content"
18. android:text="图片左旋转"
19. />
20. <Button android:id="@+id/buttonRotationRight"
21. android:layout_width="fill_parent" android:layout_height="wrap_content"
22. android:text="图片右旋转"
23. />
24. <Button android:id="@+id/buttonNarrow"
25. android:layout_width="fill_parent" android:layout_height="wrap_content"
26. android:text="图片缩小"
27. />
28. <Button android:id="@+id/buttonEnlarge"
29. android:layout_width="fill_parent" android:layout_height="wrap_content"
30. android:text="图片放大"
31. />
32. </LinearLayout>

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/iamgeid" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <Button android:id="@+id/buttonLeft" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="图片向左移动" /> <Button android:id="@+id/buttonRight" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="图片向右移动" /> <Button android:id="@+id/buttonRotationLeft" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="图片左旋转" /> <Button android:id="@+id/buttonRotationRight" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="图片右旋转" /> <Button android:id="@+id/buttonNarrow" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="图片缩小" /> <Button android:id="@+id/buttonEnlarge" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="图片放大" /></LinearLayout>

4.播放frame动画

        做游戏的话播放动画可就是必不可少的元素 帧动画帧动画 顾名思义是一帧一帧的播放 。 实际在开发中为了节省内存美术会把人物的图片切成一小块一小块然后由程序根据编辑器生成的点把图片在拼接起来这样就可以做到用更少的图片去实现更多的动画效果因为不太方便介绍图片编辑器 这个demo我只给大家简单的介绍一下播放动画的原理 后期我会深入讲解。

               如图所示这个小人一直在行走 实际上是4张图片在来回切换 每张图片延迟500毫秒 后播下一张 以此类推。

​​view plain​​​ ​​copy to clipboard​​​ ​​print​​​ ​​?​​

1. package
2. 
   
3. import
4. import
5. import
6. import
7. import
8. import
9. import
10. import
11. import
12. 
    
13. public class FramAnimation extends
14. public final static int ANIM_COUNT = 4;
15. 
    
16. @Override
17. protected void
18. new FramView(this));
19. super.onCreate(savedInstanceState);
20. 
    
21. }
22. 
    
23. class FramView extends
24. new
25. null;
26. null;
27. long startTime = 0;
28. int playID = 0;
29. 
    
30. public
31. super(context);
32. for (int i = 0; i < ANIM_COUNT; i++) {
33. this.getResources(),
34. R.drawable.hero_a + i);
35. }
36. 0];
37. new
38. startTime = System.currentTimeMillis();
39. }
40. 
    
41. @Override
42. protected void
43. super.onDraw(canvas);
44. paint.setColor(Color.WHITE);
45. "播放动画中...", 100, 30, paint);
46. long
47. if (nowTime - startTime >= 500) {
48. startTime=nowTime;
49. playID++;
50. if
51. 0;
52. }
53. 100, 100, paint);
54. }
55. invalidate();
56. }
57. }
58. 
    
59. }