在新创建项目的时候,会自动创建不同的drawable或者mipmap文件夹(在不同像素密度上提供不同的图片)
或者不同的value下面(在不同像素密度提供不同的值)dimens.xml(这个放在不同的values下面)
名称 | 像素密度范围 |
---|---|
mdpi | 120dpi-160dpi |
hdpi | 160dpi-240dpi |
xhdpi | 240dpi-320dpi |
xxhdpi | 320dpi-480dpi |
xxxhdpi | 480dpi-640dpi |
<Button
android:text="button1"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content" />
<Button
android:text="button2"
android:layout_width="0dp"
android:layout_weight="2"
android:layout_height="wrap_content" />
<Button
android:text="button1"
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="wrap_content" />
<Button
android:text="button2"
android:layout_width="match_parent"
android:layout_weight="2"
android:layout_height="wrap_content" />
BUTTON1为例 (第二种的0dp宽度)
1/3L --> 0 + (L) * 1/3 = 1/3L
BUTTON1为例 (第二种的match_parent)
2/3L --> L + (L-2L) * 1/3 = 2/3L
通过以上的算法,就知道了为啥上面的两个图的显示大小了,同时高度也是同样的适用。
res/layout/main.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-large/main.xml 双面板 (当运行到平板的时候,就会选用下面的布局(大于7英寸))
<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>
* 使用最小宽度限定符(android3.2之后)
res/layout/main.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-sw600dp/main.xml,双面板布局: Small Width 最小宽度(宽或者高最小的一边大于600dp就是用以下布局)
<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>
如果适配android3.2之前,要有以上的两个维护布
* 使用布局别名
使用布局别名
res/layout/main.xml: 单面板布局
res/layout-large/main.xml: 多面板布局
res/layout-sw600dp/main.xml: 多面板布局
多面板布局共同部分抽取出来,生成main_twopanes文件
res/layout/main.xml 单面板布局
res/layout/main_twopanes.xml 双面板布局
setContentView(R.layout.main);
默认布局
res/values/layout.xml:
<resources>
<item name="main" type="layout">@layout/main</item>
</resources>
Android3.2之前的平板布局
res/values-large/layout.xml:
<resources>
<item name="main" type="layout">@layout/main_twopanes</item>
</resources>
Android3.2之后的平板布局
res/values-sw600dp/layout.xml:
<resources>
<item name="main" type="layout">@layout/main_twopanes</item>
</resources>
* 使用屏幕方向限定符
使用屏幕方向限定符
res/values-sw600dp-land/layouts.xml:
<resources>
<item name="main" type="layout">@layout/main_twopanesitem>
resources>
res/values-sw600dp-port/layouts.xml:
<resources>
<item name="main" type="layout">@layout/mainitem>
resources>
小屏幕,纵向: | 1.单面板 |
---|---|
小屏幕,横向: | 单面板 |
7 英寸平板电脑,纵向: | 2.单面板,带操作栏 |
7 英寸平板电脑,横向: | 3.双面板,宽,带操作栏 |
10 英寸平板电脑,纵向: | 4.双面板,窄,带操作栏 |
10 英寸平板电脑,横向: | 双面板,宽,带操作栏 |
电视,横向: | 双面板,宽,带操作栏 |
1.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>
2.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>
3.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>
4.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>
1.res/values/layouts.xml:
<resources>
<item name="main_layout" type="layout">@layout/onepane_with_baritem>
<bool name="has_two_panes">falsebool>
resources>
2.res/values-sw600dp-land/layouts.xml:
<resources>
<item name="main_layout" type="layout">@layout/twopanesitem>
<bool name="has_two_panes">truebool>
resources>
3.res/values-sw600dp-port/layouts.xml:
<resources>
<item name="main_layout" type="layout">@layout/onepaneitem>
<bool name="has_two_panes">falsebool>
resources>
4.res/values-large-land/layouts.xml:
<resources>
<item name="main_layout" type="layout">@layout/twopanesitem>
<bool name="has_two_panes">truebool>
resources>
5.res/values-large-port/layouts.xml:
<resources>
<item name="main_layout" type="layout">@layout/twopanes_narrowitem>
<bool name="has_two_panes">truebool>
resources>
1、使用非密度制约像素
使用sp来控制文字的大小
使用dp来控制布局控件的位置(这里有坑,看看下面)
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorAccent"
android:orientation="vertical">
<Button
android:layout_width="150dp"
android:background="@android:color/holo_blue_dark"
android:layout_height="match_parent" />
<Button
android:layout_width="200dp"
android:layout_alignParentRight="true"
android:background="@android:color/darker_gray"
android:layout_height="match_parent" />
RelativeLayout>
由此可知,虽然我们已经使用了dp(密度无关)但是显示还是不能达到统一的效果
问题的关键所在—>各种设备的宽度不是一致的,即使使用dp,也是会有误差的。
解决思路—>不使用dp
多个values下面提供不同的dp值,(必须为每一种设备提供对应的资源文件,如果没有,就去默认的资源文件里面查找),但这个最终还是以px为单位的,这个就要自己斟酌了。
* 2、提供备用位图
* 不同的屏幕密度提供相匹配的图片
* 但是为了打包的小,一般还是一套图,一些比较重要的匹配的,可以多切几套图
* 使用和设备相符合的,使用的内存占用是最小的