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();