Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android開發 >> 關於android開發 >> Android應用開發教程之二:最全的自定義View界面用法匯總

Android應用開發教程之二:最全的自定義View界面用法匯總

編輯:關於android開發

       今天我用自己寫的一個Demo 和大家詳細介紹一個Android中自定義View中的使用與繪制技巧。

Android游戲開發教程之二:最全的自定義View界面用法匯總

       1.自定義view繪制字符串

       相信在實際開發過程中必然很多地方都須要用到系統字 為什麼會用到系統字? 方便、省內存。我相信做過J2ME游戲開發的朋友應該深知內存有多麼多麼重要,而且使用它還可以帶來一個更重要的好處就是可以很方便的實現多國語言的切換。筆者現在在正在做的一個產品就是可以多語言切換的軟件,有英語、繁體中文等等。設想如果使用圖片字的話那每個語言都須要出一套圖,我用一個例子簡單介紹一下繪制字符串。 

Android游戲開發教程之二:最全的自定義View界面用法匯總

Java代碼
  1. package cn.m15.xys;    
  2.    
  3. import android.app.Activity;    
  4. import android.content.Context;    
  5. import android.graphics.Canvas;    
  6. import android.graphics.Color;    
  7. import android.graphics.Paint;    
  8. import android.graphics.Paint.FontMetrics;    
  9. import android.os.Bundle;    
  10. import android.view.Display;    
  11. import android.view.View;    
  12.    
  13. public class Font extends Activity {    
  14.     public int mScreenWidth = 0;    
  15.     public int mScreenHeight = 0;    
  16.     @Override    
  17.     protected void onCreate(Bundle savedInstanceState) {    
  18.     setContentView(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 View {    
  28.         public final static String STR_WIDTH = "獲取字符串寬為:";     
  29.         public final static String STR_HEIGHT = "獲取字體高度為:";     
  30.         Paint mPaint = null;    
  31.             
  32.     public FontView(Context context) {    
  33.         super(context);    
  34.         mPaint = new Paint();    
  35.     }    
  36.    
  37.     @Override    
  38.     protected void onDraw(Canvas canvas) {    
  39.         //設置字符串顏色    
  40.         mPaint.setColor(Color.WHITE);    
  41.         canvas.drawText("當前屏幕寬" + mScreenWidth, 0, 30, mPaint);    
  42.         canvas.drawText("當前屏幕高"+ mScreenHeight, 0, 60, mPaint);    
  43.         //設置字體大小    
  44.         mPaint.setColor(Color.RED);    
  45.         mPaint.setTextSize(18);    
  46.         canvas.drawText("字體大小為18", 0, 90, mPaint);    
  47.         //消除字體鋸齒    
  48.         mPaint.setFlags(Paint.ANTI_ALIAS_FLAG);    
  49.         canvas.drawText("消除字體鋸齒後", 0, 120, mPaint);    
  50.         //獲取字符串寬度    
  51.         canvas.drawText(STR_WIDTH + getStringWidth(STR_WIDTH), 0, 150, mPaint);    
  52.         //獲取字體高度    
  53.         canvas.drawText(STR_HEIGHT + getFontHeight(), 0, 180, mPaint);    
  54.         //從string.xml讀取字符串繪制    
  55.         mPaint.setColor(Color.YELLOW);    
  56.         canvas.drawText(getResources().getString(R.string.string_font), 0, 210, mPaint);    
  57.         super.onDraw(canvas);    
  58.     }    
  59.         
  60.     /**   
  61.      * 獲取字符串寬   
  62.      * @param str   
  63.      * @return   
  64.      */    
  65.     private int getStringWidth(String str) {    
  66.         return (int) mPaint.measureText(STR_WIDTH);     
  67.     }    
  68.     /*   
  69.      * 獲取字體高度   
  70.      */    
  71.     private int getFontHeight() {    
  72.         FontMetrics fm = mPaint.getFontMetrics();    
  73.         return (int)Math.ceil(fm.descent - fm.top) + 2;    
  74.     }    
  75.     }    
  76. }   

       2.繪制無規則幾何圖形

       繪制無規則幾何圖形似乎在實際工作中很少可以用到 原因是用程序去繪制圖形即使在精准再好看也不會有美術出的圖片好看 但是使用程序繪制圖形作為學習來說卻是基礎中的基礎,所以建議大家都看一看。

Android游戲開發教程之二:最全的自定義View界面用法匯總

Java代碼
  1. package cn.m15.xys;    
  2.    
  3. import android.app.Activity;    
  4. import android.content.Context;    
  5. import android.graphics.Canvas;    
  6. import android.graphics.Color;    
  7. import android.graphics.Paint;    
  8. import android.graphics.Path;    
  9. import android.graphics.RectF;    
  10. import android.os.Bundle;    
  11. import android.view.View;    
  12.    
  13. public class Geometry extends Activity {    
  14.     public int mScreenWidth = 0;    
  15.     public int mScreenHeight = 0;    
  16.    
  17.     @Override    
  18.     protected void onCreate(Bundle savedInstanceState) {    
  19.     setContentView(new GeometryView(this));    
  20.     super.onCreate(savedInstanceState);    
  21.    
  22.     }    
  23.    
  24.     class GeometryView extends View {    
  25.     Paint mPaint = null;    
  26.    
  27.     public GeometryView(Context context) {    
  28.         super(context);    
  29.         mPaint = new Paint();    
  30.         mPaint.setFlags(Paint.ANTI_ALIAS_FLAG);    
  31.     }    
  32.    
  33.     @Override    
  34.     protected void onDraw(Canvas canvas) {    
  35.         super.onDraw(canvas);    
  36.         
  37.         //設置畫布顏色 也就是背景顏色    
  38.         canvas.drawColor(Color.WHITE);    
  39.            
  40.         mPaint.setColor(Color.BLACK);    
  41.         canvas.drawText("繪制無規則幾何圖形喔!!!", 150, 30, mPaint);    
  42.             
  43.         //繪制一條線    
  44.         mPaint.setColor(Color.BLACK);    
  45.         mPaint.setStrokeWidth(4);    
  46.         canvas.drawLine(0, 0, 100, 100, mPaint);    
  47.             
  48.         //繪制一個矩形    
  49.         mPaint.setColor(Color.YELLOW);    
  50.         canvas.drawRect(0, 120, 100, 200, mPaint);    
  51.             
  52.         //繪制一個圓形    
  53.         mPaint.setColor(Color.BLUE);    
  54.         canvas.drawCircle(80, 300, 50, mPaint);    
  55.             
  56.         //繪制一個橢圓    
  57.         mPaint.setColor(Color.CYAN);    
  58.         canvas.drawOval(new RectF(300,370,120,100), mPaint);    
  59.             
  60.         //繪制多邊形    
  61.         mPaint.setColor(Color.BLACK);    
  62.         Path path = new Path();    
  63.         path.moveTo(150+5 , 400 -50);    
  64.         path.lineTo(150+45, 400 - 50);    
  65.         path.lineTo(150+30, 460 - 50);    
  66.         path.lineTo(150+20, 460 - 50);    
  67.         path.close();    
  68.         canvas.drawPath(path, mPaint);    
  69.             
  70.     }    
  71.     }    
  72. }   

       3.圖片的繪制以及旋轉縮放的實現

       在這點上Android 確實比J2ME 強大很多 手機游戲開發最痛苦的是什麼?? 是游戲引擎的開發,但是工程師會把大部分時間浪費在對坐標上,如果寫引擎的時候沒有把自適應考慮周全後期會非常痛苦,現在手機屏幕分辨率是各式各樣 內存大小也是各式各樣 所以可見自適應屏幕算法有多麼的重要。

Android游戲開發教程之二:最全的自定義View界面用法匯總

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

       4.播放frame動畫

       做游戲的話播放動畫可就是必不可少的元素 幀動畫幀動畫 顧名思義是一幀一幀的播放 。 實際在開發中為了節省內存美術會把人物的圖片切成一小塊一小塊然後由程序根據編輯器生成的點把圖片在拼接起來這樣就可以做到用更少的圖片去實現更多的動畫效果因為不太方便介紹圖片編輯器 這個demo我只給大家簡單的介紹一下播放動畫的原理 後期我會深入講解。

       如圖所示這個小人一直在行走 實際上是4張圖片在來回切換 每張圖片延遲500毫秒 後播下一張 以此類推。

Android游戲開發教程之二:最全的自定義View界面用法匯總

Java代碼
  1. package cn.m15.xys;    
  2.    
  3. import android.app.Activity;    
  4. import android.content.Context;    
  5. import android.graphics.Bitmap;    
  6. import android.graphics.BitmapFactory;    
  7. import android.graphics.Canvas;    
  8. import android.graphics.Color;    
  9. import android.graphics.Paint;    
  10. import android.os.Bundle;    
  11. import android.view.View;    
  12.    
  13. public class FramAnimation extends Activity {    
  14.     public final static int ANIM_COUNT = 4;    
  15.    
  16.     @Override    
  17.     protected void onCreate(Bundle savedInstanceState) {    
  18.     setContentView(new FramView(this));    
  19.     super.onCreate(savedInstanceState);    
  20.    
  21.     }    
  22.    
  23.     class FramView extends View {    
  24.     Bitmap[] bitmap = new Bitmap[ANIM_COUNT];    
  25.     Bitmap display = null;    
  26.     Paint paint = null;    
  27.     long startTime = 0;    
  28.     int playID = 0;    
  29.    
  30.     public FramView(Context context) {    
  31.         super(context);    
  32.         for (int i = 0; i < ANIM_COUNT; i++) {    
  33.         bitmap[i] = BitmapFactory.decodeResource(this.getResources(),    
  34.             R.drawable.hero_a + i);    
  35.         }    
  36.         display = bitmap[0];    
  37.         paint = new Paint();    
  38.         startTime = System.currentTimeMillis();    
  39.     }    
  40.    
  41.     @Override    
  42.     protected void onDraw(Canvas canvas) {    
  43.         super.onDraw(canvas);    
  44.         paint.setColor(Color.WHITE);    
  45.         canvas.drawText("播放動畫中...", 100, 30, paint);    
  46.         long nowTime = System.currentTimeMillis();    
  47.         if (nowTime - startTime >= 500) {    
  48.         startTime=nowTime;    
  49.         playID++;    
  50.         if (playID >= ANIM_COUNT) {    
  51.             playID = 0;    
  52.         }    
  53.         canvas.drawBitmap(bitmap[playID], 100, 100, paint);    
  54.         }    
  55.         invalidate();    
  56.     }    
  57.     }    
  58.    
  59. }   

        源碼下載地址:http://download.csdn.net/source/3448152

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved