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

在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();
		
	}
}