安卓基本控制元件（TextView、ImageView）以及布局（線性布局、相對布局）的介紹

UI

? 進行軟體開發，我們經常會接觸到UI，那UI是什么捏？UI全稱為User Interface，即用戶界面，簡單的說，就是手機上可以看到的可以操作的界面，

? 在軟體開發程序中，界面設計和功能開發同樣重要，是Android 應用中直接影響用戶體驗最關鍵的部分，界面美觀的應用程式不僅可以大大增加用戶粘性，還能吸引更多的新用戶，而Android給我們提供了大量的UI開發工具，只要合理使用它們，就可以撰寫出各種各樣的好看精美的布局啦！

? 用戶界面由控制元件和布局所組成，布局規范了控制元件的位置，就像一個容器一樣裝著控制元件，而控制元件的擺放最直接影響著用戶界面的展示，那接下來，我們從最基礎的控制元件和布局學起吧，

新建專案

? 且慢！想進入安卓的學習，配置好安卓的環境之后，我們得先新建一個專案，才可以開始打代碼哦！那怎么新建一個專案呢？

? 參考冰冰姐的博客

? 新建了一個專案之后，我們來簡單認識一下AS的界面

View(控制元件)

標簽

? 每個控制元件，在代碼中都是由標簽來控制，這就是xml語法，控制元件和布局都在 .xml 檔案中實作，

? 標簽的大體格式相信大家也在小冊子上看見過，

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"/>

? 一對尖括號包住一個控制元件，開頭是控制元件名，之后的是這個控制元件的屬性名和屬性值，最后帶一個斜杠和右尖括號作為結束符號

TextView（文本框）

? 那我們先來了解一下文本框吧，文本框可以說是Android里面最簡單的控制元件了，主要用于在界面上顯示一段文字，在我們平時的手機軟體中十分常見，可以說有文字顯示的地方就有TextView的存在，

? 比方說每天可見的微信，也隨處可見文本框，再比如說我們每次在AndroidStudio新建一個專案的時候，默認界面中間的HelloWorld也是一個文本框樣式，那文本框具體怎么使用呢？我們來詳細了解一下，

代碼展示

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"/>

? 這是一個最簡單的TextView，我們每新建一個專案，都會出現一個初始控制元件TextView，文本內容為“Hello World！”

? 我們要怎么實作一個控制元件的樣式呢？其實就像我們畫畫一樣，如果我們要畫一個最簡單的按鈕，我們要畫出什么要素呢？按鈕的大小，按鈕里面的文字內容等，首先，我們來了解一下控制元件的基本屬性

基本屬性

android:layout_width和android:layout_height

? 那以這段代碼為例，android:layout_width和android:layout_height這兩個屬性規定了控制元件的寬高，幾乎每個控制元件都有這兩個屬性來規定這個控制元件的大小，而等號后面的內容就是我們為這個屬性賦予的值，這里的wrap_content表示默認大小，這是，這個控制元件的大小會和它里面的文本相仿，

? 除了wrap_content以外，我們還會用match_parent表示這個控制元件大小將會和父布局一樣，

? 自定義布局，直接用數字來自定義大小，比如60dp（dp為控制元件常用的尺寸單位，除了dp之外還有px，sp等，有興趣的同學可以自行百度了解）

android:text

? 這個也很簡單，text屬性用于設定文本內容，等號之后的內容直接用雙引號引住文本內容即可，

其他屬性

? 當然文本框的屬性還有很多，比如說用textSize設定文本字體的大小，文本字體的顏色，文本框的背景顏色，文本相對于文本框的位置等屬性，

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Welcome to Quanta"
    android:textSize="30sp"
    android:textColor="#FF9800"
    android:background="#000000"
    android:gravity="center"/>

效果圖如上

ImageView（影像視圖）

? 顧名思義！這個控制元件就是用來展示圖片的，很多圖片展示的地方都有用到ImageView，比如微信頭像哇，小紅書的圖片呀，（懶得放圖了）

代碼展示

? 那么ImageView要怎么寫呢？類比TextView，我們也用一個標簽括住ImageView，

<ImageView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:src="@drawable/OnePiece"/>

? 這個的基本屬性也很簡單，可以看到我們這里的寬和高是300dp，但為什么周圍有空白的，這里就涉及到控制元件的大小和控制元件里面的文本大小，

? 實際上的控制元件周圍會有一個框框，這個框框的大小就是這個控制元件ImageView的大小，而因為里面的圖片存在比例問題，我們使用填入圖片的時候，他并不會進行拉伸填滿，而是直接填充，取了與比例適配的寬度進行展示，

基本屬性

android:src

? android:src屬性用于獲取圖片資源，從哪里獲取呢？我們找到在AS的最左邊的專案串列里，res檔案夾底下的drawable目錄，我們會把圖片和其他布局所需要的資源放在這個res（Resource）檔案夾中，而drawable就是負責放檔案的，

? 我們在電腦里找到自己想要的圖片，第一步，把圖片拖到drawable目錄下，注意圖片名字一定要字母開頭且不能含有大寫字母，

? 然后就我們在ImageView控制元件中通過src屬性獲取這個圖片（詳見上面代碼段）

android:scaleType

? 那如果我們想要改變它的展示效果怎么辦呢？我想讓他放大填滿這個框框，這個時候我們可以用scaleType屬性，在你不滿意圖片的布置的時候，這個屬性很好用，

android:scaleType="fitXY"

我們選擇fitXY值，這個屬性相當于直接拉伸填滿，效果如下

還是很不好看嘛，我想要他保持比例怎么辦？

我們使用值centerCrop進行設定,這個屬性 保持了圖片的比例，但是當控制元件大小不夠大的時候，它會犧牲了圖片的一部分，一體片的中心為中心完全覆寫住ImageView控制元件，可能會裁剪掉剩余的部分，

?
什么？你還是不滿意？那就改變ImageView的大小吧！

<ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/OnePiece" />

? 是不是很有沖擊感哈哈哈哈 因為這個圖片太滿啦！怎么樣可以讓他不那么滿呢？對ImageView的編輯（其實很多控制元件也一樣道理），可以將控制元件的長寬變小的一點，或者，用邊距的方法，下面我們來介紹，

內邊距padding和外邊距margin

? 邊距的屬性也很常用，如果沒有邊距，兩個控制元件就很容易挨在一起，既不美觀也不方便點擊，那接下來我們來認識一下邊距吧，

?

? 還是用我們最熟悉的微信來舉例，我們可以看到每個控制元件或者說他們的控制元件內容都不是緊密靠在一起的，怎么用邊距來實作呢？先說說外邊距margin，按照上圖所圈畫的樣式，黑框框是控制元件的大小，一個黑框框到其他黑框框之間的距離，也就是一個控制元件到另一個控制元件的距離就是外邊距，

? 那什么是內邊距呢？為了方便演示，我換一種畫法，

? 假如紅框框表示控制元件的大小，一個為ImageView，一個為TextView，我們發現真正的圖片和文本內容距離紅框框有一段距離，這個就是內邊距padding，內邊距指的是這個控制元件里面的內容距離控制元件框框的距離，

? AS示范

Layout（布局）

? 我們前面也說了，布局就像一個容器一樣裝著所有的控制元件，也可以把它理解成棋盤，不同的布局有不同的放置規則，就像不同的棋盤也規定了不同的落子方式，不過不同的是，我們可以看到棋盤，但我們看不到布局的存在，它更像是一個隱形的牽制，可以說布局控制了所有控制元件的擺放，

? 我們先從最簡單也很常用的兩個布局學起，在新建專案的時候，我們可以看到xml檔案里面已經寫有了一個布局，這個布局是約束布局，這堂課我們先不講，

先利用它來了解一下布局的寫法，
? 這是我們剛新建專案的時候的xml里面的布局代碼，最上面的紅框框是使用的布局的名稱，第二個框框是該布局的長寬，最后要以一對尖括號加一個斜杠，在尖括號里面是布局的名稱來結束，在布局的兩對尖括號之間加需要放入的控制元件，（和普通控制元件的格式區分開）

? 我們寫其他的布局也是按照這樣的方式

LinearLayout（線性布局）

? 線性布局是最基礎的布局，他可以讓里面的控制元件橫著或者豎著排列，我們用android:orientation屬性來決定排列順序，他只有兩個值，“vertical”表示垂直，“horizontal”表示水平，不設定該屬性的時候會默認為horizontal水平排列，

? 下面來看一下示范

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    tools:context=".MainActivity"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Welcome to Quanta"
        android:textSize="25sp"
        android:textColor="#FF9800"
        android:background="@android:color/black" />
    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/icon"/>


</LinearLayout>

因為把排列方式設成了垂直布局，所以兩個控制元件會上下垂直排列（默認都靠最左邊）

效果圖如下：

若改成水平排列，只需要直接修改orientation屬性即可，

控制元件們就緊挨著排排坐啦，

RelativeLayout（相對布局）

? 相對布局也是一種很常用的布局，比起LinearLayout的垂直水平排列，RelativeLayout更加隨意一些，他通過相對定位的方式讓控制元件出現在布局中的任意位置，也正因為這樣，RelativeLayout的屬性比較多，但是它的規律也很好摸，來看看吧！

?
? 我們將布局改為RelativeLayout（可以把orientation屬性洗掉了，這個屬性在RelativeLayout中不起任何作用），可以看到俺創建了五個一模一樣的ImageView控制元件，但是顯示出來只有一個，那是因為！他們合體了在RelativeLayout里面默認都放在左上角，而這五個圖片大小都一模一樣，就看上去像合體了，

? 前面也說到，這個布局是通過相對定位的方式進行布局，就像我們以前上學的時候老師給排座位表，xxx坐在xxx的左邊/右邊/左后方,我們得先給這些控制元件也起一個名字，而這時候我們就要用到一個叫做android:id的屬性，跟我們人類不一樣，控制元件們取的名字都必須是獨一無二的，

? 那來看個栗子吧！

? 代碼展示

<?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"
    tools:context=".MainActivity"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/iv_pic1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/icon"/>
    <ImageView
        android:id="@+id/iv_pic2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/icon"
        android:layout_toRightOf="@id/iv_pic1"/>
    <ImageView
        android:id="@+id/pic3"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/icon"
        android:layout_below="@id/iv_pic1"/>
    <ImageView
        android:id="@+id/iv_pic4"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/icon"
        android:layout_centerInParent="true"/>
    <ImageView
        android:id="@+id/iv_pic5"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/icon"
        android:layout_centerVertical="true"/>


</RelativeLayout>

? 雖然上面的代碼很長，我們只需要關注每個控制元件的最后一行就好了

? 在pic2中的android:layout_toRightOf="@id/iv_pic1"，很容易理解，就是pic2在pic1的右邊，pic3中的android:layout_below="@id/iv_pic1"表示在pic1的下面，在某個控制元件的上下左右，給相對應屬性賦的值是目標控制元件的id名字，

? 對于兄弟布局的位置

在某控制元件左邊：android:layout_toLeftOf="@id/id_name"       
在某控制元件右邊：android:layout_toRightOf="@id/id_name"        
在某控制元件上面：android:layout_above="@id/id_name"       
在某控制元件下面：android:layout_below="@id/id_name"                

? 而在pic4中的android:layout_centerInParent="true"則表示在父布局的中心，這里是水平和垂直方向都處于中心的意思，也可以單獨設定在水平方向居中或者在垂直方向居中，

? 對于父布局的位置

貼著父布局右邊：android:layout_alignParentRight="true"        
貼著父布局左邊：android:layout_alignParentLeft="true"       
貼著父布局上面：android:layout_alignParentTop="true"        
貼著父布局下面：android:layout_alignParentBottom="true"                
在父布局豎直方向居中：android:layout_centerVertical="true"        
在父布局水平方向居中：android:layout_centerHorizontal="true"        
在父布局正中間：android:layout_centerInParent="true"

ViewGroup（視圖組）

? 舉栗子高手在線舉栗子

還是這張圖哈哈哈哈

? 細心的小朋友們肯定發現了，我們上面學的控制元件啊布局呀都是單個布局里面有幾個控制元件，但如果我想實作上圖的效果（當然這個實作方式有很多，并不一定是我框中的這樣），既有水平分布又有垂直分布，又有相對定位的布局方式，要怎么實作捏！

? 這就是視圖組的概念啦~視圖組就是一個布局及其包含的若干控制元件，

? 比如說，

? 這就可以看做一組視圖組，在一個水平分布的布局里有四組控制元件，而這四組控制元件又分別可以看做一個視圖組，看做垂直分布的布局里面有一個ImageView和TextView，也就是說，**布局是可以嵌套的，**在一個LinearLayout里面還可以嵌套四個（甚至更多）LinearLayout，

? 實際的代碼也不難寫嗎，捋清楚每個布局之間的關系就好了，

貼一小段代碼

<LinearLayout       
	android:layout_width="wrap_content"        
	android:layout_height="wrap_content"        
	android:orientation="horizontal"        
	android:layout_margin="50dp">        
<ImageView            
	android:layout_width="50dp"            
	android:layout_height="50dp"            
	android:src="@drawable/icon"/>        
<TextView            
	android:layout_width="match_parent"            
	android:layout_height="50dp"            
	android:text="Welcome to Quanta"            
	android:textSize="20sp"            
	android:textColor="#FF9800"            
	android:background="#000000"           
	 android:gravity="center"/>    
 </LinearLayout>

俺寫了一樣的三組，外面一個垂直線性布局，里面嵌套了3個水平線性布局，他們的關系和效果如下圖

weight屬性

學會了視圖組的嵌套，但是還有一個問題，我們要怎么實作如下圖的平分效果呢？

不得不說，這樣的平分效果太常見太好用太好看了，實作起來其實也不難，

我們只需要用android:layout_weight屬性，weight表示權重，所以權重越大的控制元件，在螢屏上的占比就要越大，

我們給每個視圖組添加一個android:layout_weight屬性并都設定為1試試看，

然后我們就發現，3個視圖組平分了螢屏

簡單的代碼規范

? 在剛學習安卓之初，希望大家都能養成良好的代碼規范，好的代碼規范可以增添代碼的可讀性，對代碼理解和找bug都有很好的幫助！

? 注：由于 Android主要用Java實作，所以Android規范會涵蓋部分Java規范，

大駱駝拼寫法

? 有心的小朋友應該會留意到，小冊子和這篇博客的標題，所提到的控制元件名字TextView，ImageView，EditView，Button，他們的名字都有一種異曲同工之妙，誒，細品一下，發現他們的名稱中每個單詞的首字母都是大寫的嘞，這樣的命名方法，我們稱之為大駱駝拼寫法（UpperCamelCase），這樣的命名方式我們經常用于普通java類的命名，（在我們的第一節課，主要理解為一類控制元件的命名即可）

控制元件id命名

? 控制元件的id規范的命名方式是 控制元件縮寫_模塊（module）_功能名（function）,因為上方的實體并非用于某個具體情景，所以就姑且先取名為iv_xxx，

更多的代碼規范請參考

代碼規范

作業