學(xué)習(xí)了如何開發(fā)一個(gè)非常簡單的安卓工程：Hello World 之后芽淡，現(xiàn)在應(yīng)該開始學(xué)習(xí)最初步的用戶交互界面了
構(gòu)建一個(gè)簡單的用戶界面
Android應(yīng)用程序的用戶界面是使用布局 （ViewGroup對象）和小部件（View對象）的層次結(jié)構(gòu)構(gòu)建的。布局是不可見的容器，用于控制其子視圖在屏幕上的位置赌蔑。小部件是UI組件融蹂，例如按鈕和文本框绞幌。
上面的話看起來異常難懂是不是减响？沒關(guān)系脚囊，現(xiàn)在不需要去了解這些到底是怎么回事转晰，只需要一步一步做出你的程序就好芦拿。
新建一個(gè)工程文件，像我們的之前學(xué)過的那樣挽霉，創(chuàng)建一個(gè)新的empty activity
在Android Studio的狀態(tài)欄的“project”防嗡，打開app> res> layout> activity_main.xml
-
為了使在你能看到更多的空間，我們先隱藏幾個(gè)窗口
image.png 點(diǎn)擊圖上畫紅框的按鈕即可侠坎，這個(gè)按鈕點(diǎn)擊后會(huì)自動(dòng)收縮它所在的那個(gè)部分的窗口蚁趁，同理，你可以點(diǎn)擊AS上任意你想隱藏的窗口实胸，做同樣的處理他嫡，直到你認(rèn)為工作區(qū)域足夠舒適。
-
如果你的編輯器顯示的是一堆代碼庐完，不用害怕钢属，請單擊窗口底部的“ 設(shè)design”選項(xiàng)卡。
image.png -
之后依次點(diǎn)擊圖上畫紅框的按鈕门躯，直到和圖片上的狀態(tài)一摸一樣淆党。
（Pixel XL 那一欄可選擇多種不同的機(jī)型，建議選擇近兩年谷歌出的手機(jī)讶凉，盡量不要選nexus系列染乌，因?yàn)槟甏^于久遠(yuǎn)）
image.png
單擊工具欄中的邊距設(shè)置，也就是圖上機(jī)型按鈕下面的那個(gè)魔法棒圖標(biāo)旁邊的按鈕 懂讯，然后選擇 16（仍然可以稍后調(diào)整每個(gè)視圖的邊距荷憋，我們選16是為了配合谷歌官方的教程）。
下面我們解釋下左下角的Component Tree窗口褐望。它負(fù)責(zé)顯示布局（layout）的視圖層次結(jié)構(gòu)勒庄。在這種情況下，根視圖是一個(gè)ConstraintLayout瘫里，只包含一個(gè) TextView（也就是hello world）实蔽。
（在傳統(tǒng)的Android開發(fā)當(dāng)中，界面基本都是靠編寫XML代碼完成的减宣，然而自從Google大幅度更新AS后盐须，ConstraintLayout是用可視化的方式來編寫界面的一大神器，也就是說漆腌，在目前的學(xué)習(xí)中贼邓，你不需要花太大的精力區(qū)學(xué)習(xí)xml相關(guān)的知識(shí)）
ConstraintLayout是一種布局，它根據(jù)同級視圖和父布局的約束來定義每個(gè)視圖的位置闷尿。通過這種方式塑径，您可以使用平面視圖層次結(jié)構(gòu)創(chuàng)建簡單和復(fù)雜的布局。也就是說填具，它避免了嵌套這種情況的出現(xiàn)统舀。
添加一個(gè)文本框
需要?jiǎng)h除布局中已有的內(nèi)容。因此劳景，在左邊的窗口中單擊 TextView誉简，然后按Delete。（當(dāng)然也可以直接用鍵盤的delete刪除）
點(diǎn)擊palette盟广，會(huì)出現(xiàn)許多神奇的工具和按鈕闷串，搜索plain text（純文本），將純文本拖放到右邊的設(shè)計(jì)編輯器中筋量，它是接受純文本輸入的一個(gè)部件（變成應(yīng)用后烹吵，我們可以在這個(gè)地方輸入文字）。
點(diǎn)擊設(shè)計(jì)編輯器中的視圖〗拔洌現(xiàn)在可以在每個(gè)角落（方塊）看到調(diào)整大小手柄肋拔，并在每側(cè)（圓圈）上顯示約束錨點(diǎn)。（如圖操作）
拖拽后上左都設(shè)置局限為16呀酸，看起來像下面的這張圖
如果發(fā)現(xiàn)了右邊出現(xiàn)了黃色的感嘆號(hào)小三角凉蜂，并且點(diǎn)擊后如下圖顯示
需要進(jìn)行下面的操作
- 點(diǎn)擊design旁邊的text，切換到xml代碼界面性誉，在
android:id="@+id/editText"
后面添加一行
android:labelFor="@id/editText"
即可解決第一個(gè)感嘆號(hào)的問題
2.切換到app>res>values>strings.xml 依次點(diǎn)擊圖上的按鈕
創(chuàng)建一個(gè)新字符串作為文本框的“提示文本”窿吩。
創(chuàng)建完后，為了方便我們的下一步艾栋，我們再創(chuàng)建一個(gè)馬上要添加的按鈕的文本爆存。
4.返回之前的activity_main.xml文件，回到design界面蝗砾，雙擊文本框先较，右邊會(huì)出現(xiàn)對應(yīng)的屬性框，點(diǎn)擊圖上的按鈕悼粮，選擇我們之前建好的message文本闲勺，即可消除第二個(gè)感嘆號(hào)。
同理扣猫，我們再選擇右側(cè)的palette面板菜循，搜索button，拖拽至編輯器申尤，如圖操作
之后從中間的線拖拽至文本框中間癌幕，然后再點(diǎn)擊按鈕的左邊框衙耕，和文本的右邊框之間添加一個(gè)16sp的限制（如下圖）
此時(shí)編輯好后，雙擊按鈕勺远，出現(xiàn)按鈕對應(yīng)的屬性頁面橙喘，選擇文字那一項(xiàng)，和之前的純文本的文字替換做相同處理胶逢，換成我們之前創(chuàng)建的send文字厅瞎。
為了讓我們的程序響應(yīng)不同屏幕尺寸的布局，現(xiàn)在將使文本框伸展以填充所有剩余的水平空間初坠。
選擇兩個(gè)視圖（單擊一個(gè)和簸，按住Shift并單擊另一個(gè)視圖），然后右鍵單擊視圖并選擇Chain > Create Horizontal Chain碟刺。布局應(yīng)如圖所示锁保。
接下來更改按鈕的右邊距也為16，如圖
選擇文本框查看屬性南誊。單擊寬度指示器兩次身诺，以使其設(shè)置為Match Constraints
此時(shí)此刻，如果你點(diǎn)擊最下面的text抄囚，你的代碼應(yīng)該是這個(gè)樣子
<EditText
android:id="@+id/editText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:ems="10"
android:hint="@string/edit_message"
android:inputType="textPersonName"
app:layout_constraintEnd_toStartOf="@+id/button"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:text="@string/button_send"
app:layout_constraintBaseline_toBaselineOf="@+id/editText"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/editText" />
</android.support.constraint.ConstraintLayout>
現(xiàn)在插上手機(jī)霉赡，運(yùn)行一下這個(gè)程序試試吧，你會(huì)看到程序神奇的出現(xiàn)在了你的手機(jī)上幔托。下一次穴亏，我們將為這個(gè)程序添加一些小功能。
