學徒淺析Android開發:第六講——屏幕分辨率自適應

               作爲當今生活的必須品,手機屏幕的種類可爲是無奇不用,這也爲Android的開發人員造成了很大麻煩。小編在開發過程中,都是通過運用Layout的weight屬性來設計頁面的。weight即權重的意思,它表示 當前layout或layout的控件在當前父類中所佔面積的比例,所以權重越大,面積就越大。對於一個設計好的顯示頁面,就是通過設置weight將它分割出成若干個大小不一的layout,再在其中放置控件。

              但是這種設計只能保證佈局在當前設計的分辨率下處於完美狀態。爲此,小編無意中,在網上發現了一高手的文章,年代久遠,很抱歉忘記了它的地址,但是小編保留下了它的代碼。總體思路就是重寫layout中的horizontal和vertical,保證style爲此的layout可以跟隨屏幕自由伸縮。即實現了外部的layout 框架適應於任何屏幕。而位於每個layout中的控件則根據編譯者的需要設置權值即可。


下面是詳細代碼:

重寫的horizontal和vertical,是在values中,自定義一個XML,小編取名爲style_lz.xml,消息代碼如下:


<?xml version="1.0" encoding="utf-8"?>
<!-- @author Arthur Lee -->
<resources>
  <!-- 本處重寫了android:layout中的兩個關於佈局分佈格局的參數,分別是:
       @param layout_horizontal
       @param layout_vertical 
                    自定義了兩個參數,分別是:
       @param layout_full
       @param layout_wrap-->
  <!-- 全屏幕拉伸-->
  <!-- 控制當前佈局爲全屏分佈 -->
  <style name="layout_full"> 
    <!-- match_parent:即表示匹配當前父類的數據,和fill_parent一樣 -->
    <!-- 佈局的寬度爲父類的寬度 --> 
    <item name="android:layout_width">match_parent</item>
    <!-- 佈局的高度爲父類的高度 -->  
    <item name="android:layout_height">match_parent</item>  
  </style>  
  <!-- 固定自身大小-->
  <!-- 控制當前佈局,正常顯示當前佈局的大小 -->
  <style name="layout_wrap">  
    <!-- wrap_content:即表示匹配當前自身的大小 -->
    <!-- 佈局的寬度爲自己的寬度 -->
    <item name="android:layout_width">wrap_content</item> 
    <!-- 佈局的高度爲自己的高度 --> 
    <item name="android:layout_height">wrap_content</item>  
  </style>
  <!-- 橫向分佈-->
  <!-- 控制當前佈局爲橫向分佈,是對原有layout_horizontal的重寫 -->
  <!-- 首先讓其繼承於我們之前定義的layout_full,即處於全屏幕拉伸的狀態 -->
  <style name="layout_horizontal" parent="layout_full"> 
   <!-- 然後在其處於全屏幕拉伸的狀態下,將其寬度定義成0px,即可適應屏幕分辨率 --> 
   <!-- 在Android的XML中調用horizontal,
                        放置控件時是要讓其高度匹配當前Layout,而寬度隨意-->
   <!-- 所以定義成0px,是爲了讓佈局中的控件依靠當前高度進行縮放 -->
    <item name="android:layout_width">0px</item>  
  </style>    
  <!-- 縱向分佈-->
  <!-- 控制當前佈局爲橫向分佈,是對原有layout_vertical的重寫 -->
  <!-- 首先讓其繼承於我們之前定義的layout_full,即處於全屏幕拉伸的狀態 -->
  <style name="layout_vertical" parent="layout_full">  
   <!-- 然後在其處於全屏幕拉伸的狀態下,將其高度定義成0px,即可適應屏幕分辨率 -->
   <!-- 在Android的XML中調用vertical,
                        放置控件時是要讓其寬度匹配當前Layout,而高度隨意--> 
   <!-- 所以定義成0px,是爲了讓佈局中的控件依靠當前寬度進行縮放 -->
    <item name="android:layout_height">0px</item>  
  </style>   
</resources>

然後是main.xml的編譯:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:orientation="vertical"
    tools:context=".MainActivity" >
    <!-- @author Arthur Lee -->
    <!-- 縱向分割三部分,分別以ABC標記 -->
    <!-- 在這裏,我將介紹如何使用Layout的權重weight劃分XML頁面,設置佈局
                            和如何自定義樣式,實現屏幕分辯率自適應。 -->
    <!-- A -->
    <!-- 標題部分 -->
    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical|center_horizontal"
        android:layout_weight="1">
        <!-- 本頁logo -->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="學徒教學——屏幕分辨率自適應的方法"
            android:textSize="15sp" />
    </LinearLayout>
    <!-- B -->
    <!-- 正文部分 -->
    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_weight="8">
        <!-- 水平分割成3部分,以123標記 -->
        <!-- 1 -->
        <LinearLayout 
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"></LinearLayout>
        <!-- 2 -->
        <LinearLayout 
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="2"></LinearLayout>
        <!-- 3 -->
        <!-- 在此基礎上進行兩層分割,以亮灰色表示底層,
                                       以白色表示第一層分割,以黑色表示第二層分割 -->
        <!-- 在該部分使用自定義格式styles_lz實現屏幕自適應-->
        <LinearLayout
            style="@style/layout_vertical"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:layout_weight="3"
            android:background="@android:color/darker_gray">
            <!-- 第一層 -->
            <LinearLayout
                style="@style/layout_vertical"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:background="@android:color/white"
                android:layout_weight="4">
                <!-- 第二層 -->
                <LinearLayout 
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@android:color/black"
                    android:layout_weight="4">
                </LinearLayout>
                <LinearLayout 
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"></LinearLayout>
            </LinearLayout>
            <LinearLayout 
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_vertical|center_horizontal"
                android:layout_weight="1">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="測試文字"
                    android:textColor="@android:color/black"
                    android:textSize="30sp" />
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
    <!-- C -->
    <!-- 尾部部分 -->
    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1">
    </LinearLayout>

</LinearLayout>

下面是效果圖:


最後還是以一句話結尾:我不是一名好的程序員,因爲我只會默默奉獻。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章