Android UI學習系列

學習步驟和重點

• UI布局
• 主要UI元素
• 主要按鈕和事件
• 螢幕跳轉
• 彈出框

一. Android UI布局

本段主要參考 此人部落格，稍加整理。原文請見：原文

1.1 線性布局（LinearLayout）

此種布局一個重要參數為android:orientation="horizontal"（水平顯示），共2中元素垂直顯示為“vertical”。

參考代碼：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="horizontal"></LinearLayout>

1.2 相對布局（RelativeLayout）

此種布局非常的好用方便，你可以按照自己的需要，快速的定位你的UI元素到你想要的位置，重要參數

android:layout_below：“相對應按鈕idA”，此句代碼錶示相對於按鈕A的下方。其他上下左右可以自己實踐。

參考代碼

<?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" >    <ProgressBar        android:id="@+id/progressBar1"        style="?android:attr/progressBarStyleLarge"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentTop="true"        android:layout_centerHorizontal="true"        android:layout_marginTop="60dp" />    <TextView        android:id="@+id/textView1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_below="@+id/progressBar1"        android:layout_centerHorizontal="true"        android:layout_marginTop="52dp"        android:text="正在載入中..."        android:textAppearance="?android:attr/textAppearanceLarge" /></RelativeLayout>

參考圖片執行個體

1.3 列表視圖（List View）

暫時忽略不講，後面用到再總結。

二 主要UI元素

視圖類android.view.View是widgets的基類，Android的UI元素大部分都包含在android.Widgets中。各個類的繼承關係如

2.1 文本（TextView）

就是簡單的文本顯示,後台擷取文本的內容代碼：

TextView viewme=(TextView) findViewById(R.id.textView1);viewme.setText(“test”);

2.2 按鈕（Button）

按鈕也是比較簡單的，下節重點講解事件

2.3 圖片（ImageView）

ImageView的核心是映像的來源，方法有3種，代碼如下：

img.setImageResource(resId)img.setImageBitmap(bm)img.setImageURI(uri)

2.4 進度條

主要參數，擷取最大值getMax()，設定長度progressCire.setProgress(100);

2.5 下拉按鈕（Spinner）

主要是設定內容來源：

Spinner spinnerDemo=(Spinner) findViewById(R.id.spinner1);                ArrayAdapter<String> adapter=new ArrayAdapter<String>(this,android.R.layout.simple_spinner_item);        adapter.add("紅色");        adapter.add("藍色");        spinnerDemo.setAdapter(adapter);

也可以使用values檔案夾下建立一個數組內容檔案，例如：

<?xml version="1.0" encoding="utf-8"?><resources>    <string-array name="colors">        <item>紅色</item>        <item>橙色</item>        <item>黃色</item>        <item>綠色</item>        <item>藍色</item>        <item>紫色</item>    </string-array></resources>使用時，直接用R.array.colors

2.6 文本切換器（TextSwitcher）

暫時忽略，後續補充。

三 按鈕事件

情境設定：點擊按鈕，文字框中出現hello word！

事件代碼實現：

//新增一個按鈕事件        Button button=(Button) findViewById(R.id.button1);        //設定監聽        button.setOnClickListener(new Button.OnClickListener()        {           public void onClick(View v) {                             TextView viewme=(TextView) findViewById(R.id.textView1);        viewme.setText(“hello word!”);           }                 });

四 螢幕跳轉

首先要準備2個頁面Activity,這裡有A和B2個頁面（A是首頁面），然後在AndroidManifest.xml中新增一個配置（A頁面已經預設存在）。

<activity android:name=".B"></activity>

因為只能有一個主啟動頁面，所以B中不包含

<activity            android:name=".A"            android:label="@string/app_name" >            <intent-filter>                <action android:name="android.intent.action.MAIN" />                <category android:name="android.intent.category.LAUNCHER" />            </intent-filter>        </activity>

A中事件代碼：

//跳轉        Button buttonGo=(Button) findViewById(R.id.button2);        buttonGo.setOnClickListener(new Button.OnClickListener()        {           public void onClick(View v) {
              Intent intent=new Intent();
              intent.setClass(ReaBoxActivity.this, ImgShowActivity.class);
              startActivity(intent);
              finish();
           }                 });    }

 

五 彈出框

對話方塊的類為android.app.Dialog,通過android.app.AlertDialog.Builder類來建立。

還有一種簡單的彈出框實現，代碼如下：

import android.widget.Toast;Toast.makeText(this,“hello”, Toast.LENGTH_SHORT).show();