2013年3月13日 星期三

How to support all the different resolutions of android products

since: 2013/03/13
update: 2013/03/13

reference:
馬克周.技術隨筆: [Android] 滿足各種不同螢幕尺寸


A. 說明:
     1. 先不考慮不同裝置大小的版面配置, 在此先以依裝置大小來縮放版面的方式處理.
         屬於通用的處理方式, 並不能保證任何 android 裝置都能適用.
 
     2. 在版面設計上長度(位置)單位要使用 spdp

----------------------------------------------------------------------------------------

B. 假設 UI 設定檔(activity_main.xml)有ㄧ TextView 元件如下:
    <TextView id="@+id/txtHello"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="25sp"
        android:layout_marginTop="45sp"
        android:text="Hello World !"
        android:textSize="20sp"
        android:textColor="#000"/>

----------------------------------------------------------------------------------------

C. 在 Eclipse 的 Package Explore 專案中的 res/ 目錄下新增以下資料夾:
     values-hdpi, values-ldpi, values-mdpivalues-xdpi
     (p.s. 預設只有: values 資料夾)
     分別新增 dimens.xml 如下: (在此以 res/values/res/values-hdpi/ 為例)

// ---> res/values/dimens.xml 的內容
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- normal dpi -->
    <dimen name="txtHello_layout_marginLeft">25sp</dimen>
    <dimen name="txtHello_layout_marginTop">45sp</dimen>
    <dimen name="txtHello_textSize">20sp</dimen>
</resources>


// ---> res/values-hdpi/dimens.xml 的內容
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- hdpi  -->
    <dimen name="txtHello_layout_marginLeft">50sp</dimen>
    <dimen name="txtHello_layout_marginTop">108sp</dimen>
    <dimen name="txtHello_textSize">32sp</dimen>   
</resources>

----------------------------------------------------------------------------------------

D. 將原本 UI 設定檔的 TextView 元件修改如下:
    <TextView android:id="@+id/txtHello"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/txtHello_layout_marginLeft"
        android:layout_marginTop="@dimen/txtHello_layout_marginTop"
        android:text="Hello World !"
        android:textSize="@dimen/txtHello_textSize"
        android:textColor="#000"/>

沒有留言:

張貼留言

注意:只有此網誌的成員可以留言。