需求：
服务器上获取数据，在一个列表上显示数据相对应的颜色（这个列表不是笔记的重点），列表用GridView实即可，点击item，这个item可以变换颜色！重点是这个列表对应一个缩略图，同样要匹配颜色，并且在GridView点击某个item更换这个item颜色的时候，缩略图上所对应的小格子也要变换颜色！
要达到的效果（笔记的重点是下边的那个“缩略图”的实现）
1.jpg
代码如下：
package xxx.xxx.xxx.xxx.customView;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.support.annotation.Nullable;
import android.support.v4.content.ContextCompat;
import android.util.AttributeSet;
import android.view.View;
import xxx.xxx.xxx.R;
/**
* Created by Hello我的World on 2017/4/15.
*/
public class CustomSudokuView extends View {
private int[] colors;
private int line_color;
private Paint mPaint;
private int index0,index1,index2,index3,index4,index5,index6,index7,index8;
public CustomSudokuView(Context context) {
this(context,null);
}
public CustomSudokuView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public CustomSudokuView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
colors =new int[]{ContextCompat.getColor(context, R.color.options_grey),ContextCompat.getColor(context,R.color.options_yellow),ContextCompat.getColor(context,R.color.options_white)};
line_color = ContextCompat.getColor(context,R.color.sudoku_line);
index0 = colors[0];
index1 = colors[0];
index2 = colors[0];
index3 = colors[0];
index4 = colors[0];
index5 = colors[0];
index6 = colors[0];
index7 = colors[0];
index8 = colors[0];
mPaint = new Paint();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
float lineT =1 ;
float pW = (getMeasuredWidth()-lineT*4)/3;
float pH = (getMeasuredHeight()-lineT*4)/3;
//第一跟横着的线
mPaint.setColor(line_color);
canvas.drawRect(0,0,getMeasuredWidth(),lineT,mPaint);
//第一行第一根竖着的线
mPaint.setColor(line_color);
canvas.drawRect(0,lineT,lineT,pH+lineT,mPaint);
//第一行第一个方块
mPaint.setColor(index0);
canvas.drawRect(lineT,lineT,pW+lineT,pH+lineT,mPaint);
//第一行第二个竖着的线
mPaint.setColor(line_color);
canvas.drawRect(pW+lineT,lineT,pW+lineT+lineT,pH+lineT,mPaint);
//第一行第二个方块
mPaint.setColor(index1);
canvas.drawRect(pW+lineT+lineT,lineT,pW*2+lineT*2,pH+lineT,mPaint);
//第一行第三个竖着的线
mPaint.setColor(line_color);
canvas.drawRect(pW*2+lineT*2,lineT,pW*2+lineT*2+lineT,pH+lineT,mPaint);
//第一行第三个方块
mPaint.setColor(index2);
canvas.drawRect(pW*2+lineT*2+lineT,lineT,pW*3+lineT*3,pH+lineT,mPaint);
//第一行第四根竖着的线
mPaint.setColor(line_color);
canvas.drawRect(pW*3+lineT*3,lineT,pW*3+lineT*4,pH+lineT,mPaint);
//第二根横着的线
mPaint.setColor(line_color);
canvas.drawRect(0,pH+lineT,pW*3+lineT*4,pH+lineT+lineT,mPaint);
//第二行第一个竖着的线
mPaint.setColor(line_color);
canvas.drawRect(0,pH+lineT+lineT,lineT,pH*2+lineT*2,mPaint);
//第二行第一个方块
mPaint.setColor(index3);
canvas.drawRect(lineT,pH+lineT+lineT,pW+lineT,pH*2+lineT*2,mPaint);
//第二行第二个竖线
mPaint.setColor(line_color);
canvas.drawRect(pW+lineT,pH+lineT+lineT,pW+lineT+lineT,pH*2+lineT*2,mPaint);
//第二行第二个方块
mPaint.setColor(index4);
canvas.drawRect(pW+lineT+lineT,pH+lineT+lineT,pW*2+lineT*2,pH*2+lineT*2,mPaint);
//第二行第三个竖着的线
mPaint.setColor(line_color);
canvas.drawRect(pW*2+lineT*2,pH+lineT+lineT,pW*2+lineT*2+lineT,pH*2+lineT*2,mPaint);
//第二行第三个方块
mPaint.setColor(index5);
canvas.drawRect(pW*2+lineT*2+lineT,pH+lineT+lineT,pW*3+lineT*3,pH*2+lineT*2,mPaint);
//第二行第四条竖着的线
mPaint.setColor(line_color);
canvas.drawRect(pW*3+lineT*3,pH+lineT+lineT,pW*3+lineT*4,pH*2+lineT*2,mPaint);
//第三条横着的线
mPaint.setColor(line_color);
canvas.drawRect(0,pH*2+lineT*2,pW*3+lineT*4,pH*2+lineT*3,mPaint);
//第三行第一条竖着的线
mPaint.setColor(line_color);
canvas.drawRect(0,pH*2+lineT*3,lineT,pH*3+lineT*3,mPaint);
//第三行第一个方块
mPaint.setColor(index6);
canvas.drawRect(lineT,pH*2+lineT*3,pW+lineT,pH*3+lineT*3,mPaint);
//第三行第二条竖着的线
mPaint.setColor(line_color);
canvas.drawRect(pW+lineT,pH*2+lineT*3,pW+lineT+lineT,pH*3+lineT*3,mPaint);
//第三行第二个方块
mPaint.setColor(index7);
canvas.drawRect(pW+lineT+lineT,pH*2+lineT*3,pW*2+lineT*2,pH*3+lineT*3,mPaint);
//第三行第三条竖着的线
mPaint.setColor(line_color);
canvas.drawRect(pW*2+lineT*2,pH*2+lineT*3,pW*2+lineT*2+lineT,pH*3+lineT*3,mPaint);
//第三行第三个方块
mPaint.setColor(index8);
canvas.drawRect(pW*2+lineT*2+lineT,pH*2+lineT*3,pW*3+lineT*3,pH*3+lineT*3,mPaint);
//第三行第四条竖着的线
mPaint.setColor(line_color);
canvas.drawRect(pW*3+lineT*3,pH*2+lineT*3,pW*3+lineT*4,pH*3+lineT*3,mPaint);
//第四条横着的线
mPaint.setColor(line_color);
canvas.drawRect(0,pH*3+lineT*3,pW*3+lineT*4,pH*3+lineT*4,mPaint);
}
public void setColorForPosition(int viewIndex,int colorIndex){
switch (viewIndex){
case 0:
switch (colorIndex){
case 0:
case 1:
case 2:
index0 = colors[colorIndex];
break;
default:
index0 = colors[0];
break;
}
break;
case 1:
switch (colorIndex){
case 0:
case 1:
case 2:
index1 = colors[colorIndex];
break;
default:
index1 = colors[0];
break;
}
break;
case 2:
switch (colorIndex){
case 0:
case 1:
case 2:
index2 = colors[colorIndex];
break;
default:
index2 = colors[0];
break;
}
break;
case 3:
switch (colorIndex){
case 0:
case 1:
case 2:
index3 = colors[colorIndex];
break;
default:
index3 = colors[0];
break;
}
break;
case 4:
switch (colorIndex){
case 0:
case 1:
case 2:
index4 = colors[colorIndex];
break;
default:
index4 = colors[0];
break;
}
break;
case 5:
switch (colorIndex){
case 0:
case 1:
case 2:
index5 = colors[colorIndex];
break;
default:
index5 = colors[0];
break;
}
break;
case 6:
switch (colorIndex){
case 0:
case 1:
case 2:
index6 = colors[colorIndex];
break;
default:
index6 = colors[0];
break;
}
break;
case 7:
switch (colorIndex){
case 0:
case 1:
case 2:
index7 = colors[colorIndex];
break;
default:
index7 = colors[0];
break;
}
break;
case 8:
switch (colorIndex){
case 0:
case 1:
case 2:
index8 = colors[colorIndex];
break;
default:
index8 = colors[0];
break;
}
break;
default:
break;
}
}
}
xml中
<xxx.xxx.xxx.xxx.xxx.CustomSudokuView
android:id="@+id/sudokuView"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerVertical="true"/>
使用
public class MainActivity extends AppCompatActivity {
CustomSudokuView view;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
view = (CustomSudokuView ) findViewById(R.id.sudokuView);
view.setColorForPosition(0, 0);//后边的这个参数取值是0-2
view.setColorForPosition(1, 1);
view.setColorForPosition(2, 2);
view.setColorForPosition(3, 0);
view.setColorForPosition(4, 1);
view.setColorForPosition(5, 2);
view.setColorForPosition(6, 0);
view.setColorForPosition(7, 1);
view.setColorForPosition(8, 2);
view.postInvalidate();
}
}
实现思路：
继承View，这样的话写完就是一个单独的控件了，不会包含多层控件。
- 有3种颜色:
private int[] colors; - 有9个格子,所以要有9个格子所用到的颜色变量
private int index0,index1,index2,index3,index4,index5,index6,index7,index8; - 有格子的边框线的颜色
private int line_color; - 画笔
private Paint mPaint; - 构造方法 CustomSudokuView()
构造方法中给上述的变量赋值 - 绘制方法 onDraw()
我们有3行3列格子，横竖各4条线，竖线我是分割开来做的，整体思路是：
第一条横线，
第一条横线下边是第一行格子和竖线：第1行第一个竖线，第1行第一个格子，第1行第二条竖线，第1行第二个格子，第1行第三条竖线，第1行 第三个格子，第1行第四条竖线,
然后下边是第二条横线,
第二条横线下边是第二行格子和竖线，同第一行格子和竖线
然后下边是第三条横线，
第三条横线下边是第三行格子和竖线，同第一二行格子和竖线
最下边是第四条横线
确定好思路后，就要开始画了，在画之前，有三个参数要确定下 ：代表线的变量（lineT），格子的宽（pW），格子的高（pH）
每行有3个格子，4条竖线，那么每个格子宽度就是“控件宽度减去4条竖线的宽度除以3”
每列有3个格子，4条横线，那么每个格子的高度就是“控件高度减去4条横线的高度除以3”
确定好之后就愉快的画吧，没有用drawLine()方法，直接用的drawRect()方法把线也当成矩形画了。 - 设置哪个格子什么颜色的方法 setColorForPosition(int viewIndex,int colorIndex)
这个方法是给外部调用的，参数viewIndex是指哪个格子，colorIndex是指哪个颜色，整个方法的功能是将第viewIndex个个子的颜色设置成colors[colorIndex],例如我想将第一个格子设置成黄色，只需要在外部调用
view.setColorForPosition(0,1)即可
以上是这个九宫格的笔记！
