android简单demo学习系例之排版(TableLayout)[xml-based]

xusaomaiss

在eclipse下利用android开发插件,来写基于xml-based的图形界面很简单也很方便.
 

 
在outline或效果界面中选中所编辑的节点(View),接着在下边 的Property窗口下其对应的属性列表中填写自定义的属性值.
 
结果出来的Layout文件如下(可以查看如下文件来填写节点属性值-在上面的步骤)
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    >    <TableLayout android:id="@+id/sTableLayout"    android:layout_width="wrap_content"    android:layout_height="wrap_content">    <TableRow >    <ImageView android:background="@drawable/bg1"/>    <EditText/>    </TableRow>    <TableRow>    <ImageView android:background="@drawable/bg2"/>    <EditText/>    </TableRow>    </TableLayout>    <Button android:id="@+id/exitButton"    android:text="退出"    android:layout_width="wrap_content"    android:layout_height="wrap_content"     android:layout_below="@+id/sTableLayout"     android:layout_marginTop="20sp"/></RelativeLayout> 
 
android简单demo学习系例之排版(TableLayout)[code-based]

对应的UI-TREE
 

 
 
相对布局的使用只有注意到控件ID就不难理解与编码
 
代码:
package com.shcolar.luo;import android.app.Activity;import android.os.Bundle;import android.view.View;import android.view.ViewGroup;import android.view.View.OnClickListener;import android.widget.Button;import android.widget.EditText;import android.widget.ImageView;import android.widget.RelativeLayout;import android.widget.TableLayout;import android.widget.TableRow;/** * 简单的TableLayoutDemo 基于code-based * @author shcolar.luo * */public class TableLayoutDemo extends Activity implements OnClickListener{private final int WC = ViewGroup.LayoutParams.WRAP_CONTENT;    /** Called when the activity is first created. */    @Override    public void onCreate(Bundle savedInstanceState) {            super.onCreate(savedInstanceState);        //ViewGroup1-根节点 包含ViewGroup2-TableLayout 与 View-Button        RelativeLayout sRLayout = new RelativeLayout(this);        setContentView(sRLayout);        //ViewGroup2        TableLayout sTLayout = new TableLayout(this);        //设置ID,相对布局用到        sTLayout.setId(1);        sRLayout.addView(sTLayout, new TableLayout.LayoutParams(WC, WC));               //ViewGroup2的第一行        TableRow sRow1 = new TableRow(this);        sTLayout.addView(sRow1, new TableLayout.LayoutParams(WC, WC));                ImageView sImageView1 = new ImageView(this);        sImageView1.setImageDrawable(this.getResources().getDrawable(R.drawable.bg1));                EditText sEditText1 = new EditText(this);                sRow1.addView(sImageView1);        sRow1.addView(sEditText1);        //ViewGroup2的第二行        TableRow sRow2 = new TableRow(this);        sTLayout.addView(sRow2, new TableLayout.LayoutParams(WC, WC));                ImageView sImageView2 = new ImageView(this);        sImageView2.setImageDrawable(this.getResources().getDrawable(R.drawable.bg2));                EditText sEditText2 = new EditText(this);                sRow2.addView(sImageView2);        sRow2.addView(sEditText2);                Button sExitButton = new Button(this);        sExitButton.setText("退出");        sExitButton.setOnClickListener(this);                        RelativeLayout.LayoutParams sLayoutParams =         new RelativeLayout.LayoutParams(WC, WC);        sLayoutParams.addRule(RelativeLayout.BELOW, 1);        sLayoutParams.topMargin = 20;        //sExitButton相对于ViewGroup2排版        sRLayout.addView(sExitButton, sLayoutParams);                    }/** * 点击事件处理 */public void onClick(View v) {this.finish();}}