從0系統學Android--3.1編寫UI界面

從0系統學Android--3.1編寫UI界面

本系列文章目錄： 更多精品文章分類

本系列持續更新中....

界面設計和功能開發一樣重要，界面美觀的應用程序不只能夠大大增長用戶粘性，還能幫咱們吸引到更多的新用戶。Android 系統爲咱們提供了大量的 UI 開發工具，只要合理的使用它們，就能夠編寫出各類各樣漂亮的界面。

3.1 如何編寫程序界面

Android 中許多編寫程序界面的方式。Android Studio 提供了可視化的編輯工具，而且容許咱們經過拖放控件的方式來編寫佈局，並能在視圖上直接修改控件的屬性。可是這種拖放控件的方式不推薦你們使用。這種方式不利於咱們瞭解界面背後的實現原理，而且在一些複雜的界面，這種拖拽的方式難以勝任。咱們下面介紹的編寫方式都是經過本身編寫 xml 代碼來實現的。

3.2 經常使用控件的使用方法

Android 提供了大量的 UI 控件，下面就挑選幾種經常使用的控件來詳細的介紹一下使用方法。

3.2.1 TextView

TextView 能夠說是 Android 中最簡單的一個控件了，也是許多控件的父類好比：Button。

下面就來學習一下 TextView 的更多用法

修改 activity_main.xml 代碼

<?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="match_parent" android:layout_height="wrap_content" android:text="This is TextView" android:id="@+id/tv"/>
</LinearLayout>
複製代碼

在 TextView 中使用 android:id 給當前控件定義一個惟一標識符，使用 android:layout_width 和 android:layout_height 指定寬度和高度。Android 中全部的控件都有這兩個屬性。可選值有：match_parent、fill_parent、wrap_content 其中 match_parent 和 fill_parent 的意義相同，官方推薦使用 match_parent。表示讓當前控件的大小和父佈局的大小同樣，也就是由父佈局來決定當前控件的大小。wrap_content 表示讓當前控件的大小可以剛剛包含住裏面的內容，也就是由控件內容來決定當前控件的大小。固然你還能夠對控制指定固定的大小，可是這樣有時候會在不一樣的手機屏幕上出現適配的問題。

android:gravity 屬性能夠用來指定文字的對齊方式，可選值有：top、bottom、left、right、center。能夠用 | 來同時指定多個值。

android:textSize 屬性用來指定文字大小

android:textColor 屬性用來指定文字的顏色，單位用 sp

固然 TextView 還有許多其餘的屬性，有須要就去查閱文檔。

3.2.2 Button

Button 是程序用於和用戶進行交互的一個重要控件。它是 TextView 的子類。

Button 在使用的時候，系統會對 Button 中的全部英文字母自動進行大寫轉換，若是你不想這種效果，那麼使用 android:textAllCaps = "false" 來關閉這個默認特性。

固然咱們還能夠對 Button 來設置點擊事件，這樣當咱們點擊 Button 的時候就會觸發函數。

3.2.3 EditText

EditText 是程序用於和用戶交互的時候的一個重要控件，容許用戶在控件裏輸入和編輯內容，並能夠在程序中對這些內容進行處理。

EditText 的使用方法和前面的控件很是類似，首先添加一個 id，再指定寬度和高度，而後適當的加入一些控件特有的屬性就能夠了。

特有屬性，提示性文章：android:hint

當咱們輸入的文字內容過多的時候，EditText 的高度若是指定了 wrap_content 這種狀況下，效果就會很是糟糕，這個時候屬性 maxLines 就起做用了 android:maxLines="2" 這樣咱們的 EditText 只能顯示兩行高度的內容，內容再多就會用滾動的形式顯示，效果就會好不少。

3.2.4 ImageView

ImageView 是用來在界面上展現圖片的控件。圖片一般放在以 drawable 開頭的目錄下面，目前咱們項目中會默認有一個 drawable 不過沒有指定具體的分辨率，這裏咱們本身在 res 目錄下新建一個 drawble-xhdpi 目錄，而後將圖片放入。這樣咱們就可使用 android:src="@drawable/img1" 來給 ImageView 指定圖片了。

在代碼中使用 imageView.setImageResource(R.drawable.img) 給 ImageView 指定圖片。

3.2.5 ProgressBar

ProgressBar 是在界面上顯示一個進度條，表示當前程序正在加載一些數據。

使用方法很簡單

<ProgressBar android:id="@+id/progress_bar" android:layout_width="match_parent" android:layout_height="wrap_content"/>
複製代碼

運行程序，就會在屏幕上看到一個圓形的進度條正在旋轉。

那麼數據加載完成後如何讓進度條消失呢？這個時候須要引入一個屬性了 android:visibility 默認是 visible 表示可見的，還有 invisible 表示控件不可見可是仍然佔據原來的大小，gone 表示控件不可見也不會佔用任何屏幕控件。在代碼中設置的話經過 setVisibility() 傳入 View.VISIBLE 、View.INVISIBLE 、View.GONE 這三種值。

一樣我能夠經過給 ProgressBar 指定不一樣的樣式，來改變進度條的樣式。默認是圓形進度條，經過屬性 style 給他指定成水平進度條 style="?android:attr/progressBarStyleHorizontal" android:max="100"

固然 ProgressBar 還有其餘的樣式，能夠本身嘗試

3.2.6 AlerDialog

AlerDialog 能夠在當前的界面彈出一個對話框，置頂於全部界面之上，而且屏蔽掉其餘控件的交互能力。經常使用來做爲警告提示。

AlertDialog 的建立須要經過 Builder 來建立，屬於構建者模式。

AlertDialog.Builder builder = new AlertDialog.Builder(this);
        builder.setTitle("題目");
        builder.setMessage("內容消息");
				// 這個方法是設置屏蔽返回鍵，也就是說當你按返回鍵的時候這個彈出框也不會消失
        builder.setCancelable(false);
        builder.setPositiveButton("肯定", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                // 點擊後彈出框自動消失
                // which 表明點擊的是哪個 button 對應下面的值
                /** The identifier for the positive button. */
                int BUTTON_POSITIVE = -1;

                /** The identifier for the negative button. */
                int BUTTON_NEGATIVE = -2;

                /** The identifier for the neutral button. */
                int BUTTON_NEUTRAL = -3;

            }
        });

        builder.setNegativeButton("取消", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                // 點擊後彈出框自動消失
            }
        });
        builder.show();
複製代碼

效果圖:

3.2.7 ProgressDialog

ProgressDialog 和 AlertDialog 相似，均可以在界面上彈出一個對話框，都可以屏蔽與其餘控件的交互能力。不一樣的是 ProgressDialog 顯示的是一個進度條，通常用於耗時操做的時候，讓用戶等待。

如今官方已經不推薦使用 ProgressDialog 了，更推薦將 ProgressBar 嵌套在 UI 中或者經過通知的形式來提醒用戶。

代碼實現：

public void progressDialog() {
        ProgressDialog progressDialog = new ProgressDialog(this);
        progressDialog.setTitle("正在加載");
        progressDialog.setMessage("請稍等......");
        progressDialog.setCancelable(false);
        progressDialog.show();

    }
複製代碼

效果：

注意：setCancleable() 中傳入了 false 表示 ProgressBar 是不能經過 Back 鍵來取消的，你只能在代碼中調用 dismiss() 來讓 ProgressBar 消失，負責他就一直存在了。