Andriod 入门(1)--布局

于 2011-09-22 21:56:48 发布 · 138 阅读 · 1
文章标签：

#Android #Java

本文详细介绍了Android应用开发中的布局概念，包括线性、表格、嵌套、相对和自定义布局的实现方法。通过实例演示不同布局的使用场景和效果，帮助开发者更好地理解和运用这些布局特性，提升界面设计的灵活性和功能性。

布局相当于一个透明的画布,本身是没有任何东西的,单纯的布局是不可见的,它的作用是定义在此画布上显示的规则.

比如线性布局就规定在其上的视图要么水平摆放,要么垂直摆放.

 

布局的实现有两种方式:

1.常用作法是在 /res/layout/ 下 添加一layout.xml

2.在Java中实现

 

如果界面结构比较简单或逻辑比较简单可采用方式1;反之,界面比较复杂或者界面中某部分可以批量生成(数独游戏中9*9的方格),或随机生成(星空),就需要用方式2了;

 

在Activity中引用此布局:

setContentView(R.layout.main);           # main 与布局文件名一致

 

一:线性布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >

<!--在此布局上的控件-->

</LinearLayout>

 

# 用来指定布局方向
android:orientation="vertical"                       # 垂直方向
android:orientation="horizontal"                     # 水平方向

 

二:表格布局

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TableRow>
    	<Button android:text="1" 
             android:layout_width="fill_parent" android:layout_height="fill_parent"/>
    	<Button android:text="2" 
             android:layout_width="fill_parent" android:layout_height="fill_parent"/>
    	<Button android:text="3" 
             android:layout_width="fill_parent" android:layout_height="fill_parent"/>
    </TableRow>
    <!--每一行用TableRow-->
    <!--视图及布局都要放在TableRow中-->
 </TableLayout>
 

三:嵌套布局

   嵌套布局就是布局上不仅可以放视图还可以放布局; 画布上面当然还可以再放一层画布,最后从垂直方向上,看到的还是一个画布,大概这样能理解就行了

 

<?xml version="1.0" encoding="utf-8"?>
<!--嵌套布局-->
<!--最外层Layout,垂直方向布局-->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    
    <!--内层Layout1,水平方向布局-->
 	<LinearLayout
	    android:orientation="horizontal"
	    android:layout_width="fill_parent"
	    android:layout_height="fill_parent"
	    android:layout_weight="1">
	    <Button android:text="h_A" 
	    	android:layout_width="wrap_content" android:layout_height="fill_parent"/>
	    <Button android:text="h_B" 
	    	android:layout_width="wrap_content" android:layout_height="fill_parent"/>
	    <Button android:text="h_C" 
	    	android:layout_width="wrap_content" android:layout_height="fill_parent"/>
	</LinearLayout>
	
	<!--内层Layout1,水平方向布局-->
	<LinearLayout
	    android:orientation="vertical"
	    android:layout_width="fill_parent"
	    android:layout_height="fill_parent"
	    android:layout_weight="1">
	    <Button android:text="verticalA" 
	    	android:layout_width="fill_parent" android:layout_height="wrap_content"/>
	    <Button android:text="verticalB" 
	    	android:layout_width="fill_parent" android:layout_height="wrap_content"/>
	    <Button android:text="verticalC" 
	    	android:layout_width="fill_parent" android:layout_height="wrap_content"/>
	</LinearLayout>
</LinearLayout>

上述布局实现了这样的一个界面:

首先把界面上下分为两部分:上部分以水平方向添加三个按钮,下部分以垂直方向添加三个按钮. 

实现思路是:整体界面看成是一个垂直方向的线性布局,然后上部分是一个水平方向的线性布局,下部分是一个垂直方向的线性布局.

 

下面我们换一种思路来实现这个界面.

我们把整个界面看成是一个2行*1列的表格.第一行是水平方向的线性布局,第二列是垂直方向的线性布局

 

<?xml version="1.0" encoding="utf-8"?>
<!--嵌套布局-->
<!--最外层TableLayout,两行一列-->
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent"
    android:layout_height="fill_parent">>
	
        <!-- 第一行 -->
	<TableRow>
		<LinearLayout 
			android:orientation="horizontal"
			android:layout_width="fill_parent"
    		android:layout_height="fill_parent" >
	    	<Button android:text="horizontal_A" 
		    	android:layout_width="wrap_content" android:layout_height="fill_parent"/>
		    <Button android:text="horizontal_B" 
		    	android:layout_width="wrap_content" android:layout_height="fill_parent"/>
		    <Button android:text="horizontal_C" 
		    	android:layout_width="wrap_content" android:layout_height="fill_parent"/>
    	</LinearLayout>
	</TableRow>
	
        <!-- 第二行 -->
	<TableRow>
		<LinearLayout 
			android:orientation="vertical"
			android:layout_width="fill_parent"
    		android:layout_height="fill_parent" >
	    	<Button android:text="vertical_A" 
	    	android:layout_width="fill_parent" android:layout_height="wrap_content"/>
		    <Button android:text="vertical_B" 
		    	android:layout_width="fill_parent" android:layout_height="wrap_content"/>
		    <Button android:text="vertical_C" 
		    	android:layout_width="fill_parent" android:layout_height="wrap_content"/>
    	</LinearLayout>
	</TableRow>
	
</TableLayout>
 

四:相对布局

<?xml version="1.0" encoding="utf-8"?>
<!--相对布局-->
<!--最外层Layout,垂直方向布局-->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" 
    android:padding="10sp">
    
    <TextView android:id="@+id/textView"
    	android:text="please enter..." 
    	android:layout_width="fill_parent"
    	android:layout_height="wrap_content" />
    
    <!--android:layout_below="@id/textView" 指定editText 处于 textView 的下方-->
    <EditText android:id="@+id/editText" 
    	android:layout_width="fill_parent"
    	android:layout_height="wrap_content" 
    	android:layout_below="@id/textView"/>
    
    <!--android:layout_below="@id/editText" 指定btn_ok位于editText的下方-->
    <!--android:layout_alignParentRight="true" 指定btn_ok向父视图的右边对齐-->
    <Button android:id="@+id/btn_ok" 
    	android:text="ok"
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content" 
    	android:layout_below="@id/editText"
    	android:layout_alignParentRight="true"/>
    
    <!--android:layout_alignTop="@id/btn_ok" 指定btn_cancel和btn_ok最上方对齐-->
    <!--android:layout_toLeftOf="@id/btn_ok" 指定btn_cancel的右边与btn_ok的左边对齐-->
    <Button android:id="@+id/btn_cancel" 
    	android:text="cancel"
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content" 
    	android:layout_alignTop="@id/btn_ok"
    	android:layout_toLeftOf="@id/btn_ok"/>
    	
   	<!--更多的的属性可以查看文档中RelativeLayout.LayoutParams的介绍-->
</RelativeLayout>

如果想更好的使用相对布局,建议先理解CSS中的盒子模型,两者的理念基本雷同

 

五:自定义布局

    自定义布局通常是在以上几种布局难以奏效或实现起来非常繁琐复杂的情况下的最后一招

    在此仅展示基本用法, 没有太多技巧

 

   1.线性布局使用示例

public class Sudoku extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 自定义一个线性布局
        LinearLayout layout = new LinearLayout(this);							
        // 定义线性布局对齐方向
        layout.setOrientation(LinearLayout.HORIZONTAL);						
        
        // 定义两个按钮视图
        // 按钮的使用还要对其添加监听器
        // 关于Listener的添加有各种形式,内部类,匿名内部类,Activity实现OnClickListener等等
        // 各种用法都有各自的优缺点,具体选用哪种方式还要看具体需求及大家对此用法的体会心得
        Button btn1 = new Button(this);
        btn1.setText("welovelincon");
        Button btn2 = new Button(this);
        btn2.setText("weloveahcming");
        
        // 定义一个视图的长,宽
        // LinearLayout.LayoutParams.FILL_PARENT ==>android:layout_width="fill_parent"
        LinearLayout.LayoutParams param = new LinearLayout.LayoutParams(150, 40);		
        // 向布局上添加视图,并用指定的长宽
        // 还可以在布局上添加布局
        layout.addView(btn1, param);
        layout.addView(btn2, param);
        
        // 使用布局
        setContentView(layout);															
    }
}
 

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值