0307-屏幕适配
程序员文章站
2022-04-25 10:44:51
...
一、什么是屏幕适配
屏幕适配是通过尺寸、图片、文字和布局4种类型资源进行合理设计及规划,
在布局时合理利用各种类型资源,让布局拥有适应能力,能在各种设备先保持良好的展现效果。
二、如何进行屏幕适配
1.尺寸单位适配
在res下新建values-1080x960的文件夹,分别创建名为diemns.xml的文件。
在每个diemns.xml创建一个<dimen>标签:
<dimen name="btn_width">200dp</dimen>
<dimen name="btn_width">500dp</dimen>
注意:name的名字要一致
在activity.xml文件中创建一个Button,设置其宽度时,使用
<Button
android:layout_width="@dimen/btn_width"
android:layout_height="@dimen/btn_width"
android:text="@string/text_btn"
android:textSize="50sp"
/>
在1080*960的分辨率和正常分辨率下,观察Button的宽度变化。
2.图片适配
分别将两张不同的图片放入hdpi和xhdpi中,命名相同
在布局文件中创建一个ImageView,src属性指向刚才放入的图片
用不同的设备运行,观察分别加载刚才放入的图片
<ImageView
android:layout_width="@dimen/img_width"
android:layout_height="@dimen/img_width"
android:src="@mipmap/jsj"
/>
3.文字适配
文字适配是根据手机语言的设置,从而将APP内的语言随着手机语言而转换。
在res下新建values-en的文件夹,分别创建名为string.xml的文件。
在string.xml文件下分别写:
<string name="text_btn">Hello</string>
<string name="text_btn">你好</string>
以上两个图片包括了文字适配和图片适配的效果
4.布局适配
在res下新增layout-land和layout-port文件夹。分别创建名为activityb.xml文件。
其实就是把原来的布局文件复制到layout-land文件夹下。
观察横竖屏下不同的布局。
layout-port文件里xml代码
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"//横屏时为垂直布局
android:background="@color/colorPrimaryDark"
tools:context="com.test.project.applicationfragment.bActivity">
<ImageView
android:layout_width="@dimen/img_width"
android:layout_height="@dimen/img_width"
android:src="@mipmap/jsj"
/>
<TextView
android:layout_width="@dimen/btn_width"
android:layout_height="@dimen/btn_width"
android:text="@string/text_btn"
android:textSize="50sp"
/>
</LinearLayout>
layout-land文件里xml代码
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"//竖屏时为水平布局
tools:context="com.test.project.applicationfragment.bActivity">
<ImageView
android:layout_width="@dimen/img_width"
android:layout_height="@dimen/img_width"
android:src="@mipmap/jsj"
/>
<TextView
android:layout_width="@dimen/btn_width"
android:layout_height="@dimen/btn_width"
android:text="@string/text_btn"
android:textSize="50sp"
/>
</LinearLayout>
注意:不同布局文件下标签的命名一定要一致。
上一篇: 437. Path Sum III
下一篇: css3伸缩布局盒模型(一)