×
13518219792

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

涨姿势了，原来Android屏幕适配还可以这么玩

为什么要屏幕适配?

创新互联主要从事成都网站制作、成都做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务姚安,10年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792

碎片化

为了保证用户获得一致的用户体验效果，使得某一元素在Android不同尺寸、不同分辨率的手机上具备相同的显示效果，则需要我们进行屏幕适配。

基础概念

屏幕尺寸

屏幕尺寸是指屏幕对角线的长度，单位是英寸，1 inch=2.54 cm

屏幕分辨率

手机在横向和纵向上的像素点数总和，单位是像素(pixel)，1px = 1像素点，举个栗子，1080x1920，即宽度方向上有1080个像素点，在高度方向上有1920个像素点。

屏幕像素密度

每英寸像素点个数，单位是dpi，dots per inch。为简便起见，Android 将所有屏幕密度分组为六种通用密度： 低、中、高、超高、超超高和超超超高。

dpi_example

屏幕密度无关像素dp(dip)

Density Independent Pixels，即密度无关像素。

density-test-bad

dimen_example2

独立比例像素sp

Scale Independent Pixels, 即sp或sip。

Android开发时用此单位设置文字大小，可根据字体大小***项进行缩放，推荐使用12sp、14sp、18sp、22sp作为字体设置的大小，不推荐使用奇数和小数，容易造成精度的丢失问题,小于12sp的字体会太小导致用户看不清。

屏幕适配之图片适配

在设计图标时，对于5种主流的像素密度(mdpi,hdpi,xhdpi,xxhdpi和xxxdpi)应按照2:3:4:6:8的比例进行缩放。例如一个启动图片ic_launcher.png,它在各个像素密度文件夹下大小为：

存在的问题

解决方法

Android SDK加载图片流程

根据加载图片的流程，可以得出理论上提供一套图片就可以了。

那么应该提供哪种分辨率规格呢?

原则上越高越好，同时结合当前主流分辨率屏幕

自动拉伸图片

ninepatch_raw

ninepatch_examples

屏幕适配之布局适配

布局参数

使用wrap_content, match_parent, layout_weight。

weight的使用

weight_examples

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2.       android:layout_width="match_parent"
    3. 
  
  
  
  
  3.       android:layout_height="wrap_content"
    4. 
  
  
  
  
  4.       android:orientation="horizontal">
    5. 
  
  
  
  
  5. 
  
  
  
  
  6.       
  
  
  
  
  7.           android:layout_width="0dp"
    8. 
  
  
  
  
  8.           android:layout_height="wrap_content"
    9. 
  
  
  
  
  9.           android:layout_weight="1"
    10. 
  
  
  
  
  10.           android:text="weight = 1"/>
    11. 
  
  
  
  
  11. 
  
  
  
  
  12.       
  
  
  
  
  13.           android:layout_width="0dp"
    14. 
  
  
  
  
  14.           android:layout_height="wrap_content"
    15. 
  
  
  
  
  15.           android:layout_weight="2"
    16. 
  
  
  
  
  16.           android:text="weight = 2"/>
    17. 
  
  
  
  
  17.    
    18.

当layout_width为match_parent,layout_weight分别为1和2

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2.       android:layout_width="match_parent"
    3. 
  
  
  
  
  3.       android:layout_height="wrap_content"
    4. 
  
  
  
  
  4.       android:orientation="horizontal">
    5. 
  
  
  
  
  5. 
  
  
  
  
  6.       
  
  
  
  
  7.           android:layout_width="match_parent"
    8. 
  
  
  
  
  8.           android:layout_height="wrap_content"
    9. 
  
  
  
  
  9.           android:layout_weight="1"
    10. 
  
  
  
  
  10.           android:text="weight = 1"/>
    11. 
  
  
  
  
  11. 
  
  
  
  
  12.       
  
  
  
  
  13.           android:layout_width="match_parent"
    14. 
  
  
  
  
  14.           android:layout_height="wrap_content"
    15. 
  
  
  
  
  15.           android:layout_weight="2"
    16. 
  
  
  
  
  16.           android:text="weight = 2"/>
    17. 
  
  
  
  
  17.    
    18.

weight的计算

宽度 = 原来宽度 + 权重比值 * 剩余宽度

***个按钮：宽度 = 0 + 1/3 * 屏宽 = 1/3屏宽

第二个按钮：宽度 = 0 + 2/3 * 屏宽 = 2/3屏宽

***个按钮：宽度 = 屏宽 + 1/3 (屏宽 - 2 屏宽) = 2/3屏宽

第二个按钮：宽度 = 屏宽 + 2/3 (屏宽 - 2 屏宽) = 1/3屏宽

布局使用

使用相对布局，禁用绝对布局。

限定符

尺寸限定符

最小宽度限定符

布局别名

***的两个文件的xml内容是完全相同的，这会带来：文件名的重复从而带来一些列后期维护的问题，修改一个文件，可能忘记修改另外一个。于是为了要解决这种重复问题，我们引入了布局别名。

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.      @layout/activity_main
    4. 
  
  
  
  
  4.   
    5. 
 
 
 
 
 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.   
    3. 
  
  
  
  
  3.       @layout/activity_twopanes
    4. 
  
  
  
  
  4.    
    5. 
 
 
 
 
 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.   
    3. 
  
  
  
  
  3.       @layout/activity_twopanes
    4. 
  
  
  
  
  4.    
    5.

屏幕方向限定符

屏幕适配之dimen适配

Nexus S (4英寸 480x800:hdpi)

dimen_example2

即使使用dp，依然不能解决屏幕分辨率的适配问题，我们可以针对不同的屏幕创建不同的dimen值。

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.  180dp
    3. 
  
  
  
  
  3.  160dp
    4. 
  
  
  
  
  4.   
    5. 
 
 
 
 
 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.       113dp
    3. 
  
  
  
  
  3.       100dp
    4. 
  
  
  
  
  4.    
    5.

屏幕适配之百分比布局

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.   
  
  
  
  
  3.       xmlns:android="http://schemas.android.com/apk/res/android"
    4. 
  
  
  
  
  4.       xmlns:app="http://schemas.android.com/apk/res-auto"
    5. 
  
  
  
  
  5.       android:layout_width="match_parent"
    6. 
  
  
  
  
  6.       android:layout_height="wrap_content">
    7. 
  
  
  
  
  7. 
  
  
  
  
  8.       
  
  
  
  
  9.           android:layout_width="0dp"
    10. 
  
  
  
  
  10.           android:layout_height="wrap_content"
    11. 
  
  
  
  
  11.           android:text="30%"
    12. 
  
  
  
  
  12.           app:layout_widthPercent="30%"/>
    13. 
  
  
  
  
  13. 
  
  
  
  
  14.       
  
  
  
  
  15.           android:layout_width="0dp"
    16. 
  
  
  
  
  16.           android:layout_height="wrap_content"
    17. 
  
  
  
  
  17.           android:layout_alignParentRight="true"
    18. 
  
  
  
  
  18.           android:text="20%"
    19. 
  
  
  
  
  19.           app:layout_widthPercent="20%"/>
    20. 
  
  
  
  
  20. 
  
  
  
  
  21.    
    22.

屏幕适配之自适应用户界面

newsreader_land

newsreader_port

当NewsReader在横屏时是双面板，左侧是HeadLinesFragment, 右侧是ArticleFragment, 点击新闻标题, 切换ArticleFragment的内容。当NewsReader在竖屏时是单面板，只有个HeadLinesFragment, 点击新闻标题，跳转到ArticleActivity去显示新闻内容。所以，要实现这样的横竖屏适配，只是通过布局是完成不了的，不同业务逻辑的处理，还需要写代码来完成，这就是我们的自适应用户界面。

使用布局别名

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.  @layout/onepane_with_bar
    3. 
  
  
  
  
  3.  false
    4. 
  
  
  
  
  4.   
    5. 
 
 
 
 
 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.  @layout/twopanes
    3. 
  
  
  
  
  3.  true
    4. 
  
  
  
  
  4.   
    5. 
 
 
 
 
 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.      @layout/onepane
    3. 
  
  
  
  
  3.      false
    4. 
  
  
  
  
  4.   
    5.

判断是单面板还是双面板

 
 
 
 
    
  
  
  
  
  1. View articleView = findViewById(R.id.article);
    2. 
  
  
  
  
  2. mIsDualPane = articleView != null && articleView.getVisibility() == View.VISIBLE;//如果能够找到ArticleFragment则是双面板 
    3.

单双面板的不同业务逻辑

 
 
 
 
    
  
  
  
  
  1. public void onHeadlineSelected(int index) {
    2. 
  
  
  
  
  2.     mArtIndex = index;    if (mIsDualPane) { 
    3. 
  
  
  
  
  3. 
  
  
  
  
  4.        // display it on the article fragment
    5. 
  
  
  
  
  5.         mArticleFragment.displayArticle(mCurrentCat.getArticle(index));
    6. 
  
  
  
  
  6.     }    else { 
    7. 
  
  
  
  
  7. 
  
  
  
  
  8.        // use separate activity
    9. 
  
  
  
  
  9.         Intent i = new Intent(this, ArticleActivity.class);
    10. 
  
  
  
  
  10.         i.putExtra("catIndex", mCatIndex);
    11. 
  
  
  
  
  11.         i.putExtra("artIndex", index);
    12. 
  
  
  
  
  12.         startActivity(i);
    13. 
  
  
  
  
  13.     }
    14. 
  
  
  
  
  14. } 
    15.

当前名称：涨姿势了，原来Android屏幕适配还可以这么玩
转载源于：http://cdbrznjsb.com/article/dhsesod.html

其他资讯

让你的专属顾问为你服务