加载中…
个人资料
  • 博客等级:
  • 博客积分:
  • 博客访问:
  • 关注人气:
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

Android-启动图拉伸优化

(2023-11-23 18:41:34)
分类: androidios
ndroid - 启动图拉伸优化

App 在启动时会有短暂的白屏或者黑屏,我们往往会在启动 Activity 的设置 windowBackground,然而 Android 手机各种尺寸都有,因此会出现启动图拉伸的情况。

为了避免启动图拉伸,造成图片变形,目前业界有三种方案:

    使用 layer-list 来配置启动图,如皮皮虾。
    使用 layer-list 并结合 bitmap 标签的 tileMode ,如微信读书。
    使用 .9 图,如咸鱼 App。

layer-list

以皮皮虾的启动图为例,首先配置启动的 Activity 的 Theme:

 /res/valuse/styles.xml 文件中的 splash 主题的配置 :

 /res/drawable/splash.xml 配置如下:

 

这样图片不会被拉伸,但在全面屏上,皮这一下很开心这张图片会向上偏移,不过效果可以接受。
 layer-list 结合 tileMode

首先看下微信读书的启动页在全面屏的效果图:

样式 style :

app_launcher_layout.xml 为 :

bg_launch.xml 为:

 
使用 .9 图 

咸鱼在全面屏手机启动 App 的时候,启动图没有拉伸,看了下它的实现方式,发现是使用 .9 图。如下图为咸鱼的启动图:

AndroidStudio 在拉伸比较大的图时,非常难用,所以我准备好了教程给美工,让他切图。
代码中使用

主题中直接引用 .9 图片即可:

 
报错

.9 图引入工程后,如果编译报错:

    检查下 .9 图的文件命名。
    .9 图缺少黑边,四条黑边都不能少.

.9 图最终解决方案

迫于不够靓仔,指挥不动美工,于是还是决定自己制作 .9 图。点九图格式规定由左侧和上侧来控制图片的拉伸,右侧和下侧控制文字的显示区域。

首先对于长图而言,我们选择适当的 Zoom,然后移动滑块,能看到透明色块即可。

Mac 电脑操作

    点击 1px 透明色块后色块变黑,鼠标悬停在黑色色块右侧,会出现灰色区域,此时可以拖动灰色区域,创建黑色边。
    鼠标悬停在透明色块,按下 command 后拖动鼠标,可快速创造黑色边。
    鼠标悬停在黑色色块,按下 shift 后拖动鼠标,可快速清除黑色色块。
    如果发现左侧无法点击,隐藏点 IDE 左侧的导航栏,导航栏会影响点击,Mac 下按 command + 1 按钮。
    黑色的边越长,拉伸的越狠。

参考链接:

Android - 启动图拉伸优化

android启动页图片全屏时图片被拉伸问题_android启动图片拉伸_拼搏的欣的博客-CSDN博客

Android - 启动图拉伸优化_android layer-list 启动页_ilpanda的博客-CSDN博客
————————————————
版权声明:本文为CSDN博主「blog_jenny」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/blog_yue/article/details/130108203

0

阅读 收藏 喜欢 打印举报/Report
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有