android布局详解

Android布局是应用界面开发的重要的概念，在Android中，共有五种布局方式，

分别是：LinearLayout (线性布局),AbsoluteLayout(绝对布局),RelativeLayout(相对布局),TableLayout(表格布局)，FrameLayout(帧布局)

LinearLayout

线性布局，这个东西，从外框上可以理解为一个div，他首先是一个一个从上往

下罗列在屏幕上。每一个LinearLayout里面又可分为垂直布局

（android:orientation="vertical"）和水平布局

（android:orientation="horizontal"）。当垂直布局时，每一行就只有一个

元素，多个元素依次垂直往下；水平布局时，只有一行，每一个元素依次向右排

列。

linearLayout中有一个重要的属性 android:layout_weight="1"，这个weight

在垂直布局时，代表行距；水平的时候代表列宽；weight值越大就越大。

<?xml version="1.0"encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical">

    <TextView

       android:layout_width="fill_parent"

       android:layout_height="wrap_content"

       android:text="@string/name_text"   />

    <EditText

       android:layout_width="fill_parent"

       android:layout_height="wrap_content"

       />

    <Button

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:text="@string/ok_text"

       />

    <Button

       android:layout_width="wrap_content"

        android:layout_height="wrap_content"

       android:text="@string/cancel_text"

       />

</LinearLayout>

AbsoluteLayout（未讲）

绝对布局大家都学了html犹如div指定了absolute属性，用X,Y坐标来指定元

素的位置

android:layout_x="20px"android:layout_y="12px" 这种布局方式也比较简

单，但是在垂直随便切换时，往往会出问题，而且多个元素的时候，计算比较麻

烦。 

RelativeLayout

相对布局可以理解为某一个元素为参照物，来定位的布局方式。主要属性有：

相对于某一个元素

android:layout_below="@id/aaa" 该元素在 id为aaa的下面

android:layout_toLeftOf="@id/bbb" 改元素的左边是bbb

相对于父元素的地方

android:layout_alignParentLeft="true"  在父元素左对齐

android:layout_alignParentRight="true" 在父元素右对齐

还可以指定边距等，

<?xml version="1.0"encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent" >

 

   

    <TextView

       android:layout_width="fill_parent"

       android:layout_height="wrap_content"

       android:text="@string/name_text"  

       android:id="@+id/name_info"

       />

    <EditText

       android:layout_width="fill_parent"

       android:layout_height="wrap_content"

       android:layout_below="@id/name_info"

       android:id="@+id/username"

       />

    <Button

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:text="@string/cancel_text"

       android:layout_alignParentRight="true"

       android:layout_below="@id/username"

       android:id="@+id/cancel_button"

       />

    <Button

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:text="@string/ok_text"

       android:layout_below="@id/username"

       android:layout_toLeftOf="@id/cancel_button"

       />

</RelativeLayout>

 TableLayout

表格布局类似Html里面的Table。每一个TableLayout里面有表格行TableRow，

TableRow里面可以具体定义每一个元素，设定他的对齐方式

android:gravity="" 。

每一个布局都有自己适合的方式，另外，这五个布局元素可以相互嵌套应用，做

出美观的界面。

<?xml version="1.0"encoding="utf-8"?>

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:stretchColumns="0,1,2,3"

    >

 

    <TableRow >

        <TextView

           android:layout_width="wrap_content"

           android:layout_height="wrap_content"

           android:text="@string/name"

           />

        <TextView

           android:layout_width="wrap_content"

           android:layout_height="wrap_content"

           android:text="@string/gender"

           />

        <TextView

           android:layout_width="wrap_content"

           android:layout_height="wrap_content"

           android:text="@string/age"

           />

        <TextView

           android:layout_width="wrap_content"

           android:layout_height="wrap_content"

           android:text="@string/phonenumber"

            />

       

    </TableRow>

    <TableRow >

       

               <TextView

           android:layout_width="wrap_content"

           android:layout_height="wrap_content"

           android:text="@string/namezs"

           />

        <TextView

           android:layout_width="wrap_content"

           android:layout_height="wrap_content"

           android:text="@string/genderzs"

           />

        <TextView

           android:layout_width="wrap_content"

           android:layout_height="wrap_content"

           android:text="@string/agezs"

           />

        <TextView

           android:layout_width="wrap_content"

           android:layout_height="wrap_content"

           android:text="@string/phonenumberzs"

            />

    </TableRow>

        <TableRow >

       

               <TextView

           android:layout_width="wrap_content"

           android:layout_height="wrap_content"

           android:text="@string/namely"

           />

        <TextView

           android:layout_width="wrap_content"

           android:layout_height="wrap_content"

           android:text="@string/genderly"

           />

        <TextView

           android:layout_width="wrap_content"

           android:layout_height="wrap_content"

           android:text="@string/agely"

           />

        <TextView

           android:layout_width="wrap_content"

           android:layout_height="wrap_content"

           android:text="@string/phonenumberly"

            />

    </TableRow>

   

</TableLayout>

FrameLayout

帧布局中的每一个组件都代表一个画面，默认以屏幕左上角作为（ 0,0 ）坐标，

按组件

package cn.csdn.class3g;

 

import android.app.Activity;

import android.graphics.drawable.Drawable;

import android.os.Bundle;

import android.os.Handler;

import android.os.Message;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.FrameLayout;

 

public class FrameLayoutTestActivity extends Activity {

    FrameLayoutframe=null;

    booleanflag=true;

    public voidonCreate(Bundle savedInstanceState) {

       super.onCreate(savedInstanceState);

       setContentView(R.layout.main);

        findViews();

       

       

        classMyHandler extends Handler{

            int i=0;

           public voidhandleMessage(Message msg) {

               i++;

               show(i%3);

               sleep(10);

           }

           public void sleep(long dalayMillis){

              if(flag){

                  this.sendMessageDelayed(this.obtainMessage(10),dalayMillis);

              }

           }

          

        }

        finalMyHandler myHandler=new MyHandler();

       myHandler.sleep(10);

       frame.setOnClickListener(new OnClickListener() {

          

           public voidonClick(View v) {

              flag=!flag;

              myHandler.sleep(100);

           }

       });

    }

    private voidfindViews(){

       frame=(FrameLayout)this.findViewById(R.id.frame);

    }

    void show(int b){

       Drawable[] pic=new Drawable[3];

       pic[0] =this.getResources().getDrawable(R.drawable.p1);

       pic[1] =this.getResources().getDrawable(R.drawable.p2);

       pic[2] =this.getResources().getDrawable(R.drawable.p3);

       frame.setForeground(pic[b]);

    }

}

  

由于 FrameLayout 中后出现的 UI 控件会覆盖前面出现的 UI 控件，每次只能

显示一个 UI 控件，因此，我们可以通过在 Activity 中对每次显示的图片内容

进行切换以实现动画效果。 或许你会想到开启一条线程来控制切换 ， 但在非

主线程中不能更新 UI 界面 ， 所以 ， 我们使用了Android 提供的消息通讯

类Handler 。该类可以实现非主线程和负责 UI 的主线程之间的通信，进而间

接实现非主线程更新 UI 界面。由于 sleep 方法中的

sendMessageDelayed(obtainMessage(0), delayMillis); 本身会延迟发送一个

消息 ， 该消息会被框架传递给handleMessage 事件。 我们在handleMessage()

方法中再次调用 sleep() 方法，形成一个循环调用。 在我们对界面进行点击之

前 ， 两个方法会一直循环调用 。 前景图片也会不断的切换，进而实现动画的

效果。

嵌套布局

<?xml version="1.0"encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >

    <TextView

       android:layout_width="fill_parent"

       android:layout_height="wrap_content"

        android:text="@string/name_text"   />

    <EditText

       android:layout_width="fill_parent"

       android:layout_height="wrap_content"

       />

        <RelativeLayout

           android:layout_width="fill_parent"

           android:layout_height="wrap_content"

           >

     <Button

       android:layout_width="fill_parent"

       android:layout_height="wrap_content"

       android:text="@string/cancel_text"

       android:id="@+id/cancel_text"

       android:layout_alignParentRight="true"

       />

     <Button

       android:layout_width="fill_parent"

       android:layout_height="wrap_content"

       android:text="@string/ok_text"

       android:layout_toLeftOf="@id/cancel_text"

       />

  

           

        </RelativeLayout>

   

 

</LinearLayout>

下边是一些控件的属性

Android:id

为控件指定相应的ID

Android:text

指定控件当中显示的文字，需要注意的是，这里尽量使用strings.xml文件当中

的字符串

Android:gravity

指定View组件的对齐方式，比如说居中，居右等位置 这里指的是控件中的文本

位置并不是控件本身

Android:layout_gravity

指定Container组件的对齐方式．比如一个button 在linearlayout里，你想

把该button放在靠左、靠右等位置就可以通过该属性设置．以button为例，

Android:layout_gravity="right"则button靠右

Android:textSize

指定控件当中字体的大小

Android:background

指定该控件所使用的背景色，RGB命名法

Android:width

指定控件的宽度

Android:height

指定控件的高度

Android:layout_width

指定Container组件的宽度

Android:layout_height

指定Container组件的高度

Android:layout_weight

View中很重要的属性，按比例划分空间

Android:padding*

指定控件的内边距，也就是说控件当中的内容

Android:sigleLine

如果设置为真的话，则控件的内容在同一行中进行显示

Android:layout_centerHrizontal

水平居中

Android:layout_centerVertical

垂直居中

Android:layout_centerInparent

相对于父元素完全居中

Android:layout_alignParentBottom

贴紧父元素的下边缘

Android:layout_alignParentLeft

贴紧父元素的左边缘

Android:layout_alignParentRight

贴紧父元素的右边缘

Android:layout_alignParentTop

贴紧父元素的上边缘

Android:layout_below

在某元素的下方

Android:layout_above

在某元素的的上方

Android:layout_toLeftOf

在某元素的左边

Android:layout_toRightOf

在某元素的右边

Android:layout_alignTop

本元素的上边缘和某元素的的上边缘对齐

Android:layout_alignLeft

本元素的左边缘和某元素的的左边缘对齐

Android:layout_alignBottom

本元素的下边缘和某元素的的下边缘对齐

Android:layout_alignRight

本元素的右边缘和某元素的的右边缘对齐

Android:layout_marginBottom

离某元素底边缘的距离

Android:layout_marginLeft

离某元素左边缘的距离

Android:layout_marginRight

离某元素右边缘的距离

Android:layout_marginTop

离某元素上边缘的距离

Android:paddingLeft

本元素内容离本元素右边缘的距离

Android:paddingRight

本元素内容离本元素上边缘的距离

Android:hint

设置EditText为空时输入框内的提示信息

Android:LinearLayout

它确定了LinearLayout的方向，其值可以为vertical，表示垂直布局horizontal， 表示水平布局

今天用到的一些属性  还有很多  不过记不住  布局吧都学过  还挺简单  就

是线程那里有点没跟上，晚上把霓虹灯那个例子做出来了，基本上对它又有了更

深的一步了解，梅花只是布局问题，以中间那个为中心，就可以了，