A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

使用布局别名设想这么一个场景
当你需要同时为Android 3.2版本前和Android 3.2版本后的手机进行屏幕尺寸适配的时候,由于尺寸限定符仅用于Android 3.2版本前,最小宽度限定符仅用于Android 3.2版本后,所以这会带来一个问题,为了很好地进行屏幕尺寸的适配,你需要同时维护layout-sw600dp和layout-large的两套main.xml平板布局,如下:
  • 适配手机的单面板(默认)布局:res/layout/main.xml
  • 适配尺寸>7寸平板的双面板布局(Android 3.2前):res/layout-large/main.xml
  • 适配尺寸>7寸平板的双面板布局(Android 3.2后)res/layout-sw600dp/main.xml

最后的两个文件的xml内容是完全相同的,这会带来:文件名的重复从而带来一些列后期维护的问题

于是为了要解决这种重复问题,我们引入了“布局别名”
还是上面的例子,你可以定义以下布局:
  • 适配手机的单面板(默认)布局:res/layout/main.xml
  • 适配尺寸>7寸平板的双面板布局:res/layout/main_twopanes.xml

然后加入以下两个文件,以便进行Android 3.2前和Android 3.2后的版本双面板布局适配:
  • res/values-large/layout.xml(Android 3.2之前的双面板布局)
    <resources> <item name="main" type="layout">@layout/main_twopanes</item></resources>
  • res/values-sw600dp/layout.xml(Android 3.2及之后的双面板布局)
    <resources><item name="main" type="layout">@layout/main_twopanes
    </item></resources>


注:
  • 最后两个文件有着相同的内容,但是它们并没有真正去定义布局,它们仅仅只是将main设置成了@layout/main_twopanes的别名
  • 由于这些文件包含 large 和 sw600dp 选择器,因此,系统会将此文件匹配到不同版本的>7寸平板上:
    a. 版本低于 3.2 的平板会匹配 large的文件
    b. 版本高于 3.2 的平板会匹配 sw600dp的文件

这样两个layout.xml都只是引用了@layout/main_twopanes,就避免了重复定义布局文件的情况

屏幕方向(Orientation)限定符
  • 使用场景:根据屏幕方向进行布局的调整
    取以下为例子:

    • 小屏幕, 竖屏: 单面板
    • 小屏幕, 横屏: 单面板
    • 7 英寸平板电脑,纵向:单面板,带操作栏
    • 7 英寸平板电脑,横向:双面板,宽,带操作栏
    • 10 英寸平板电脑,纵向:双面板,窄,带操作栏
    • 10 英寸平板电脑,横向:双面板,宽,带操作栏
    • 电视,横向:双面板,宽,带操作栏

方法是:
  • 先定义类别:单/双面板、是否带操作栏、宽/窄
    定义在 res/layout/ 目录下的某个 XML 文件中
  • 再进行相应的匹配:屏幕尺寸(小屏、7寸、10寸)、方向(横、纵)
    使用布局别名进行匹配

  • 在 res/layout/ 目录下的某个 XML 文件中定义所需要的布局类别
    (单/双面板、是否带操作栏、宽/窄)

[Java] 纯文本查看 复制代码
res/layout/onepane.xml:(单面板)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
 android:orientation="vertical"  
 android:layout_width="match_parent"  
 android:layout_height="match_parent">  

 <fragment android:id="@+id/headlines"  
           android:layout_height="fill_parent"  
           android:name="com.example.android.newsreader.HeadlinesFragment"  
           android:layout_width="match_parent" />  </LinearLayout>


res/layout/onepane_with_bar.xml:(单面板带操作栏)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:orientation="vertical"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent">  
    <LinearLayout android:layout_width="match_parent"   
                  android:id="@+id/linearLayout1"    
                  android:gravity="center"  
                  android:layout_height="50dp">  
        <ImageView android:id="@+id/imageView1"   
                   android:layout_height="wrap_content"  
                   android:layout_width="wrap_content"  
                   android:src="@drawable/logo"  
                   android:paddingRight="30dp"  
                   android:layout_gravity="left"  
                   android:layout_weight="0" />  
        <View android:layout_height="wrap_content"   
              android:id="@+id/view1"  
              android:layout_width="wrap_content"  
              android:layout_weight="1" />  
        <Button android:id="@+id/categorybutton"  
                android:background="@drawable/button_bg"  
                android:layout_height="match_parent"  
                android:layout_weight="0"  
                android:layout_width="120dp"  
                style="@style/CategoryButtonStyle"/>  
    </LinearLayout>  

    <fragment android:id="@+id/headlines"   
              android:layout_height="fill_parent"  
              android:name="com.example.android.newsreader.HeadlinesFragment"  
              android:layout_width="match_parent" />  </LinearLayout>


res/layout/twopanes.xml:(双面板,宽布局)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal">
    <fragment android:id="@+id/headlines"
              android:layout_height="fill_parent"
              android:name="com.example.android.newsreader.HeadlinesFragment"
              android:layout_width="400dp"
              android:layout_marginRight="10dp"/>
    <fragment android:id="@+id/article"
              android:layout_height="fill_parent"
              android:name="com.example.android.newsreader.ArticleFragment"
              android:layout_width="fill_parent" /></LinearLayout>

res/layout/twopanes_narrow.xml:(双面板,窄布局)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal">
    <fragment android:id="@+id/headlines"
              android:layout_height="fill_parent"
              android:name="com.example.android.newsreader.HeadlinesFragment"
              android:layout_width="200dp"
              android:layout_marginRight="10dp"/>
    <fragment android:id="@+id/article"
              android:layout_height="fill_parent"
              android:name="com.example.android.newsreader.ArticleFragment"
              android:layout_width="fill_parent" /></LinearLayout>


0 个回复

您需要登录后才可以回帖 登录 | 加入黑马