Flutter 项目实战 应用图标启动页三

/  Android启动图标和启动页  /

        Android 设备不仅有不同屏幕的尺寸,屏幕也有不同的像素尺寸 。有可能一部设备的屏幕为每平方英寸 160 像素，而另一部设备的屏幕在相同的空间内可以容纳 480 像素。 如果您不考虑像素密度的这些差异，系统可能会缩放图片（导致图片变模糊），或者图片可能会以完全错误的尺寸显示。

/ 建议使用密度无关像素 dp ,作为度量单位来设计界面 , 文本大小用可缩放像素 (sp) 作为单位 /

        避免使用像素(px)来定义距离或尺寸 . 不建议像素来定义的理由是 : 不同的屏幕具有不同的像素密度，所以同样数量的像素在不同的设备上可能对应于不同的物理尺寸。

        dp是虚拟的像素单位 , 1 dp 约等于中密度屏幕（160dpi ; “基准”密度）上的 1 像素 。对于其它密度的手机 , Android 会将此值转换为相应的实际像素数。

        定义为“100px”宽，那么它在左侧设备上看起来要大得多。因此，您必须改用“100dp”来确保它在两个屏幕上看起来大小相同。

        定义文本大小时，用可缩放像素 (sp) 作为单位（但切勿将 sp 用于布局尺寸）。默认情况下，sp 单位与 dp 大小相同，但它会根据用户的首选文本大小来调整大小。

/ dp 转换 px /

px = dp * (dpi / 160)

动态将dp转换成实际像素值

DisplayMetrics.density 字段根据当前像素密度指定将 dp 单位转换为像素时所必须使用的缩放系数。

    // 需要转换的dp值
    private const val DP_VALUE = 16.0f
    
    private var mGestureThreshold: Int = 0
  
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // 获取屏幕的密度缩放比例
        val scale: Float = resources.displayMetrics.density

        // 根据密度缩放比例将dp转换成像素px
        mGestureThreshold = (DP_VALUE * scale + 0.5f).toInt()

        // Use mGestureThreshold as a distance in pixels...
    }
    

/ mipmap-hdpi、mipmap-mdpi ...... mipmap-xxxhdpi /

mipmap 文件夹下放置了不同密图标,作为应用的启动图标 developers mipmap

 / 创建不同分辨率的模拟器 /

/ 观察不同分辨率模拟器安装的应用图标清晰度 /

/ AndroidManifest.xml 配置 应用图标 /

<application
        android:icon="@mipmap/ic_launcher"
        android:label="demo">
</application>

 

/ drawable、drawable-v21 /

drawable-v21文件名后面的数字代表安卓的版本API ,v21代表的安卓5.0  developers apilevels

应用加载drawable会到对应到对应的API下去进行查找

   

/ launch_background.xml /

drawable文件夹和drawable-v21文件夹下launch_background.xml为应用启动白屏提供了方便,我们可以在里面自行定义自己想要的启动页样式 . layer-list是一个图层列表 , 里面可以放置自定义的图片样式. layer-list图层列表

<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/holo_blue_bright" />

    <!--  -->
     <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/ic_launcher" />
    </item>

</layer-list>

自定义 drawable-v21文件夹中 launch_background.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--背景-->
    <item android:drawable="@color/color_8" />
    
    <!--图标-->
    <item>
        <bitmap
            android:gravity="center_horizontal"
            android:src="@mipmap/ic_launcher" />

    </item>

</layer-list>

删除文件夹 drawable-v21文件并且保留drawable文件夹然后运行工程

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--背景-->
    <item android:drawable="@color/color_2" />

    <!--图标-->
    <item>
        <bitmap
            android:gravity="center_horizontal"
            android:src="@mipmap/ic_launcher" />

    </item>

</layer-list>

通过实验证明  应用加载drawable会到对应到对应的API下去进行查找 , 如果没有查找到会到drawable里面进行查找. 因为进行了删除drawable-v21文件夹.

/  LaunchTheme |  NormalTheme /

LaunchTheme 应用的启动主题  参考

<style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <!--启动页主题背景-->
        <item name="android:windowBackground">@drawable/launch_background</item>
    </style>

NormalTheme 应用的常规主题为FlutterActivity服务的. 显示时间较短    参考

<style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <!--主题背景颜色-->
        <item name="android:windowBackground">@android:color/holo_red_dark</item>
        <!--手机底部导航栏颜色-->
        <item name="android:navigationBarColor">@android:color/holo_green_dark</item>
    </style>

/ .9 启动图 /

错误绘制方案 :

在可拉伸区域(非图片区域),我进行上下左右四边 可拉伸区域绘制黑色线条

我也尝试在左边和底部绘制可拉伸区域也报错

加载提示 : splash_screen.9.png: AAPT: error: file failed to compile.

 正确绘制方案 : 在左上 绘制可以拉伸区域

 

 运行效果

/ ios启动图标和启动页  /

ios 启动图标 , 根据创建的共存到AppIcon.appiconset文件夹下进行替换

替换图标如果不修改名字那就直接覆盖对应尺寸的图标

替换图标如果修改名字请到Contents.json中进行修改对应尺寸的图标名字

运行效果

 

使用LaunchImage来设置启动图

查看Iphone常用尺寸

选择1284x2778作为3倍图、828x1792作为2倍图 进行启动页的适配

修改Content.json配置文件

{
  "images" : [
    {
      "idiom" : "universal",
      "scale" : "1x"
    },
    {
      "idiom" : "universal",
      "scale" : "2x"
    },
    {
      "filename" : "iPhone 12 Pro Max@3x 2.png",
      "idiom" : "universal",
      "scale" : "3x"
    },
   {
      "filename" : "320_480.png",
      "idiom" : "iphone",
      "scale" : "1x",
      "subtype" : "retina4"
    },
    {
      "filename" : "690_960.png",
      "idiom" : "iphone",
      "scale" : "2x",
      "subtype" : "retina4"
    },
    {
      "filename" : "iPhone SE_640x1136@2x.png",
      "idiom" : "iphone",
      "scale" : "3x",
      "subtype" : "retina4"
    },
    {
      "filename" : "iPhone 8 Plus_1242x2208@3x.png",
      "idiom" : "iphone",
      "scale" : "3x",
      "subtype" : "736h"
    },
    {
      "filename" : "iPhone 8_750x1334@2x-1.png",
      "idiom" : "iphone",
      "scale" : "2x",
      "subtype" : "667h"
    },
    {
      "idiom" : "iphone",
      "scale" : "3x",
      "subtype" : "2436h"
    },
    {
      "idiom" : "iphone",
      "scale" : "3x",
      "subtype" : "2688h"
    },
    {
      "idiom" : "iphone",
      "scale" : "2x",
      "subtype" : "1792h"
    }
  ],
  "info" : {
    "author" : "xcode",
    "version" : 1
  }
}

LaunchScreen.storyboard 添加ImageView (ImageView引用LaunchImage )

根据Xcode工具 点击预览不同尺寸手机启动页效果

运行效果