Blogtrottr
海芋小站
提供實用軟體教學，介紹有趣網站及資訊，豐富電腦人生 
Kindle Book Deals

We find the best deals on best-selling Kindle books for you. Just tell us which genres you love and we'll do the rest. The best part? It's completely free!
From our sponsors
thumbnail [Android 開發] 想要依比例來切割版型嗎？ 靠「android:layout_weight」吧！
Sep 11th 2013, 18:25, by 張海芋

在 Android 開發實務上，由於每隻手機所提供的解析度都不一樣，所以如果要依比例切割版型，最好的方式還是使用「android:layout_weight」，但就開發的實務上，「android:layout_weight」並不一定會依我們所預想的比例來實現切割版型，舉例來說，如果有以下的程式碼：

<LinearLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/layout_outer"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical" >

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1" >
 <Button
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:text="Button4" />       
  </LinearLayout>

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="9">
        <Button
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:text="Button3" />
   </LinearLayout>
</LinearLayout>


以一般人的邏輯來想，這是將上面切成兩等份，其中 Button4 佔了1/10，而 Button 3 佔了 9/10，而實際上也正是如我們所預料的結果。但再看看以下的程式碼：
<LinearLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/layout_outer"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical" >

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1" >
 <Button
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:text="Button4" />       
  </LinearLayout>

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:layout_weight="9">
        <Button
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:text="Button3" />
   </LinearLayout>
</LinearLayout>

如果執行以上的程式碼，可以發現同樣的想法，不同的是，只將「 android:layout_height」改為「match_parent (fill_parent)」， Button4 竟佔了9/10，而 Button 3 只佔了 1/10，這是為什麼呢？

答案就是「match_parent」和「wrap_content」的差異！

「wrap_content」是指依內容填塞，而填塞的內容要符合子元件的內容，也就是說要盡可能的小，也因此，Android 先去參考權重值，這時發現有兩個權重值，分別是 1/10 和 9/10，因為 Button 4 的權重值較低，所以將 Button 4 設為 1/10，Button 3 設定為 9/10。

但是如果是使用「match_parent」，元件要愈大愈好，所以 Android 在初使化時，也一樣會參考權重值，一樣是發現已經算好了兩種權重值，分別是 1/10 和 9/10，基於元件愈大愈好的原則，所以在「match_parent」的情況下，權重值愈高的元件，所分配到的比例就愈低，就將 Button 4 設為 9/10，便把 Button 3 設定為 1/10 了！

但是聰明的人馬上就想到另一種變形。

<LinearLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/layout_outer"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical" >

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1" >
 <Button
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:text="Button4" />       
  </LinearLayout>

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:layout_weight="2">
        <Button
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:text="Button3" />
   </LinearLayout>
   <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:layout_weight="3">
        <Button
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:text="Button5" />
   </LinearLayout>
</LinearLayout>

這就就會問的是，在使用「match_parent」的情況下，為什麼 Button 5 不見了呢？這點只能猜測的是， Android 在「match_parent」設定權重值的情況下，只會將視窗切成兩個等分，而挑法是去找權重值最低的兩個，來做分配。以這個例子來說，會去找權重值最低的 Button 4 和 Button 3，而 Button 5 因為權重值較高，所以就不予理會。所以就將 Button 4 設為 2/3，將 Button 3 設為 1/3。

最後一種情況是，同樣是採用 match_parent，有兩個 layout_weight 是相同的，如下列程式碼：

<LinearLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/layout_outer"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical" >

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1" >
 <Button
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:text="Button4" />       
  </LinearLayout>

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:layout_weight="2">
        <Button
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:text="Button3" />
   </LinearLayout>
   <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:layout_weight="2">
        <Button
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:text="Button5" />
   </LinearLayout>
</LinearLayout>

為什麼 Button4 會分到 3/5 呢？因為這時三個權重值有兩個是相同的，Android 無法挑掉最高的權重值的情況下，，基於元件愈大愈好的原則，所以在「match_parent」的情況下，權重值愈高的元件，所分配到的比例就愈低，所以Button5 和 Button3 分別分到 1/5，那剩下的就會直接分給 Button4 囉！

以上是開發的小小心得，是以比較白話的方式來呈現，當然 Android 實做的細節海芋沒有去研究，只是寫這篇文章來記錄自己的開發過程，有錯的地方也請大家多多指導囉！

覺得這篇文章實用嗎？請按讚來分享給更多好朋友知道唷！
喜歡本站的文章嗎？歡迎透過以下方式追蹤本站
版權說明
本文章發佈於海芋小站，內容僅歡迎「部份」引用，引用時請註明出處及原文連結，謝謝。
若圖像無法顯示，可能因流量太大，敬請重新整理或透過留言與我回報，也歡迎「訂閱」本站文章喔，感恩!!
Related Posts with Thumbnails

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers. Five Filters recommends:

You are receiving this email because you subscribed to this feed at blogtrottr.com.

If you no longer wish to receive these emails, you can unsubscribe from this feed, or manage all your subscriptions
arrow
arrow
    全站熱搜

    xals2q 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄