情境
PercentRelativeLayout 已棄用，因此，此篇就不更新為 Kotlin 版了。
多裝置一直都是 Android 開發者的痛，因此 Google 提供了一套新的 Layout library 讓開發者能夠輕鬆處理多裝置的問題，只需要透過比例的調整，就可以根據螢幕的大小來進行微調。
如果你想要使用 PercentRelativeLayout 那麼就必須透過 Gradle 將這個第三方 import。
compile 'com.android.support:percent:25.3.0'
根據你的 Android Studio 的 SDK 版本來調整你所 import 的 library
程式碼說明
一開始先放好 android.support.percent.PercentRelativeLayout 的位置，裡面只出現一個 TextView 來表示被包在裡面的百分比呈現，app:layout_widthPercent 以及 app:layout_heightPercent，這兩個屬性是用來呈現在 PercentRelativeLayout 內要以多少的比例出現，因為 PercentRelativeLayout 是以 match_parent 的長寬呈現，那麼就代表是螢幕的長跟寬。
- 這邊是因為把外面的 Layout 設定跟螢幕大小一樣
如果 PercentRelativeLayout 有設定大小
那麼內部的元件比例是以 PercentRelativeLayout 的大小為主
假設現在的螢幕是 1024* 1920 的解析度，那麼 TextView 的長寬比設定為 50% ，就代表占了螢幕畫面的一半
也就是 512 * 960。
<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:gravity="center"
android:background="#fff000"
app:layout_widthPercent="50%"
app:layout_heightPercent="50%"
android:text="Hello World!" />
</android.support.percent.PercentRelativeLayout>
那麼畫面就會出現如下所示。
接著我們再加入其他的屬性，app:layout_marginTopPercent 以及 app:layout_marginLeftPercent，這兩個屬性分別是跟 PercentRelativeLayout 表示要距離 Top 多遠的比例，以下面的例子來看是 25% ，代表距離解析度寬 1024 的上方 25% 也就是 256 pixel，同理距離解析度高 1920 的左邊 25% 就是 480 pixel。
<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:gravity="center"
android:background="#fff000"
app:layout_widthPercent="50%"
app:layout_heightPercent="50%"
app:layout_marginTopPercent="25%"
app:layout_marginLeftPercent="25%"
android:text="Hello World!" />
</android.support.percent.PercentRelativeLayout>
效果如下圖。
可以使用以下的屬性，全部都是以百分比的方式來指定。
- layout_widthPercent
- layout_heightPercent
- layout_marginPercent
- layout_marginLeftPercent
- layout_marginTopPercent
- layout_marginRightPercent
- layout_marginBottomPercent
- layout_marginStartPercent
- layout_marginEndPercent
- layout_aspectRatio
其中比較特別的是 layout_aspectRatio 這個屬性，這個屬性作用是長寬高的比例固定為 16 : 9 (1.78 : 1)，
那麼就可以這樣設定 。
<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:gravity="center"
android:background="#fff000"
android:layout_width="300dp"
app:layout_aspectRatio="178%"
android:text="Hello World!" />
</android.support.percent.PercentRelativeLayout>
如下圖所示。
如果你想讓指定的元件以正方形的比例呈現，就可以這樣設定，寬設定 n dp 讓高可以跟著寬走，所以設定 100 %。
<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:gravity="center"
android:background="#fff000"
android:layout_width="300dp"
app:layout_aspectRatio="100%"
android:text="Hello World!" />
</android.support.percent.PercentRelativeLayout>
如下圖所示。
這樣就是一個簡單的 PercentRelativeLayout 範例。
參考至官網
https://developer.android.com/reference/android/support/percent/PercentRelativeLayout.html
Android 還提供一個 PercentFrameLayout 也是相同作用
可以參考
https://developer.android.com/reference/android/support/percent/PercentFrameLayout.html