客户端设计
1、如何绘制?
分上下两层,下层为最终图片,上层尺寸和下层一致,并将上层分割为 m 行 n 列的方格。
2、方格位置如何设定?
m 行 n 列的方格,设定左上角坐标为(0,0),那么最右下角坐标为( (m-1) , (n-1) )。
3、如何定义方格对象,及方格拥有什么方法和属性?
方格Pane有4个属性:
locationX,locationY,PaneState,visitor。
(locationX,locationY)组成方格位置信息;
PaneState包含3种状态,VISIBLE(0)方格可见 , INVISIBLE(1) 方格隐藏, PORTRAIT(2)其他用户点击过;
visitor,头像路径或用户信息。
Pane类还有一个setView(View view)方法,将实际对应View赋值给Pane,Pane根据自身属性,修改定制自身View。
部分Android源码如下:
public class Pane {
private int locationX;
private int locationY;
private PaneState state = PaneState.INVISIBLE;
private String visitor;
public Pane(){}
public Pane(int locationX,int locationY,PaneState state,String visitor){
this.locationX = locationX;
this.locationY = locationY;
this.state = state;
this.visitor = visitor;
}
...
public void setView(View view){
view.setClickable(true);
switch (state) {
case VISIBLE:
view.setVisibility(View.VISIBLE);
view.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
v.setVisibility(View.INVISIBLE);
}
});
break;
case INVISIBLE:
view.setVisibility(View.INVISIBLE);
break;
case PORTRAIT:
break;
default:
break;
}
}
}
public enum PaneState {
VISIBLE(0) , INVISIBLE(1) , PORTRAIT(2);
...
}
自定义View:
private void init(){
this.removeAllViews();
for(int y=0; y<rowNum; ++y){
TableRow row = new TableRow(context);
row.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT, 1.0f));
for(int x=0; x<colNum; ++x){
items.add(new View(context));
View button = items.get(y*rowNum + x);
button.setBackgroundColor(Color.BLUE);
button.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
v.setVisibility(View.INVISIBLE);
}
});
row.addView(button, new TableRow.LayoutParams (LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT, 1.0f));
}
this.addView(row);
}
}
public void setDataAndDraw(int rowNum,int colNum,List<Pane> paneList){
this.rowNum = rowNum;
this.colNum = colNum;
setDataAndDraw(paneList);
}
public void setDataAndDraw(List<Pane> paneList){
init();
Iterator<Pane> iterator = paneList.iterator();
while(iterator.hasNext()){
Pane pane = iterator.next();
int index = pane.getLocationY() * rowNum + pane.getLocationX();
pane.setView(items.get(index));
}
}
4、如何使用?
仅需将数据添加给View即可,使用对外公开的
setDataAndDraw()方法
。
示例如下:
List<Pane> list = new ArrayList<Pane>();
Pane pane1 = new Pane(0,0,PaneState.valueOf(1),null);
Pane pane2 = new Pane(1,1,PaneState.valueOf(1),null);
Pane pane3 = new Pane(2,2,PaneState.valueOf(1),null);
list.add(pane1);
list.add(pane2);
list.add(pane3);
gridView.setDataAndDraw(list);
5、运行截图:
如上指出(0,0),(1,1),(2,2),三处方格不可见。
二、服务器端接口设计
由于功能需求还没确定,仅设计 上传和获取 某关卡 的 方格组信息json,如下:
{
"PaneList":[
{"locationX":0,"locationY":0,"PaneState":1,"
visitor
":""},
{"locationX":0,"locationY":0,"PaneState":1,"
visitor
":""},
{"locationX":0,"locationY":0,"PaneState":1,"
visitor
":""}
]
}