Android開發學習之路--UI之初體驗

時間 2019-12-01

原文原文鏈接

以前都是學習Activity，對於佈局都沒有作過學習，這裏就簡單學習下吧。下面看下Android Studio下有哪些控件：html

這裏分爲Widgets，Text Fields，Containers，Date & Time和Expert。java

其中Widgets微件主要是一些簡單地單一的功能，像TextView用來顯示一些文字信息，Button用來觸發按鈕，RadioButton，CheckBox，Switch都是選擇用的，ImageButton是能夠添加圖片，ImageView用來顯示圖片，ProgressBar是進度條，SeekBar是可拖動的進度條，Rating Bar是點星的功能，Spinner是下拉列表，WebView是用來顯示web頁面的。這裏通常都是靜態的顯示爲主，用戶只有點擊拖動，不多輸入。linux

Text Fields主要是一些動態的和用戶交互的內容，也即EditText，通常都須要輸入。像Plain Text，Person Name，Password，E-mail，Phone，Postal Address， Multiline Text，Time，Date，Number等都是須要輸入的信息。 android

Containers是容器的意思，這裏基本上都是一個一個經常使用的view的容器。web

Date & Time主要是一些時間和日期的控件。網絡

Expert大概是專家級用的吧，不太明白，之後再看看。app

這裏先簡單學習下TextView，Button，EditView，ImageView，ProcessBar，AlertDialog，ProcessDialog等。ide

首先是前面兩個在前段時間已經學習過了的，TextView和Button。先學習下TextView，先看下系統爲咱們建立的代碼：佈局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context="com.example.jared.uiwidgettest.MainActivity">

    <TextView
        android:text="Hello World!"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView" />

</RelativeLayout>

這裏主要看下TextView這個控件的代碼，這裏基本上都是xml來實現的。<TextView …… />，在這裏面填寫須要實現的佈局和內容等。其中android:text是要顯示的問題，android:layout是佈局，android:id是在代碼實現時須要獲取控制的惟一標識符。

顯示效果以下：
學習

能夠看出內容是左對齊的，默認都是這樣的，那麼咱們來修改下居中試試，修改代碼以下：

Android Studio用來左邊寫xml，右邊實時顯示效果很是棒，這樣，左邊的xml什麼效果，右邊很直觀的就看到了。這裏添加了android:gravity屬性，其實這個屬性的意思就是引力，選擇center，就可讓顯示的文字居中了，固然咱們還能夠選擇top，bottom，left，right，效果這裏就演示了。有沒有以爲這樣顯示的話，字體都是一樣的大小，一樣的顏色，固然這裏能夠再次修改其中的字體的大小和顏色的不一樣。修改代碼以下所示：

這裏經過android:textSize來改變字體，大小爲25sp（網上說最好用dp，sp不一樣設備可能會有不一樣的顯示效果），關於sp，dp和px，這裏也說說吧，

px就是pixels，就是像素的意思，不一樣的設備顯示效果相同，通常HVGA表明320*480像素。

sp是scaled pixels，放大像素的意思，主要用於字體顯示。

dp是device independent pixels，設備獨立像素，不一樣設備有不一樣的顯示效果，這個和設備硬件有關，通常爲了支持WVGA，HVGA和QVGA使用這個，不依賴像素。

字體簡單講解了，而後是經過android:textColor來改變顏色，通常顏色都是用rgb表示的，而每一個顏色都有0-255組成，也即習慣性表示爲（255，255，255），16進製表示的話就是ffffff了，這裏紅色，因此第一個8位爲ff，其他爲0，就是＃ff0000了，若是是綠色，那麼就是＃00ff00了，若是是藍色就是＃0000ff。

這裏的字體和顏色都是經過數字表示的，那麼若是咱們有不少不少的xml，不少不少的字體和顏色，那麼萬一要修改的話，不是須要處處都修改嗎？其實這裏能夠用到values目錄下的color.xml和style.xml了。這裏很少講，之後會詳細說明的。關於TextView就差很少講到了這裏，接着看Button，添加代碼以下：

Button和TextView其實差很少，主要Button還有一個監聽事件，這個監聽事件相信在前面幾篇文章中介紹的不少了，不過若是有不少button的話，不是代碼量會不少？管理很不方便？這裏就還有一個方法，添加另外一個button，以下：

添加MainActivity代碼以下：

package com.example.jared.uiwidgettest;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private Button button1;
    private Button button2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        button1 = (Button)findViewById(R.id.button1);
        button1.setOnClickListener(new MyOnClickListener());
        button2 = (Button)findViewById(R.id.button2);
        button2.setOnClickListener(new MyOnClickListener());
    }


    class MyOnClickListener implements View.OnClickListener {
        @Override
        public void onClick(View view) {
            switch (view.getId()) {
                case R.id.button1:
                    Toast.makeText(MainActivity.this, "Button1 is clicked !",
                            Toast.LENGTH_SHORT).show();
                    break;
                case R.id.button2:
                    Toast.makeText(MainActivity.this, "Button2 is clicked !",
                            Toast.LENGTH_SHORT).show();
                default:break;
            }
        }
    }
}

這裏實現了內部類MyOnClickListener繼承實現了OnClickListener類，而後根據不一樣的id處理不一樣邏輯。這樣在onCreat方法裏的代碼就不會一大串了，邏輯更加清晰。好了，Button就講這麼多了。

下面開始學習Editext，顧名思義，就是可編輯的text了，像註冊啊，發郵件啊都是須要這個控件的，那就簡單來寫一個吧，添加以下代碼：

    <EditText
        android:id="@+id/editText"
        android:layout_below="@id/button2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

運行查看效果以下：

如圖已經能夠輸入文字了，還有就是通常像咱們註冊一個帳號的時候，老是會有顯示幫助，當咱們真的輸入的時候就自動隱藏了，android裏面有自帶的功能，以下圖所示：

能夠看出隱形的問題，而後運行後輸入文字後就不顯示了。

下面看看android:maxLines屬性，能夠看出這個主要是控制行數，若是不加控制的話，行數會隨着文字的個數不斷往下拉，由於咱們的layout_height設置的事wrap_content，包含住全部的文字，看一下效果圖：

萬一咱們EditText下面還有控件，整個UI不是很亂了嗎，添加android:maxLines以下：

<EditText
        android:id="@+id/editText"
        android:layout_below="@id/button2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Input something for test"
        android:maxLines="3"/>

這裏設置了3行，運行以下所示：

如上圖所示，這裏只有三行，當多於三行文字，那麼就能夠經過滾動來查看文字，這樣的界面顯得更加地整潔。

既然這些是輸入的內容，那麼怎麼在代碼中獲取其中的數據呢？下面經過Button來獲取數據顯示，添加代碼以下：

package com.example.jared.uiwidgettest;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private Button button1;
    private Button button2;
    private EditText editText;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        editText = (EditText)findViewById(R.id.editText);
        button1 = (Button)findViewById(R.id.button1);
        button2 = (Button)findViewById(R.id.button2);

        button1.setOnClickListener(new MyOnClickListener());
        button2.setOnClickListener(new MyOnClickListener());
    }


    class MyOnClickListener implements View.OnClickListener {
        @Override
        public void onClick(View view) {
            switch (view.getId()) {
                case R.id.button1:
                    String editdata = editText.getText().toString();
                    Toast.makeText(MainActivity.this, "Edit content: " + editdata,
                            Toast.LENGTH_SHORT).show();
                    break;
                case R.id.button2:
                    Toast.makeText(MainActivity.this, "Button2 is clicked !",
                            Toast.LENGTH_SHORT).show();
                default:break;
            }
        }
    }
}

運行後輸入文字，而且按button1按鈕，效果以下所示：

EditText先學到這裏，下面繼續學習ImageView，是否發現基本的控件都相似的，不少接口Android Studio也會有自動補全，寫起代碼來確實比linux舒服多了。

ImageView其實就是把一張圖片展現出來，這裏先準備兩張圖片，而且放到drawable下面。添加代碼：

注意，這裏的圖片名稱不能夠是數字開頭的，一開始我用1.png，而後就報錯了，因此這裏仍是英文字母開頭靠譜，仍是不能偷懶。這裏有兩張圖片，那咱們來試試經過按鈕顯示不一樣的圖片。修改代碼以下：

package com.example.jared.uiwidgettest;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private Button button1;
    private Button button2;
    private EditText editText;
    private ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        editText = (EditText)findViewById(R.id.editText);
        button1 = (Button)findViewById(R.id.button1);
        button2 = (Button)findViewById(R.id.button2);
        imageView = (ImageView)findViewById(R.id.image) ;

        button1.setOnClickListener(new MyOnClickListener());
        button2.setOnClickListener(new MyOnClickListener());
    }


    class MyOnClickListener implements View.OnClickListener {
        @Override
        public void onClick(View view) {
            switch (view.getId()) {
                case R.id.button1:
                    String editdata = editText.getText().toString();
                    Toast.makeText(MainActivity.this, "Edit content: " + editdata,
                            Toast.LENGTH_SHORT).show();
                    break;
                case R.id.button2:
                    Toast.makeText(MainActivity.this, "Button2 is clicked !",
                            Toast.LENGTH_SHORT).show();
                    imageView.setImageResource(R.drawable.monalisa);
                default:break;
            }
        }
    }
}

運行後按button2，顯示以下：

咱們繼續學習ProgressBar，編寫代碼以下：

    <ProgressBar
        android:id="@+id/processbar"
        android:layout_below="@id/image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

運行結果以下所示：

這裏本來圖片顯示太大了，就改成圖標了，中間的processbar是否是很像平時刷新網頁的時候的效果？那麼怎麼讓這個效果消失呢？由於一旦獲取網絡數據但是不能再顯示這個的了。這裏尚未學過網絡，那就直接經過button吧，修改代碼以下：

package com.example.jared.uiwidgettest;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.ProgressBar;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private Button button1;
    private Button button2;
    private EditText editText;
    private ImageView imageView;
    private ProgressBar progressBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        editText = (EditText)findViewById(R.id.editText);
        button1 = (Button)findViewById(R.id.button1);
        button2 = (Button)findViewById(R.id.button2);
        imageView = (ImageView)findViewById(R.id.image);
        progressBar = (ProgressBar)findViewById(R.id.progressbar);

        button1.setOnClickListener(new MyOnClickListener());
        button2.setOnClickListener(new MyOnClickListener());
    }


    class MyOnClickListener implements View.OnClickListener {
        @Override
        public void onClick(View view) {
            switch (view.getId()) {
                case R.id.button1:
                    //String editdata = editText.getText().toString();
                    //Toast.makeText(MainActivity.this, "Edit content: " + editdata,
                    //        Toast.LENGTH_SHORT).show();
                    if(progressBar.getVisibility() == View.GONE) {
                        progressBar.setVisibility(View.VISIBLE);
                    } else {
                        progressBar.setVisibility(View.GONE);
                    }

                    break;
                case R.id.button2:
                    Toast.makeText(MainActivity.this, "Button2 is clicked !",
                            Toast.LENGTH_SHORT).show();
                    imageView.setImageResource(R.drawable.monalisa);
                default:break;
            }
        }
    }
}

這裏用到了visible屬性，通常是visible，invisible和gone，意思也很好理解，visible指的是顯示，invisible就是不顯示了，那麼gone就是消失了，也不佔用屏幕空間了。因此上述代碼經過getVisibility和setVisibility來實現功能。

那麼若是把這個進度條變成直條形呢？修改xml文件：

    <ProgressBar
        android:id="@+id/progressbar"
        android:layout_below="@id/image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="?android:attr/progressBarStyleHorizontal"
        android:max="100"/>

添加了android:attr屬性，接着咱們用button2按鈕沒按一次，進度增長10，修改代碼以下：

package com.example.jared.uiwidgettest;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.ProgressBar;

public class MainActivity extends AppCompatActivity {

    private Button button1;
    private Button button2;
    private EditText editText;
    private ImageView imageView;
    private ProgressBar progressBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        editText = (EditText)findViewById(R.id.editText);
        button1 = (Button)findViewById(R.id.button1);
        button2 = (Button)findViewById(R.id.button2);
        imageView = (ImageView)findViewById(R.id.image);
        progressBar = (ProgressBar)findViewById(R.id.progressbar);

        button1.setOnClickListener(new MyOnClickListener());
        button2.setOnClickListener(new MyOnClickListener());
    }


    class MyOnClickListener implements View.OnClickListener {
        @Override
        public void onClick(View view) {
            switch (view.getId()) {
                case R.id.button1:
                    //String editdata = editText.getText().toString();
                    //Toast.makeText(MainActivity.this, "Edit content: " + editdata,
                    //        Toast.LENGTH_SHORT).show();
                    if(progressBar.getVisibility() == View.GONE) {
                        progressBar.setVisibility(View.VISIBLE);
                    } else {
                        progressBar.setVisibility(View.GONE);
                    }

                    break;
                case R.id.button2:
                    //Toast.makeText(MainActivity.this, "Button2 is clicked !",
                    //        Toast.LENGTH_SHORT).show();
                    //imageView.setImageResource(R.drawable.monalisa);
                    int progress = progressBar.getProgress();
                    progress += 10;
                    progressBar.setProgress(progress);
                    break;
                default:break;
            }
        }
    }
}

運行後按屢次button2，效果以下：

基本的控件也學習了下，其餘的控件其實也都是差很少的，下面再學習下兩個dialog，方便之後使用。

首先是AlertDialog，這個實際上是一個警告的框，用來提醒用戶一些信息，或者是輸入的數據要傳遞或者保存時的所需。實現下代碼以下：

package com.example.jared.uiwidgettest;

import android.content.DialogInterface;
import android.os.Bundle;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.ProgressBar;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private Button button1;
    private Button button2;
    private EditText editText;
    private ImageView imageView;
    private ProgressBar progressBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        editText = (EditText)findViewById(R.id.editText);
        button1 = (Button)findViewById(R.id.button1);
        button2 = (Button)findViewById(R.id.button2);
        imageView = (ImageView)findViewById(R.id.image);
        progressBar = (ProgressBar)findViewById(R.id.progressbar);

        button1.setOnClickListener(new MyOnClickListener());
        button2.setOnClickListener(new MyOnClickListener());
    }


    class MyOnClickListener implements View.OnClickListener {
        @Override
        public void onClick(View view) {
            switch (view.getId()) {
                case R.id.button1:
                    AlertDialogShow();
                    break;
                case R.id.button2:
                    Toast.makeText(MainActivity.this, "Button2 is clicked !",
                            Toast.LENGTH_SHORT).show();
                    break;
                default:break;
            }
        }
    }

    public void AlertDialogShow() {
        AlertDialog.Builder dialog = new AlertDialog.Builder(MainActivity.this);
        dialog.setTitle("This is Dialog");
        dialog.setMessage("Something you should care");
        dialog.setCancelable(false);
        dialog.setPositiveButton("OK", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int i) {

            }
        });
        dialog.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int i) {

            }
        });
        dialog.show();
    }
}

這裏實現了一個AlertDialogShow方法，在button被按下的時候，調用，運行結果以下：

固然，你也能夠修改成中文的確認和取消，如上圖所示，因此在國際版的時候，咱們就要注意這些字符都是須要在values目錄下定義好的，到時候引用資源的形式來調用，要否則，不可能中文版和英文版還得寫兩套吧。

最後來學習下ProgressDialog吧，其實這個和AlerDialog方法相似，仍是看下代碼吧：

package com.example.jared.uiwidgettest;

import android.app.ProgressDialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.ProgressBar;

public class MainActivity extends AppCompatActivity {

    private Button button1;
    private Button button2;
    private EditText editText;
    private ImageView imageView;
    private ProgressBar progressBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        editText = (EditText)findViewById(R.id.editText);
        button1 = (Button)findViewById(R.id.button1);
        button2 = (Button)findViewById(R.id.button2);
        imageView = (ImageView)findViewById(R.id.image);
        progressBar = (ProgressBar)findViewById(R.id.progressbar);

        button1.setOnClickListener(new MyOnClickListener());
        button2.setOnClickListener(new MyOnClickListener());
    }


    class MyOnClickListener implements View.OnClickListener {
        @Override
        public void onClick(View view) {
            switch (view.getId()) {
                case R.id.button1:
                    AlertDialogShow();
                    break;
                case R.id.button2:
                    ProgressDialogShow();
                    break;
                default:break;
            }
        }
    }

    public void AlertDialogShow() {
        AlertDialog.Builder dialog = new AlertDialog.Builder(MainActivity.this);
        dialog.setTitle("This is Dialog");
        dialog.setMessage("Something you should care");
        dialog.setCancelable(false);
        dialog.setPositiveButton("確認", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int i) {

            }
        });
        dialog.setNegativeButton("取消", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int i) {

            }
        });
        dialog.show();
    }

    public void ProgressDialogShow() {
        ProgressDialog progressDialog = new ProgressDialog(MainActivity.this);
        progressDialog.setTitle("This is Progress dialog");
        progressDialog.setMessage("Loading...");
        progressDialog.setCancelable(true);
        progressDialog.show();
    }
}

這裏實現了一個ProgressDialogShow方法，在按鈕button2按下時出發，運行效果以下所示：