黑马程序员技术交流社区

标题: Android屏幕适配解决方案（四） [打印本页]

---

作者: Android_Robot    时间: 2017-1-12 16:44
标题: Android屏幕适配解决方案（四）
使用布局别名设想这么一个场景

当你需要同时为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>

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2