分析自定義view的實現過程-實現雪花飛舞效果（轉載有改動）

時間 2019-11-18

標籤分析自定義 view 實現過程雪花飛舞效果轉載改動简体版

原文原文鏈接

聲明：本文源碼出自實現雪花飛舞效果（有改動）主要經過這篇文來分析自定義view的實現過程。php

沒事時，比較喜歡上網看看一些新的東西，泡在網上的日子就是一個很不錯的網站。html

下面開始了，哈哈。^_^java

　　你們都知道，自定義view分紅三個類型，一、是徹底自定義，本身繪製，例如本文講的例子。二、是Groupview，就是把一些安卓原生提供的控件組合起來，作成一個有多種功能的組合控件，如前面寫過的android-oldman之TitleBar.就是這種。三、就是繼承自安卓原來的控件，而後增長修改爲本身須要的功能。如extends TextVeiw後，再裏面作一些更改，text的位置，長度什麼的。相比2,與3，第1種自定義view就是要繼承自view，而後根據須要，測量，繪製。android

　　最終要的效果是：看到沒有，上面一些彩色的點，就是原來的雪花，固然，你能夠經過修改參數，改變雪花數量。canvas

下面就開始貼代碼了，哈哈哈。數組

首先，先是定義viewdom

 1 package com.example.jwwsnow;
 2 
 3 import java.util.ArrayList;
 4 import java.util.HashMap;
 5 import java.util.List;
 6 
 7 import android.content.Context;
 8 import android.graphics.Canvas;
 9 import android.graphics.Color;
10 import android.graphics.Paint;
11 import android.util.AttributeSet;
12 import android.util.Log;
13 import android.view.View;
14 
15 public class SnowView extends View {
16     
17     Random random;
18     private static final int NUM_SNOWFLAKES = 15;//雪花數量
19     private static final int DELAY = 1;//畫面延時刷新時間
20 
21     private SnowFlake[] snowflakes;//雪花對像數組。
22 
23     public SnowView(Context context) {
24         super(context);
25     }
26 
27     public SnowView(Context context, AttributeSet attrs) {
28         super(context, attrs);
29     }
30 
31     public SnowView(Context context, AttributeSet attrs, int defStyleAttr) {
32         super(context, attrs, defStyleAttr);
33     }
34 
35     
36     protected void resize(int width, int height) {
37         random = new Random();
38         snowflakes = new SnowFlake[NUM_SNOWFLAKES];
39         for (int i = 0; i < NUM_SNOWFLAKES; i++) {
40             //for循環生產雪花。
41             Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
42             paint.setStyle(Paint.Style.FILL);
43             paint.setColor(Color.rgb(random.getColor(), random.getColor(), random.getColor()));
44             //返回的對象存入對象數組中去。
45             snowflakes[i] = SnowFlake.create(width, height, paint);
46             Log.i("SnowDemo", "時間：：：：：：：：：："+System.currentTimeMillis());
47         }
48     }
49 
50     /**
51      * View中方法的啓動順序onSizeChanged()>onDraw();
52      */
53     @Override
54     protected void onSizeChanged(int w, int h, int oldw, int oldh) {
55         super.onSizeChanged(w, h, oldw, oldh);
56         if (w != oldw || h != oldh) {
57             resize(w, h);
58         }
59         
60     }
61 
62     @Override
63     protected void onDraw(Canvas canvas) {
64         super.onDraw(canvas);
65         for (SnowFlake snowFlake : snowflakes) {
66             //獲得雪花對象，繪製。
67             snowFlake.draw(canvas);
68         }
69         
70         getHandler().postDelayed(runnable, DELAY);//獲得子線程，設置5ms延時，每5ms在主線程繪製一次界面。。
71     }
72 
73     private Runnable runnable = new Runnable() {
74         @Override
75         public void run() {
76             invalidate();//此方法會把原來的視圖清除掉，並從新調用veiw.onDraw方法。
77         }
78     };
79 }

能夠看到，重寫了view中的幾個方法：eclipse

onSizeChanged（）;
這個方法，是先於onDrow方法執行的。判斷view的size是否是改變，若是改變，則由系統調用。而後纔是執行onDrow()方法。
在本例此方法中，系統經過對view的尺寸的判斷，來調用reSize()方法，並把width與heigh傳遞過去。
在reSize()方法中。定義了雪花對象數組SnowFlakes[],經過for循環，建立指定數量的雪花對象，並在for循環中建立Paint對象，設置畫筆。（ps:Paint與Canvas,paint就像咱們平時作畫用的畫筆，咱們能夠選擇畫筆的顏色，粗細，抗鋸齒，空心，實心，是否是帶陰影等。Canvas，畫布，咱們能夠用畫布來承載咱們要畫的具體事物，如矩形，圓形，線等。要把ptint與canvas區分開，由於功用不一樣。canvas決定要畫的具體是什麼，print決定用什麼樣的性質去畫嘿嘿，被我說暈沒。）。而後調用下面要貼的雪花Calss的create方法。這個方法主要是設置一些尺寸，位置等的。而後把這些尺寸位置等參數狀態以對象的形式保存在SnowFalkes[]數組中，供下面的onDraw方法中去用這些參數作畫。

onDraw()方法中，for循環，依次對SnowFalkes[]對象數組中的每一個雪花進行繪畫。而後用Handler在主線程中定時重繪一次。
snowFlake.draw(canvas);方法則是具體的進行繪製了。下面先貼代碼，再接着講。

 1 package com.example.jwwsnow;
 2 
 3 import android.graphics.Canvas;
 4 import android.graphics.Paint;
 5 import android.graphics.Point;
 6 
 7 public class SnowFlake {
 8 
 9     private static final float ANGE_RANGE = 0.1f;    //
10     private static final float HALF_ANGLE_RANGE = ANGE_RANGE / 2f;
11     private static final float HALF_PI = (float) Math.PI / 2f;
12     private static final float ANGLE_SEED = 25f;
13     private static final float ANGLE_DIVISOR = 10000f;
14     private static final float INCREMENT_LOWER = 2f;
15     private static final float INCREMENT_UPPER = 4f;
16     private static final float FLAKE_SIZE_LOWER = 7f;//最小雪花大小
17     private static final float FLAKE_SIZE_UPPER = 20f;//最大雪花大小
18 
19     private final Random random;
20     private final Point position;
21     private float angle;
22     private final float increment;
23     private final float flakeSize;
24     private final Paint paint;
25 
26     public static SnowFlake create(int width, int height, Paint paint) {
27         Random random = new Random();
28         int x = random.getRandom(width);//獲得[0~width)的整數width與height都是外層view的尺寸。
29         int y = random.getRandom(height);
30         Point position = new Point(x, y);//設置雪花剛一出來的隨機位置。
31         //設置Random.getRandom(ANGLE_SEED)/ANGLE_SEED獲得[0~1)再*ANGE_RANGE獲得[0~0.1f)的數據，再減去0.05獲得[-0.05~0.05)的數據。
32         float angle = random.getRandom(ANGLE_SEED) / ANGLE_SEED * ANGE_RANGE + HALF_PI - HALF_ANGLE_RANGE;
33         //獲得[2f~4f)的隨機數據
34         float increment = random.getRandom(INCREMENT_LOWER, INCREMENT_UPPER);
35         //獲得[7f~20f)的隨機數據
36         float flakeSize = random.getRandom(FLAKE_SIZE_LOWER, FLAKE_SIZE_UPPER);
37         //返回雪花對象。
38         return new SnowFlake(random, position, angle, increment, flakeSize, paint);
39     }
40 
41     SnowFlake(Random random, Point position, float angle, float increment, float flakeSize, Paint paint) {
42         this.random = random;
43         this.position = position;
44         this.angle = angle;//[-0.05~0.05)
45         this.increment = increment;//[2f~4f)
46         this.flakeSize = flakeSize;//[7f~20f)
47         this.paint = paint;
48     }
49 
50     private void move(int width, int height) {
51         //x方向的偏移量小，y方向的大，是爲了讓雪花快點落下。
52         double x = position.x + (increment * Math.cos(angle));//Math.cos(angle)約爲1
53         double y = position.y + (increment * Math.sin(angle));//Math.sin(0.05~-0.05) = +-[0~8.7)
54       /*
55        *設置雪花的位置爲正，不跑出屏幕。[0~1)*2*ANGLE_SEED-ANGLE_SEED等於+-(0~ANGLE_SEED],爲+-(0~25f]。而後再/10000f====+-(0~0.0025],
56        *而後再加[-0.05~0.05)泥媽，快算暈了。大神們果真很差理解。（-0.0525~0.0525） 
57        */
58         
59         angle += random.getRandom(-ANGLE_SEED, ANGLE_SEED) / ANGLE_DIVISOR;
60 
61         position.set((int) x, (int) y);//設置新的位置
62 
63         if (!isInside(width, height)) {
64             //若是雪花不在view視圖內，則重設置他們的位置。
65             reset(width);
66         }
67     }
68 
69     private boolean isInside(int width, int height) {
70         //TODO 設置雪花位置
71         int x = position.x;
72         int y = position.y;
73         //判斷x座標x>雪花尺寸加1距原點的距離（負方向）。x<background寬，一樣的方式理解y。因爲上面的設置，其實x方向,雪花是不可能跑出屏幕的，只有y方向上會。
74         return x >= -flakeSize - 1 && x + flakeSize <= width && y >= -flakeSize - 1 && y - flakeSize < height;
75         
76     }
77 
78     private void reset(int width) {
79         //當雪花落到屏幕最下方如下時，從新設置雪花從
80         position.x = random.getRandom(width);//x軸設設置一個view內的隨機位置就行
81         position.y = (int) (-flakeSize - 1);//view的（0,0）點在view的左上角，因此，當y爲負時，則在view的上方。看起來像是一個新的雪花從上落下。
82         angle = random.getRandom(ANGLE_SEED) / ANGLE_SEED * ANGE_RANGE + HALF_PI - HALF_ANGLE_RANGE;
83     }
84 
85     public void draw(Canvas canvas) {
86         //繪製方法 
87         int width = canvas.getWidth();
88         int height = canvas.getHeight();//雪花所整個view高度與寬度
89         move(width, height);//雪花移動,傳的參數爲view的的北景大小。
90       //畫一個個雪花。其實就是畫一個個球。其座標，尺寸，畫筆都是原來在create方法時就定義 了的，以後保存在flakesnow數組裏了。
91         canvas.drawCircle(position.x, position.y, flakeSize, paint);
92     }
93 
94 
95 }

　　先跳到前面的onSizeChange()方法來講。能夠看到，當調用SnowFlake.create()方法後，最後返回的是：（裏面的Random對象也是從新進行封裝的，立刻貼上）ide

1 return new SnowFlake(random, position, angle, increment, flakeSize, paint);

　　這個是用來繪製SnowFlake時須要的參數。而後在onSizeChange()方法調用的reSize()方法中保存進入了雪花數組SnowFlakes[i]。post

再跳到上面大段代碼前面的接着說，在onDraw()方法中，for循環會依次繪製每一個雪花。snowFalke.draw().就是snowflakes[i] = SnowFlake snowFlake();

snowFlake再調用本身的draw()方法。因爲前面每一個SnowFlake對象都保存了每一個雪花的參數，因此在draw()中，用的就直接使用了。

雪花是要下落的，則在draw()方法中，調用move()方法，來設置每一個雪花的位置。當雪花位置跑出屏幕後再調用reset()方法，從新設置雪花從屏幕最上方從新落下。

下面是代碼中用來設置隨機數據的Random對象封裝。

 1 package com.example.jwwsnow;
 2 
 3 import java.util.ArrayList;
 4 import java.util.List;
 5 
 6 public class Random {
 7 
 8      private static final java.util.Random RANDOM = new java.util.Random();
 9 
10         public float getRandom(float lower, float upper) {
11             float min = Math.min(lower, upper);//返回二者較小的一個。
12             float max = Math.max(lower, upper);
13             return getRandom(max - min) + min;//返回的是比最大的小，比最小的大的數。
14         }
15 
16         public float getRandom(float upper) {
17             return RANDOM.nextFloat() * upper;//Random.nextFloat()生成[0~1)的數.
18         }
19 
20         public int getRandom(int upper) {
21             return RANDOM.nextInt(upper);//隨機生成比[0~upper)的數值。
22         }
23         public int getColor(){
24             return RANDOM.nextInt(255);//隨機生成[0~255)整數。
25             
26         }
27 }

而後就是使用了：xml引用，要把路徑寫完整。

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3   xmlns:tools="http://schemas.android.com/tools"
 4   android:layout_width="match_parent"
 5   android:layout_height="match_parent"
 6   tools:context="com.stylingandroid.snowfall.MainActivity">
 7 
 8   <ImageView
 9     android:id="@+id/image"
10     android:layout_width="match_parent"
11     android:layout_height="match_parent"
12     android:layout_centerInParent="true"
13     android:contentDescription="@null"
14     android:scaleType="fitCenter"
15     android:src="@drawable/tree" />
16 
17   <com.example.jwwsnow.SnowView
18     android:layout_width="match_parent"
19     android:layout_height="match_parent"
20     android:layout_alignBottom="@id/image"
21     android:layout_alignEnd="@id/image"
22     android:layout_alignLeft="@id/image"
23     android:layout_alignRight="@id/image"
24     android:layout_alignStart="@id/image"
25     android:layout_alignTop="@id/image" />
26 </RelativeLayout