android布局

今天我们学习了android的布局，主要有线性布局，相对布局，表格布局，帧布局。

下面我们看一看这几种布局：

线性布局：线性布局（LinearLayout）就是在该标签下的所有的子元素会按行或者按列逐个显示。

下面是线性布局的一个例子：

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

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

    android:layout_width="fill_parent"

    android:layout_height="fill_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>

与其对应的strings.xml内容如下：

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

<resources>

    <string name="app_name">布局演示</string>

    <string name="name_text">请输入您的用户名</string>

    <string name="ok_text">确定</string>

<string name="cancel_text">取消</string>

</resources>

线性布局的显示效果如图：

相对布局：相对布局中的试图组件式按相互之间的相对位置来确定的，并不是线性布局中的必须按行或者按列来单个显示。下面我们来看一个相对布局的例子：

<?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="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"

        android:text="@string/username" 

        android:id="@+id/name"/>

      <EditText

          android:layout_width="match_parent"

          android:layout_height="wrap_content"

          android:layout_toRightOf="@id/name"

          android:id="@+id/names" />

      <TextView

          android:layout_width="wrap_content"

          android:layout_height="wrap_content"

          android:layout_alignParentLeft="true"

          android:layout_below="@id/names"

          android:text="@string/passworld" 

          android:id="@+id/pass"/>

       <EditText

           android:layout_width="match_parent"

           android:layout_height="wrap_content"

           android:layout_below="@id/names"

           android:layout_toRightOf="@+id/pass" 

           android:id="@+id/passs"/>

       <Button

           android:layout_width="wrap_content"

           android:layout_height="wrap_content"

           android:layout_alignParentLeft="true"

           android:layout_below="@id/passs"

           android:text="@string/login" 

            android:id="@+id/logins"/>

          

         <Button

           android:layout_width="wrap_content"

           android:layout_height="wrap_content"

           android:layout_toRightOf="@id/logins"

           android:layout_below="@id/passs"

           android:text="@string/cancel" 

           />

</RelativeLayout>

下面是其strings.xml的相关代码：

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

<resources>

    <string name="app_name">布局演示</string>

    <string name="name_text">请输入您的用户名</string>

    <string name="ok_text">确定</string>

<string name="cancel_text">取消</string>

</resources>

下面是相对布局的效果：

表格布局：表格布局（TableLayout）中<TableLayout>是顶级元素，说明采用的是表格布局，<TableRow>定义的是一个行，<Textview>定义的是一个单元格的内容。

表格布局的例子：

<?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="1">

    <TableRow >

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

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

        <EditText

            android:layout_width="fill_parent"

            android:layout_height="wrap_content" />

    </TableRow>

    <TableRow >

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

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

        <EditText

            android:layout_width="match_parent"

            android:layout_height="wrap_content" />

    </TableRow>

<TableLayout

   android:stretchColumns="0,1">

      

    <TableRow >

   <Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

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

    <Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

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

    </TableRow>

     

</TableLayout>

</TableLayout>

与其相关的strings.xml内容：

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

<resources>

    <string name="app_name">xx系统</string>

    <string name="username">用户名</string>

    <string name="passworld">密  码</string>

    <string name="login">登陆</string>

    <string name="cancel">取消</string>

</resources>

表格布局显示的效果：

帧布局：帧布局中每一个组件都代表一个画面，默认以屏幕左上角作为（0,0）坐标，按组件定义的先后顺序依次逐屏显示，后面的出现会覆盖前面的画面。用该布局可以实现动画效果。

下面是帧布局实现该效果的一个例子：

frame.xml文件代码：

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

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:layout_gravity="center"

    android:id="@+id/frame" >

</FrameLayout>

编写BujuActivity.java类，内容如下：

package cn.csdn.civity;

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 BujuActivity extends Activity {

private boolean flag = true;

FrameLayout frame = null;

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.frame);

        findViews();

final MyHandler myHandler = new MyHandler();

myHandler.sleep(1000);

frame.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

flag = !flag;

myHandler.sleep(1000);

}

});

}

private void findViews() {

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

}

class MyHandler extends Handler {

int i = 0;

@Override

public void handleMessage(Message msg) {

i++;

show(i % 3);

sleep(1000);

}

public void sleep(long delayMillis) {

if (flag) {

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

}

}

}

private void show(int j) {

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[j]);

}

}

帧布局实现的效果如图：