效果圖

重寫(xiě)一個(gè)view一般情況下只需要重寫(xiě)OnDraw方法。那么什么時(shí)候需要重寫(xiě)OnMeasure、OnLayout、OnDraw方法呢，這個(gè)問(wèn)題只要把這幾個(gè)方法的功能弄清楚你就應(yīng)該知道怎么做了。

①如果需要改變View繪制的圖像，那么需要重寫(xiě)OnDraw方法。（這也是最常用的重寫(xiě)方式。）

②如果需要改變view的大小，那么需要重寫(xiě)OnMeasure方法。

③如果需要改變View的（在父控件的）位置，那么需要重寫(xiě)OnLayout方法。

④根據(jù)上面三種不同的需要你可以組合出多種重寫(xiě)方案，你懂的。

LockPatternView

package com.example.liuan.jiugongge;import android.content.Context; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Point; import android.text.TextUtils; import android.util.AttributeSet; import android.util.TypedValue; import android.view.MotionEvent; import android.view.View;import java.util.ArrayList; import java.util.List;/*** 圖案解鎖* Name: LockPatternView* Author: liuan* creatTime:2017-01-11 20:45*/public class LockPatternView extends View {// 正常狀態(tài)的顏色private static final int SELECTED_COLOR = 0xFF979797;// 正常狀態(tài)的顏色private static final int NORMAL_COLOR = 0xFF70DBDB;private Paint mCiclePaint;private Paint mLinePoaint;private float mRadius;//圓心數(shù)組private PointView[][] mPointViewArray = new PointView[3][3];//保存選中點(diǎn)的集合private List<PointView> mSelectedPointViewList;//解鎖團(tuán)的邊長(zhǎng)private int mPatternWidth;//每個(gè)圓圈的下標(biāo)private int mIndex = 1;//正在滑動(dòng) 并且沒(méi)有任何點(diǎn)選中private boolean mIsMovingWithoutCircle = false;//是否繪制結(jié)束private boolean mIsFinsihed;private float mCurrentX, mCurrentY;//圖案監(jiān)聽(tīng)器private OnPatternChangeListener mOnPatternChangeListener;//第一個(gè)點(diǎn)是否選中private boolean mIsSelected;public LockPatternView(Context context) {this(context, null);}public LockPatternView(Context context, AttributeSet attrs) {super(context, attrs);//圓的畫(huà)筆mCiclePaint = new Paint();mCiclePaint.setAntiAlias(true);mCiclePaint.setDither(true);mCiclePaint.setColor(NORMAL_COLOR);mCiclePaint.setStyle(Paint.Style.FILL);//線的畫(huà)筆mLinePoaint = new Paint();mLinePoaint.setAntiAlias(true);mLinePoaint.setDither(true);mLinePoaint.setStrokeWidth(20);mLinePoaint.setColor(SELECTED_COLOR);mLinePoaint.setStyle(Paint.Style.STROKE);mRadius = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20, getResources().getDisplayMetrics());mSelectedPointViewList = new ArrayList<>();}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);//獲取屏幕長(zhǎng)和寬中的較小值作為圖案的邊長(zhǎng)mPatternWidth = Math.min(getMeasuredHeight(), getMeasuredWidth());setMeasuredDimension(mPatternWidth, mPatternWidth);}@Overrideprotected void onDraw(Canvas canvas) {//畫(huà)圓drawCicle(canvas);//將選中的圓 重新繪制一遍 將選中的點(diǎn)和未選中的點(diǎn)區(qū)別開(kāi)來(lái)for (PointView pointView : mSelectedPointViewList) {mCiclePaint.setColor(SELECTED_COLOR);canvas.drawCircle(pointView.x, pointView.y, mRadius, mCiclePaint);//每重新繪制一個(gè)，將畫(huà)筆的顏色重置 保證不會(huì)影響到其他圓的繪制mCiclePaint.setColor(NORMAL_COLOR);}//點(diǎn)與點(diǎn)畫(huà)線if (mSelectedPointViewList.size() > 0) {//第一個(gè)選中的點(diǎn)為A點(diǎn)Point pointViewA = mSelectedPointViewList.get(0);for (int i = 0; i < mSelectedPointViewList.size(); i++) {//其余的點(diǎn)為B點(diǎn)Point pointViewB = mSelectedPointViewList.get(i);drawLine(canvas, pointViewA, pointViewB);pointViewA = pointViewB;}//點(diǎn)于鼠標(biāo)當(dāng)前位置繪制軌跡if (mIsMovingWithoutCircle & !mIsFinsihed) {drawLine(canvas, pointViewA, new PointView((int) mCurrentX, (int) mCurrentY));}}super.onDraw(canvas);}private void drawCicle(Canvas canvas) {//canvas 畫(huà)布//初始點(diǎn)的位置for (int i = 0; i < mPointViewArray.length; i++) {for (int j = 0; j < mPointViewArray.length; j++) {//圓心坐標(biāo)int cx = mPatternWidth / 4 * (j + 1);int cy = mPatternWidth / 4 * (i + 1);//將圓心放在一個(gè)點(diǎn)數(shù)組中PointView pointView = new PointView(cx, cy);pointView.setIndex(mIndex);mPointViewArray[i][j] = pointView;canvas.drawCircle(cx, cy, mRadius, mCiclePaint);mIndex++;}}mIndex = 1;}private void drawLine(Canvas canvas, Point pointA, Point pointB) {canvas.drawLine(pointA.x, pointA.y, pointB.x, pointB.y, mLinePoaint);}@Overridepublic boolean onTouchEvent(MotionEvent event) {mCurrentX = event.getX();mCurrentY = event.getY();PointView selectedPointView = null;switch (event.getAction()) {case MotionEvent.ACTION_DOWN://重新繪制if (mOnPatternChangeListener != null) {mOnPatternChangeListener.onPatternStarted(true);}mSelectedPointViewList.clear();mIsFinsihed = false;selectedPointView = checkSelectPoint();if (selectedPointView != null) {//第一次按下的位置在圓內(nèi)，被選中mIsSelected = true;}break;case MotionEvent.ACTION_MOVE:if (mIsSelected) {selectedPointView = checkSelectPoint();}if (selectedPointView == null) {mIsMovingWithoutCircle = true;}break;case MotionEvent.ACTION_UP:mIsFinsihed = true;mIsSelected = false;break;}//將選中的點(diǎn)收藏起來(lái)if (!mIsFinsihed && mIsSelected && selectedPointView != null) {if (!mSelectedPointViewList.contains(selectedPointView)) {mSelectedPointViewList.add(selectedPointView);}}if (mIsFinsihed) {if (mSelectedPointViewList.size() == 1) {mSelectedPointViewList.clear();} else if (mSelectedPointViewList.size() < 5 && mSelectedPointViewList.size() > 0) {//繪制錯(cuò)誤if (mOnPatternChangeListener != null) {mOnPatternChangeListener.onPatternChange(null);}} else {//繪制成功String patternPassword = "";if (mOnPatternChangeListener != null) {for (PointView pointView : mSelectedPointViewList) {patternPassword += pointView.getIndex();}if (!TextUtils.isEmpty(patternPassword)) {mOnPatternChangeListener.onPatternChange(patternPassword);}}}}invalidate();return true;}/*** 判斷當(dāng)前按下的位置是否在圓心數(shù)組中** @return 返回選中的點(diǎn)*/private PointView checkSelectPoint() {for (int i = 0; i < mPointViewArray.length; i++) {for (int j = 0; j < mPointViewArray.length; j++) {PointView pointView = mPointViewArray[i][j];if (isWithInCircle(mCurrentX, mCurrentY,pointView.x,pointView.y,mRadius)) {return pointView;}}}return null;}private boolean isWithInCircle(float mCurrentX, float mCurrentY, int x, int y, float mRadius) {//如果點(diǎn)和圓心的距離 小于半徑，則證明在圓內(nèi)if (Math.sqrt(Math.pow(x - mCurrentX, 2) + Math.pow(y - mCurrentY, 2)) < mRadius) {return true;}return false;}public void setOnPatternChangeListener(OnPatternChangeListener onPatternChangeListener) {if (onPatternChangeListener != null) {this.mOnPatternChangeListener = onPatternChangeListener;}}/*** 圖案監(jiān)聽(tīng)器*/public interface OnPatternChangeListener {//圖案改變 圖案密碼patternPasswordvoid onPatternChange(String patternPassword);//圖案是否重新繪制void onPatternStarted(boolean isStarted);} }

PointView

package com.example.liuan.jiugongge;import android.graphics.Point;/*** 自定義點(diǎn)對(duì)象* Name: PointView* Author: liuan* creatTime:2017-01-11 21:02*/ public class PointView extends Point{//用于轉(zhuǎn)化密碼的下標(biāo)public int index;public PointView(int x, int y) {super(x, y);}public int getIndex(){return index;}public void setIndex(int index) {this.index = index;} }

MainActivity

package com.example.liuan.jiugongge;import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.widget.TextView;public class MainActivity extends AppCompatActivity implements LockPatternView.OnPatternChangeListener {private LockPatternView lpv;private TextView tv;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);lpv = (LockPatternView) findViewById(R.id.lock_pattern_view);tv = (TextView) findViewById(R.id.text);lpv.setOnPatternChangeListener(this);}@Overridepublic void onPatternChange(String patternPassword) {if(patternPassword==null){tv.setText("請(qǐng)至少5個(gè)點(diǎn)");}else{tv.setText(patternPassword);}}@Overridepublic void onPatternStarted(boolean isStarted) {if(isStarted){tv.setText("請(qǐng)繪制圖案");}} }

布局

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/activity_main"android:layout_width="match_parent"android:layout_height="match_parent" android:orientation="vertical"tools:context="com.example.liuan.jiugongge.MainActivity"><TextViewandroid:layout_gravity="center"android:id="@+id/text"android:textColor="#18b968"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="狀態(tài)顯示" /><com.example.liuan.jiugongge.LockPatternViewandroid:clickable="true"android:id="@+id/lock_pattern_view"android:layout_weight="1"android:layout_width="match_parent"android:layout_height="0dp" /> </LinearLayout>

總結(jié)

以上是生活随笔為你收集整理的九宫格解锁Android代码的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。