前言
學(xué)到現(xiàn)在蜡吧，我終于開發(fā)出一款 APP 了毫蚓，好開心、好興奮（感覺自己好假昔善，你就當(dāng)我是個(gè)假人吧）元潘，雖然這個(gè) APP 很簡單，只有一個(gè)頁面君仆，但是通過這次課程的學(xué)習(xí)翩概，還是收獲了很多的，視頻所說的流程與邏輯分析是極好的返咱。那么我們就來實(shí)現(xiàn)這個(gè) APP 吧钥庇。
1. 開發(fā)工具的準(zhǔn)備
- 一臺(tái)可以上網(wǎng)的電腦
- 安裝 JDK（Java 語言軟件開發(fā)工具包）
- 安裝 Android SDK（Android 開發(fā)工具包）
- 安裝 Android Studio（Android IDE）
關(guān)于以上工具的安裝網(wǎng)上的教程有很多，在這里就不過多的做介紹了咖摹，這里給大家推薦幾個(gè)教程和下載地址吧上沐。
- AndroidDevTools：在這里關(guān)于 Android 的應(yīng)有盡有
- [Android Studio教程從入門到精通](http://www.open-
open.com/lib/view/open1433387390635.html) - 黑科技發(fā)布帖… 教你如何安裝 Android Studio
- Win10 電腦 Java 環(huán)境配置教程分享
準(zhǔn)備好一切之后，你就可以開開心心來開發(fā) APP 了楞艾。
2.APP UI 界面分析
因本次的 APP 只有一個(gè) UI 界面，也沒有功能需要實(shí)現(xiàn)龄广，只需要在手機(jī) UI 頁面展示而已硫眯，那么我們就快樂的來分析它的 UI 界面吧！
根據(jù)上圖我們一眼可以分析得到
- 有一張圖片------所以我們需要一個(gè)用來顯示圖片的控件 ImageView
- 左上角有一段 "Happy Birthday Ben" 的文字------所以我們需要一個(gè)用來顯示文字的控件 TextView
- 右下角有一段 "From vole择同！" 的文字------所以我們還要用一個(gè)來顯示文字的控件 TextView
根據(jù)我們簡單的分析得到該 UI 界面需要一個(gè) ImageView 控件和兩個(gè) TextView 控件两入，那么我們現(xiàn)在所需要解決的事情就是如何把它們顯示在 UI 界面上和控件所需要的屬性問題。
腦中思考 ing：怎樣把一個(gè) ImageView 控件和兩個(gè) TextView 控件顯示在 UI 界面上?
選擇什么布局方式敲才？
idea：根據(jù)前面的課程學(xué)習(xí)裹纳，我們知道控件是要放在 ViewGroup 中的，而我們學(xué)習(xí)過兩種布局方式紧武，一種是** LinearLayout（線性布局）剃氧，還有一種是 RelativeLayout（相對(duì)布局），那我們到底該使用那種布局方式呢阻星？根據(jù)上圖信息可以得到朋鞍，三個(gè)控件并不是按照單行或者單列來排序的，而是隨便分布的，所以就可以去掉 LinearLayout ** 布局了滥酥，那么我們就選擇 RelativeLayout 布局更舞。三個(gè)控件的屬性選擇？
idea：ImageView 的屬性：
首先先從網(wǎng)上下載一張圖片坎吻，然后根據(jù) RelativeLayout 布局特性：如果子控件在布局中沒有選擇位置屬性缆蝉，那么子控件就會(huì)按照順序相互疊加。所以我就把 ImageView 放在第一個(gè)位置瘦真，因?yàn)閳D片是布滿整個(gè)屏幕刊头，并且相對(duì)于屏幕垂直水平居中，那么我就選擇 ImageView 中的
android:layout_centerInParent="true"
android:scaleType="centerCrop"
這兩個(gè)屬性來達(dá)到效果吗氏。
- 兩個(gè) TextView 中的屬性：
從圖中可以看出兩個(gè) TextView 的顏色為 white芽偏，這樣就能更好的在深色的背景中顯示出來了，而文本的字體我選擇是 sans-serif-ligh 這個(gè)字體弦讽，而大小我選擇的是 36sp ,這些都是基本的屬性選擇污尉，你可以根據(jù)自己的喜好來設(shè)計(jì)這些屬性。
TextView 的屬性我們基本已經(jīng)選擇完了往产，我們就來看兩個(gè) TextView 的位置吧被碗，因?yàn)樵?RelativeLayout 布局中控件默認(rèn)出現(xiàn)在屏幕的左上方，所以我就不管顯示 "Happy Birthday Ben" 的 TextView 了仿村，而顯示 "From vole !" 的 TextView 位于屏幕的右下方锐朴，那么就選擇
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
這兩個(gè)屬性就能完美解決位置問題了，為了讓兩個(gè) TextView 顯示的更好一點(diǎn)蔼囊，我就給它們加了點(diǎn)邊距焚志，所以Talk is cheap. Show me the code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:layout_centerInParent="true"
android:contentDescription="@string/app_name"
android:src="@drawable/party"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:fontFamily="sans-serif-light"
android:text="Happy Birthday Ben"
android:textColor="@android:color/white"
android:textSize="36sp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_margin="15dp"
android:fontFamily="sans-serif-light"
android:text="From vole !"
android:textColor="@android:color/white"
android:textSize="36sp"/>
</RelativeLayout>
上面的代碼就能實(shí)現(xiàn)原圖的效果了（不要問我為什么知道，自己試試就知道了）畏鼓。
總結(jié)
雖然這次的學(xué)習(xí)只是一個(gè)簡單的 UI 界面實(shí)現(xiàn)酱酬，但對(duì)于初學(xué)者還是極好的（遙想當(dāng)年開發(fā)出第一個(gè) APP 時(shí)候的心情），學(xué)習(xí)就該一步一步來云矫。
混子型打野的混子日常