学徒浅析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>

下面是效果图:


最后还是以一句话结尾:我不是一名好的程序员,因为我只会默默奉献。

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