色彩搭配九宫格_图文_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
色彩搭配九宫格
上传于||文档简介
&&色​彩​搭​配​九​宫​格
阅读已结束，如果下载本文需要使用0下载券
想免费下载更多文档？
定制HR最喜欢的简历
下载文档到电脑，查找使用更方便
还剩3页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢自定义View
项目中用到手势解锁，然而没有在GitHub上找到想要的样式= =，只好自己来定义了，下面来看代码~~
基本上很多应用的手势解锁全都是九宫格的，内部内就是九个小圈圈而已。那么我们就先来自定义这个小圈圈吧~
圈圈的颜色选择状态有大致有三种状态，所以我定义了一个枚举来区分
* Created by 橘子桑 on .
public enum LockState {
SELECT_STATE,
ERRER_STATE,
DEFAULT_COLOR
圈圈分为边框，内部填充色，还有内部圆。所以我定义了三个画笔来区分。
import android.content.C
import android.content.res.TypedA
import android.graphics.C
import android.graphics.C
import android.graphics.P
import android.util.AttributeS
import android.view.V
* Created by 橘子桑 on .
public class MarkerView extends View {
private boolean mInsideNodeS
protected int mContentW
protected int mContentR
protected LockState mCurrentState = LockState.DEFAULT_COLOR;
private Paint mNodeFrameP
private Paint mNodeCircleP
private Paint mNodeFullP
private int mDefaultColor = Color.parseColor("#757575");
private int mDefailtFullColor = Color.parseColor("#");
private int mNodeDefaultColor = Color.parseColor("#757575");
private int mSelectColor = Color.parseColor("#7ECEF4");
private int mFrameSelectFullColor = Color.parseColor("#647ECEF4");
private int mNodeSelectColor = Color.parseColor("#7ECEF4");
private int mErrerColor = Color.parseColor("#EC6941");
private int mErrerFullColor = Color.parseColor("#64EC6941");
private int mErrerNodeColor = Color.parseColor("#EC6941");
private int mFrameLineW
private int mNodeR
private int mNodeP
private float mTouchR
private int mN
public MarkerView(Context context, AttributeSet attrs) {
super(context, attrs);
initView(context, attrs, 0);
public MarkerView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView(context, attrs, defStyleAttr);
public MarkerView(Context context, int mDefaultColor, int mDefailtFullColor, int mNodeDefaultColor,
int mSelectColor, int mFrameSelectFullColor, int mNodeSelectColor,
int mErrerColor, int mErrerFullColor, int mErrerNodeColor,
int mFrameLineWidth, int mNodeRadius, int mNodePadding, boolean insideNodeShow) {
super(context);
this.mInsideNodeShow = insideNodeS
this.mDefaultColor = mDefaultC
this.mDefailtFullColor = mDefailtFullC
this.mNodeDefaultColor = mNodeDefaultC
this.mSelectColor = mSelectC
this.mFrameSelectFullColor = mFrameSelectFullC
this.mNodeSelectColor = mNodeSelectC
this.mErrerColor = mErrerC
this.mErrerFullColor = mErrerFullC
this.mErrerNodeColor = mErrerNodeC
this.mFrameLineWidth = mFrameLineW
this.mNodeRadius = mNodeR
this.mNodePadding = mNodeP
setPadding(mNodePadding, mNodePadding, mNodePadding, mNodePadding);
mNodeFramePaint = new Paint();
mNodeFramePaint.setColor(mDefaultColor);
mNodeFramePaint.setAntiAlias(true);
mNodeFramePaint.setStrokeWidth(mFrameLineWidth);
mNodeFramePaint.setStyle(Paint.Style.STROKE);
mNodeFullPaint = new Paint();
mNodeFullPaint.setColor(mDefailtFullColor);
mNodeFullPaint.setStyle(Paint.Style.FILL);
mNodeFullPaint.setAntiAlias(true);
mNodeCirclePaint = new Paint();
mNodeCirclePaint.setColor(mNodeDefaultColor);
mNodeCirclePaint.setStyle(Paint.Style.FILL);
mNodeCirclePaint.setAntiAlias(true);
public int getFullAlpha(int color, float ratio) {
return Color.argb((int) (Color.alpha(color) * ratio), Color.red(color), Color.green(color), Color.blue(color));
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mContentWidth = getWidth();
mContentRadius = mContentWidth / 2 - Math.abs(getPaddingLeft()) - mFrameLineWidth / 2;
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
switch (mCurrentState) {
case DEFAULT_COLOR:
mNodeFramePaint.setColor(mDefaultColor);
mNodeFullPaint.setColor(mDefailtFullColor);
mNodeCirclePaint.setColor(mNodeDefaultColor);
canvas.drawCircle(mContentWidth / 2, mContentWidth / 2, mContentRadius, mNodeFramePaint);
canvas.drawCircle(mContentWidth / 2, mContentWidth / 2, mContentRadius - mFrameLineWidth / 2, mNodeFullPaint);
if (mInsideNodeShow)
canvas.drawCircle(mContentWidth / 2, mContentWidth / 2, mNodeRadius, mNodeCirclePaint);
case ERRER_STATE:
mNodeFramePaint.setColor(mErrerColor);
mNodeFullPaint.setColor(mErrerFullColor);
mNodeCirclePaint.setColor(mErrerNodeColor);
canvas.drawCircle(mContentWidth / 2, mContentWidth / 2, mContentRadius, mNodeFramePaint);
canvas.drawCircle(mContentWidth / 2, mContentWidth / 2, mContentRadius - mFrameLineWidth / 2, mNodeFullPaint);
canvas.drawCircle(mContentWidth / 2, mContentWidth / 2, mNodeRadius, mNodeCirclePaint);
case SELECT_STATE:
mNodeFramePaint.setColor(mSelectColor);
mNodeFullPaint.setColor(mFrameSelectFullColor);
mNodeCirclePaint.setColor(mNodeSelectColor);
canvas.drawCircle(mContentWidth / 2, mContentWidth / 2, mContentRadius, mNodeFramePaint);
canvas.drawCircle(mContentWidth / 2, mContentWidth / 2, mContentRadius - mFrameLineWidth / 2, mNodeFullPaint);
canvas.drawCircle(mContentWidth / 2, mContentWidth / 2, mNodeRadius, mNodeCirclePaint);
public void setState(LockState CurrentState) {
mCurrentState = CurrentS
invalidate();
public boolean isHighLighted() {
if (mCurrentState == LockState.SELECT_STATE || mCurrentState == LockState.ERRER_STATE) {
return true;
return false;
public int getCenterX() {
return (getLeft() + getRight()) / 2;
public int getCenterY() {
return (getTop() + getBottom()) / 2;
protected void setNum(int num) {
protected int getNum() {
以上就是一个简单的圆了
那么，自定义View当然会有自定义属性，所以有这么多T0T，不要问我为什么这么多属性，任性= =（其实我还想写更多），
name="lineColor" format="color" /&
name="lineWidth" format="dimension" /&
name="defaultColor" format="color" /&
name="defaultFullColor" format="color" /&
name="defaultNodeColor" format="color" /&
name="selectColor" format="color" /&
name="selectFrameFullColor" format="color" /&
name="selectNodeColor" format="color" /&
name="errorColor" format="color" /&
name="errorFullColor" format="color" /&
name="errorNodeColor" format="color" /&
name="frameLineWidth" format="dimension" /&
name="nodeRadius" format="dimension" /&
name="nodePadding" format="dimension" /&
name="touchRatio" format="float" /&
name="insideNodeShow" format="boolean"/&
LockView的代码
import android.content.C
import android.content.res.TypedA
import android.graphics.C
import android.graphics.C
import android.graphics.P
import android.util.AttributeS
import android.view.MotionE
import android.view.ViewG
import java.util.ArrayL
* Created by 橘子桑 on .
public class LockView extends ViewGroup {
private Paint mLineP
private float mTouchR
protected int mLineC
protected float mLineW
ArrayList&MarkerView& mNodeViews = new ArrayList&&();
protected StringBuilder pawBuilder = new StringBuilder();
protected float
protected float
private onLockCallback mOnLockC
protected int mDefaultC
protected int mSelectC
protected int mErrerC
private boolean mLockS
private boolean isT
private boolean mLineTop = false;
private boolean mFingerLeaveRedraw = true;
public LockView(Context context) {
this(context, null);
public LockView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
public LockView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView(context, attrs, defStyleAttr);
protected void initView(Context context, AttributeSet attrs, int defStyleAttr) {
TypedArray r = context.obtainStyledAttributes(attrs, R.styleable.MarkerView);
boolean insideNodeShow = r.getBoolean(R.styleable.LockView_insideNodeShow, false);
mDefaultColor = r.getColor(R.styleable.LockView_defaultColor, context.getResources().getColor(android.R.color.holo_blue_dark));
int mDefailtFullColor = r.getColor(R.styleable.LockView_defaultFullColor, getFullAlpha(mDefaultColor, 0.3F));
int mNodeDefaultColor = (int) r.getColor(R.styleable.LockView_defaultNodeColor, mDefaultColor);
mSelectColor = (int) r.getColor(R.styleable.LockView_selectColor, context.getResources().getColor(android.R.color.holo_blue_light));
int mFrameSelectFullColor = r.getColor(R.styleable.LockView_selectFrameFullColor, getFullAlpha(mSelectColor, 0.3F));
int mNodeSelectColor = r.getColor(R.styleable.LockView_selectNodeColor, mSelectColor);
mErrerColor = r.getColor(R.styleable.LockView_errorColor, context.getResources().getColor(android.R.color.holo_red_light));
int mErrerFullColor = r.getColor(R.styleable.LockView_errorFullColor, getFullAlpha(mErrerColor, 0.3F));
int mErrerNodeColor = r.getColor(R.styleable.LockView_errorNodeColor, mErrerColor);
int mFrameLineWidth = (int) r.getDimension(R.styleable.LockView_frameLineWidth, DensityUtils.dip2px(context, 5));
int mNodeRadius = (int) r.getDimension(R.styleable.LockView_nodeRadius, DensityUtils.dip2px(context, 5));
int mNodePadding = (int) r.getDimension(R.styleable.LockView_nodePadding, DensityUtils.dip2px(context, 10));
mTouchRatio = r.getFloat(R.styleable.LockView_touchRatio, mTouchRatio);
mLineColor = r.getColor(R.styleable.LockView_lineColor, mDefaultColor);
mLineWidth = r.getDimension(R.styleable.LockView_lineWidth, DensityUtils.dip2px(context, 5));
r.recycle();
mLinePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mLinePaint.setColor(mLineColor);
mLinePaint.setStyle(Paint.Style.STROKE);
mLinePaint.setStrokeWidth(mLineWidth);
mLinePaint.setStrokeCap(Paint.Cap.ROUND);
mLinePaint.setStrokeJoin(Paint.Join.ROUND);
for (int i = 0; i & 9; i++) {
MarkerView view = new MarkerView(context, mDefaultColor, mDefailtFullColor, mNodeDefaultColor, mSelectColor, mFrameSelectFullColor, mNodeSelectColor,
mErrerColor, mErrerFullColor, mErrerNodeColor, mFrameLineWidth, mNodeRadius, mNodePadding, insideNodeShow);
view.setNum(i + 1);
ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
view.setLayoutParams(params);
addView(view);
setWillNotDraw(false);
public int getFullAlpha(int color, float ratio) {
return Color.argb((int) (Color.alpha(color) * ratio), Color.red(color), Color.green(color), Color.blue(color));
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int size = Math.min(MeasureSpec.getSize(widthMeasureSpec), MeasureSpec.getSize(heightMeasureSpec));
setMeasuredDimension(size, size);
for (int i = 0; i & getChildCount(); i++) {
measureChild(getChildAt(i), widthMeasureSpec, heightMeasureSpec);
protected void onLayout(boolean changed, int l, int t, int r, int b) {
if (changed) {
float areaWidth = (r - l - getPaddingLeft() * 2) / 3;
for (int n = 0; n & 9; n++) {
MarkerView node = (MarkerView) getChildAt(n);
int row = n / 3;
int col = n % 3;
int left = (int) (getPaddingLeft() + col * areaWidth);
int top = (int) (getPaddingTop() + row * areaWidth);
int right = (int) (left + areaWidth);
int bottom = (int) (top + areaWidth);
node.layout(left, top, right, bottom);
* 设置连接线是否绘制在子View的上面
* true 绘制在子View的上面
* false 绘制在子View的下面
* isLineTop 设置连接线是否绘制在子View的上面
public void setLineTop(boolean isLineTop) {
mLineTop = isLineT
invalidate();
* 设置连接线是否绘制在子View的上面
* true 绘制在子View的上面
* false 绘制在子View的下面
public boolean getLineTop() {
return mLineT
public boolean onTouchEvent(MotionEvent event) {
if (getLockScreen()) {
invalidate();
return false;
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
resetDefault();
x = event.getX();
y = event.getY();
isTouch = true;
case MotionEvent.ACTION_MOVE:
x = event.getX();
y = event.getY();
MarkerView nodeView = getNodeAt(x, y);
if (nodeView != null && !nodeView.isHighLighted()) {
nodeView.setState(LockState.SELECT_STATE);
mNodeViews.add(nodeView);
if (mOnLockCallback != null) {
pawBuilder.setLength(0);
for (MarkerView markerView : mNodeViews) {
pawBuilder.append(markerView.getNum());
mOnLockCallback.onProgress(pawBuilder.toString(), nodeView.getNum());
if (mNodeViews.size() & 0) {
invalidate();
case MotionEvent.ACTION_UP:
LogUtils.i("手指抬起了");
isTouch = false;
pawBuilder.setLength(0);
if (mNodeViews.size() &= 0) return true;
pawBuilder.delete(0, pawBuilder.length());
if (mOnLockCallback != null) {
for (MarkerView markerView : mNodeViews) {
pawBuilder.append(markerView.getNum());
mOnLockCallback.onFinish(pawBuilder.toString());
if (mFingerLeaveRedraw) {
resetDefault();
invalidate();
return true;
protected void onDraw(Canvas canvas) {
if (!mLineTop) onDrawLock(canvas);
protected void dispatchDraw(Canvas canvas) {
super.dispatchDraw(canvas);
if (mLineTop) onDrawLock(canvas);
* 画图的方法
private void onDrawLock(Canvas canvas) {
if (getLockScreen()) {
onDrawNodeViewLock(canvas);
if (isTouch || mFingerLeaveRedraw) {
onDrawNodeViewLock(canvas);
if (mNodeViews.size() & 0) {
MarkerView lastNode = mNodeViews.get(mNodeViews.size() - 1);
canvas.drawLine(lastNode.getCenterX(), lastNode.getCenterY(), x, y, mLinePaint);
onDrawNodeViewLock(canvas);
private void onDrawNodeViewLock(Canvas canvas) {
for (int i = 1; i & mNodeViews.size(); i++) {
MarkerView frontNode = mNodeViews.get(i - 1);
MarkerView backNode = mNodeViews.get(i);
canvas.drawLine(frontNode.getCenterX(), frontNode.getCenterY(), backNode.getCenterX(), backNode.getCenterY(), mLinePaint);
* 获取给定坐标点的Node，返回null表示当前手指在两个Node之间
private MarkerView getNodeAt(float x, float y) {
for (int n = 0; n & getChildCount(); n++) {
MarkerView node = (MarkerView) getChildAt(n);
float ratioPadding = (node.getWidth() - (node.getWidth() * mTouchRatio)) / 2;
if (!(x &= node.getLeft() + ratioPadding && x & node.getRight() - ratioPadding)) {
if (!(y &= node.getTop() + ratioPadding && y & node.getBottom() - ratioPadding)) {
return null;
* 设置连接线的颜色
* color 颜色值
public void setLineColor(int color) {
mLinePaint.setColor(color);
* 手指离开立即重绘
public void setfingerLeaveRedraw(boolean mFingerLeaveRedraw) {
this.mFingerLeaveRedraw = mFingerLeaveR
public boolean getfingerLeaveRedraw() {
return this.mFingerLeaveR
* 重置状态 为默认状态
public void resetDefault() {
setState(LockState.DEFAULT_COLOR);
mNodeViews.clear();
* 重置状态错误状态
public void resetErrer() {
setState(LockState.ERRER_STATE);
* 重置为选中状态
public void resetSelect() {
setState(LockState.SELECT_STATE);
* 锁屏，不允许触摸
public void LockScreen(boolean isScreen) {
mLockScreen = isS
public boolean getLockScreen() {
return mLockS
public void setState(LockState state) {
switch (state) {
case DEFAULT_COLOR:
case SELECT_STATE:
setLineColor(mSelectColor);
case ERRER_STATE:
setLineColor(mErrerColor);
int size = mNodeViews.size();
for (int i = 0; i & i++) {
mNodeViews.get(i).setState(state);
invalidate();
public void setLockCallback(onLockCallback lockCallback) {
mOnLockCallback = lockC
public interface onLockCallback {
void onProgress(String paw, int current);
void onFinish(String paw);
以上注释都写的很清楚了，下面讲一下遇到的一些问题。
1.画出来的线被上面的圈圈覆盖了。
通过百度，知道ViewGroup的onDraw是画布局中的内容的，画子View的的方法在这个方法的后面执行，所以ViewGroup的内容会被子View覆盖，那么怎么才能把连接线画在子View的上面呢，很简单
只要在画子View的方法中执行就好了
protected void dispatchDraw(Canvas canvas) {
super.dispatchDraw(canvas);
if (mLineTop) onDrawLock(canvas);
下面是View的draw()方法
@CallSuper
public void draw(Canvas canvas) {
final int privateFlags = mPrivateF
final boolean dirtyOpaque = (privateFlags & PFLAG_DIRTY_MASK) == PFLAG_DIRTY_OPAQUE &&
(mAttachInfo == null || !mAttachInfo.mIgnoreDirtyState);
mPrivateFlags = (privateFlags & ~PFLAG_DIRTY_MASK) | PFLAG_DRAWN;
if (!dirtyOpaque) {
drawBackground(canvas);
final int viewFlags = mViewF
boolean horizontalEdges = (viewFlags & FADING_EDGE_HORIZONTAL) != 0;
boolean verticalEdges = (viewFlags & FADING_EDGE_VERTICAL) != 0;
if (!verticalEdges && !horizontalEdges) {
if (!dirtyOpaque) onDraw(canvas);
dispatchDraw(canvas);
if (mOverlay != null && !mOverlay.isEmpty()) {
mOverlay.getOverlayView().dispatchDraw(canvas);
onDrawForeground(canvas);
2.怎么设置触摸的区域？
* 获取给定坐标点的Node，返回null表示当前手指在两个Node之间
private MarkerView getNodeAt(float x, float y) {
for (int n = 0; n & getChildCount(); n++) {
MarkerView node = (MarkerView) getChildAt(n);
float ratioPadding = (node.getWidth() - (node.getWidth() * mTouchRatio)) / 2;
if (!(x &= node.getLeft() + ratioPadding && x & node.getRight() - ratioPadding)) {
if (!(y &= node.getTop() + ratioPadding && y & node.getBottom() - ratioPadding)) {
return null;
看上面代码，
根据圆圈的宽度减去可触摸区域的长度除2，得到可触摸区域距离边框的距的距离。
光看代码看着有点圆，画个图看一下吧
画个图是不是清晰很多，只要用getLeft+边距，和getRight-边距，就能得到可触摸区域在x轴上的范围了，Y轴同理，不懂的同学自己用笔画一下吧~
差不多就上面两个问题了
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：4098次
排名：千里之外
(1)(2)(1)(1)(2)大神以坏，求友友们发个锁屏那个九宫格的图_酷派大神f2吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0可签7级以上的吧50个
本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：32,617贴子：
大神以坏，求友友们发个锁屏那个九宫格的图
我记得图的样子，记得自己怎么画的。就是不知道数字
京东手机 体验&购&实惠!全场手机爆·爆·爆!抢到手软就等你!爱生活,爱网购,就爱京东!满99元免运费!正品有保证,货到付款,全国联保!
大神摔进水了，拿去修。人家问我锁屏图案的数字——我一下惊了。我记得图案，却忘了手机锁屏的样子
直接双清了
贴吧热议榜
使用签名档&&
保存至快速回贴