Android自定义表格控件
Android平台已经给我们提供了很多标准的组件,如:TextView、 EditView、Button、ImageView、Menu等,还有许多布局控件,常见的有:AbsoluteLayout、 LinerLayout、RelativeLayout、TableLayout等。但随着人们对视觉的需求,基本组件已无法满足人们求新求异的要求,于 是我们常常会自定义组件,用来实现更美观的UI界面。
实现自定义控件通常有两种途径,一种是继承View类,重写其中的重要方法,另一种是继承ViewGroup类,通过重写父类中的有些方法,达到重 新绘制组件的目的。最近做了一个自定义表格控件的练习,从中总结到一些经验。在这个练习中,我通过继承ViewGroup类,重新绘制了用于呈现表格样式 的容器组件,首先来看一下父类ViewGroup。该类有三个构造方法:ViewGroup(Context context)、ViewGroup(Context context,AttributeSet attrs)、ViewGroup(Context context,AttributeSet attrs,int defStyle),我们自定义的继承ViewGroup的类需要实现它的至少一个构造方法。ViewGroup中有几个方法非常重要,这几个方法更好的 帮助我们实现自己的组件的布局与绘制。
1、onLayout方法
该方法用于在容器中如何摆放子控件,如果不重写该方法,子控件将无法在布局控件中得以展示,该方法有五个参数,用于设置子控件的上下左右四个边框的位置,还有一个标志位,这个方法也是子类必须实现的,因为该方法是个抽象方法。
2、addView方法
该方法用于在容器组件中添加子控件
3、dispatchDraw方法
通过该方法,我们可以获取canvas对象,该对象允许我们在组件上画任意我们想要的图形,在这个表格控件中,我们可以在画布上上表格的外边框及表格线
4、getChildCount和getChildAt方法
这两个方法用于获取该容器控件中子控件的数目和位置,便于我们对子控件的排版和布局
5、onMeasure方法
这个方法是用来测量子控件大小的,它在onLayout方法之前被调用,测量了子控件的大小尺寸,然后可以绘制子控件在容器组件中的布局位置
下面直接给出代码示例,仅供参考
首先是表格控件的类:
public class TableView extends ViewGroup{ private static final int STARTX = 0;// 起始X坐标 private static final int STARTY = 0;// 起始Y坐标 private static final int BORDER = 2;// 表格边框宽度 private int mRow;// 行数 private int mCol;// 列数 public TableView(Context context, AttributeSet attrs) { super(context, attrs); this.mRow = 3;// 默认行数为3 this.mCol = 3;// 默认列数为3 // 添加子控件 this.addOtherView(context); } public TableView(Context context, int row,int col) { super(context); if(row>20 || col>20){ this.mRow = 20;// 大于20行时,设置行数为20行 this.mCol = 20;// 大于20列时,设置列数为20列 }else if(row==0 || col==0){ this.mRow = 3; this.mCol = 3; } else{ this.mRow = row; this.mCol = col; } // 添加子控件 this.addOtherView(context); } public void addOtherView(Context context){ int value = 1; for(int i=1;i<=mRow;i++){ for(int j=1;j<=mCol;j++){ TextView view = new TextView(context); view.setText(String.valueOf(value++)); view.setTextColor(Color.rgb(79, 129, 189)); view.setGravity(Gravity.CENTER); if(i%2==0){ view.setBackgroundColor(Color.rgb(219, 238, 243)); }else{ view.setBackgroundColor(Color.rgb(235, 241, 221)); } this.addView(view); } } } @Override protected void dispatchDraw(Canvas canvas) { Paint paint = new Paint(); paint.setStrokeWidth(BORDER); paint.setColor(Color.rgb(79, 129, 189)); paint.setStyle(Style.STROKE); // 绘制外部边框 canvas.drawRect(STARTX, STARTY, getWidth()-STARTX, getHeight()-STARTY, paint); // 画列分割线 for(int i=1;i=(mCol-1)){ i = 0; x = STARTX+BORDER; y += getHeight()/mRow; }else{ i++; x += getWidth()/mCol; } } } public void setRow(int row){ this.mRow = row; } public void setCol(int col){ this.mCol = col; } }
然后我们在Activity中使用我们的控件: public class MainActivity extends Activity implements OnClickListener{ private Button btn; private EditText row; private EditText col; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); btn = (Button)findViewById(R.id.button1); row = (EditText)findViewById(R.id.editRow); col = (EditText)findViewById(R.id.editCol); row.setError("请输入小于20的整数"); col.setError("请输入小于20的整数"); btn.setOnClickListener(this); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; } @Override public void onClick(View v) { Intent intent = new Intent(); Bundle bun = new Bundle(); if("".equals(row.getText().toString())){ Toast.makeText(this, "行数不能为空", Toast.LENGTH_SHORT).show(); return; }else if("".equals(col.getText().toString())){ Toast.makeText(this, "列数不能为空", Toast.LENGTH_SHORT).show(); return; }else{ int rowNum = Integer.parseInt(row.getText().toString()); int colNum = Integer.parseInt(col.getText().toString()); bun.putInt("row", rowNum); bun.putInt("col", colNum); intent.setClass(MainActivity.this, TableActivity.class); intent.putExtras(bun); startActivity(intent); } } } ? public class TableActivity extends Activity{ @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); Intent intent = this.getIntent(); Bundle bun = intent.getExtras(); int row = bun.getInt("row"); int col = bun.getInt("col"); TableView table = new TableView(this, row, col); setContentView(table); } }
效果图如下: