Android開發之layout佈局+實例 – Android移動開發技術文章_手機開發 Android移動開發教學課程

 

在Android 應用中,用戶界面是非常重要的,它是人與手機之間傳遞、交換信息的媒介和對話接口,是Android 系統的重要組成部分。它實現信息的內部形式與用戶可以接受形式之間的轉換。iPhone 之所以被人們所推崇,除瞭其功能強大之外,最重要的是完美的UI(用戶界面)設計,在Android 系統中,我們也可以開發出與iPhone

同樣絢麗多彩的UI。

一個Android 應用的用戶界面是由View 和ViewGroup 對象構建的。它們有很多的種類,並且都是View 類的子類,View 類是Android 系統平臺上用戶界面表示的基本單元。View類的一些子類被統稱為“widgets(工具)”,它們提供瞭諸如文本輸入框和按鈕之類的UI

對象的完整實現。ViewGroup 是View 的一個擴展,它可以容納多個子View。通過擴展ViewGroup 類,你可以創建由相互聯系的子View 組成的復合控件。ViewGroup 類同樣可以被擴展用作layout(佈局)管理器,如LinearLayout(線性佈局)、TableLayout(表格佈局)

以及RelativeLayout(相對佈局)等佈局架構。並且用戶可以通過用戶界面與程序進行交互。

    首先我們來說說LinearLayout。

“LinearLayout”翻譯成中文是“線性佈局”,所謂線性佈局就是在該標簽下的所有子元素會根據其orientation屬性的值來決定是按行或者是按列逐個顯示。

    線性佈局我們一般不會單用的,因為它太局限性瞭,它隻能制作簡單的界面,如果我們想做如下界面,那麼就必須運用嵌套瞭。

 

實現代碼如下

 

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

 

  

 

    <LinearLayout 

 

        android:layout_width="match_parent" 

 

        android:layout_height="wrap_content" 

 

        android:orientation="horizontal" > 

 

  

 

        <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" /> 

 

    </LinearLayout> 

 

  

 

    <LinearLayout 

 

        android:layout_width="match_parent" 

 

        android:layout_height="wrap_content" 

 

        android:orientation="horizontal" > 

 

  

 

        <TextView 

 

            android:layout_width="wrap_content" 

 

            android:layout_height="wrap_content" 

 

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

 

  

 

        <EditText 

 

            android:layout_width="fill_parent" 

 

            android:layout_height="wrap_content" /> 

 

    </LinearLayout> 

 

  

 

    <TableLayout 

 

        android:layout_width="match_parent" 

 

        android:layout_height="match_parent" 

 

        android:stretchColumns="*" > 

 

  

 

        <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> 

 

  

 

</LinearLayout> 

 

相對佈局中的視圖組件是按相互之間的相對位置來確定的,並不是線性佈局中的必須按行或按列單個顯示。示例佈局文件如下:

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

 

  

 

    <Button 

 

        android:id="@+id/meiguiId" 

 

        android:layout_width="wrap_content" 

 

        android:layout_height="wrap_content" 

 

        android:layout_centerInParent="true" 

 

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

 

  

 

    <Button 

 

        android:id="@+id/meiId" 

 

        android:layout_width="wrap_content" 

 

        android:layout_height="wrap_content" 

 

        android:layout_above="@id/meiguiId" 

 

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

 

  

 

    <Button 

 

        android:layout_width="wrap_content" 

 

        android:layout_height="wrap_content" 

 

        android:layout_above="@id/meiguiId" 

 

        android:layout_alignParentRight="true" 

 

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

 

  

 

    <Button 

 

        android:layout_width="wrap_content" 

 

        android:layout_height="wrap_content" 

 

        android:layout_below="@id/meiguiId" 

 

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

 

  

 

    <Button 

 

        android:layout_width="wrap_content" 

 

        android:layout_height="wrap_content" 

 

        android:layout_below="@id/meiguiId" 

 

        android:layout_alignParentRight="true" 

 

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

 

  

 

</RelativeLayout> 

 

顯示效果如下:

 

表格佈局的風格跟HTML中的表格比較接近,隻是所采用的標簽不同。

<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="*" > 

 

  

 

    <TableRow > 

 

  

 

        <TextView 

 

            android:layout_width="wrap_content" 

 

            android:layout_height="wrap_content" 

 

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

 

  

 

        <TextView 

 

            android:layout_width="wrap_content" 

 

            android:layout_height="wrap_content" 

 

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

 

  

 

        <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/tel" /> 

 

    </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/sexzs" /> 

 

  

 

        <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/telzs" /> 

 

    </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/sexly" /> 

 

  

 

        <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/telly" /> 

 

    </TableRow> 

 

  

 

</TableLayout> 

 

android:stretchColumns="*"

該屬性指定每行都由第“0、1、2、3…”列占滿空白空間。

gravity指定文字對齊方式,本例都設為居中對齊。

padding指定視圖與視圖內容間的空隙,單位為像素。

實現效果如下:

 

幀佈局中的每一個組件都代表一個畫面,這個程序的主要原理是大圖片覆蓋小的圖片,首先由一張最小的圖片顯示,然後是比它大一點,在它外圍增加點東西的這樣顯示的效果就像動態的似的。以此類推,然後再循環顯示。

編寫main.xml文件:

view plain

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

 

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

 

    android:layout_width="wrap_content" 

 

    android:layout_height="wrap_content" 

 

    android:layout_gravity="center" 

 

    android:id="@+id/frame" 

 

>  

 

  

 

</FrameLayout> 

 

在該佈局文件中定義一個id為frame的幀佈局文件。

然後把我們需要的圖片放入工程resàdrawable下。

主要實現代碼如下:

view plain

package cn.class3g.activity; 

 

  

 

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.widget.FrameLayout; 

 

  

 

public class FrameLayoutActivity extends Activity { 

 

   FrameLayout frame = null; 

 

   private boolean flag = true; 

 

  

 

   // 由該類兩個方法間的循環調用,實現界面不斷更新。 

 

   class MyHandler extends Handler { 

 

       int i = 0; 

 

  

 

       public void handleMessage(Message msg) { 

 

          i++; 

 

          // 總共五幅圖,依次顯示 

 

          show(i % 5); 

 

          // 再次調用sleep方法 

 

          sleep(100); 

 

       } 

 

  

 

       public void sleep(long delayMillis) { 

 

          // 判斷是否為真 

 

          if (flag) { 

 

              // 實質上是調用瞭一次handleMessage 

 

  

 

              sendMessageDelayed(obtainMessage(0), delayMillis); 

 

          } 

 

       } 

 

   } 

 

  

 

   // 該方法是被調用以更新幀佈局的前景圖片 

 

   void show(int j) { 

 

       // 獲取五張圖片 

 

       Drawable a = getResources().getDrawable(R.drawable.a1); 

 

       Drawable b = getResources().getDrawable(R.drawable.a2); 

 

       Drawable c = getResources().getDrawable(R.drawable.a3); 

 

       Drawable d = getResources().getDrawable(R.drawable.a4); 

 

       Drawable e = getResources().getDrawable(R.drawable.a5); 

 

       // 不同的情況,設置不同的前景 

 

       switch (j) { 

 

       case 0: 

 

          frame.setForeground(a); 

 

          break; 

 

       case 1: 

 

          frame.setForeground(b); 

 

          break; 

 

       case 2: 

 

          frame.setForeground(c); 

 

          break; 

 

       case 3: 

 

          frame.setForeground(d); 

 

          break; 

 

       case 4: 

 

          frame.setForeground(e); 

 

          break; 

 

       } 

 

   } 

 

  

 

   /** Called when the activity is first created. */ 

 

   @Override 

 

   public void onCreate(Bundle savedInstanceState) { 

 

       super.onCreate(savedInstanceState); 

 

       setContentView(R.layout.main); 

 

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

 

       // 創建一個Handler子類對象,要調用其方法 

 

       final MyHandler myHandler = new MyHandler(); 

 

       myHandler.sleep(100); 

 

       // 為fram設置點擊事件,當其被點擊時,暫停。 

 

       frame.setOnClickListener(new View.OnClickListener() { 

 

          @Override 

 

          public void onClick(View v) { 

 

              flag = !flag; 

 

              myHandler.sleep(100); 

 

          } 

 

       }); 

 

   } 

 

 

效果顯示如下:

 

 

作者 chenglong0513

發佈留言