网站网页栅格化,网站架构设计师是做什么的,学生创业做网站制作设计,网站建设div设置圆角一.概念理解
闪屏页
1.当点击app开始的一瞬间#xff0c;所呈现出来的页面就是闪屏页。 2.为什么会有闪屏也#xff0c;由于app启动需要加载代码#xff0c;这个过程需要耗时#xff0c;在没有加载完成之前#xff0c;是看不到app真正的页面。所以app在没有完全加载完时…一.概念理解
闪屏页
1.当点击app开始的一瞬间所呈现出来的页面就是闪屏页。 2.为什么会有闪屏也由于app启动需要加载代码这个过程需要耗时在没有加载完成之前是看不到app真正的页面。所以app在没有完全加载完时系统会默认显示一个页面。 3.通常这个闪屏页如果没有进行配置能看到的就是白屏页或黑屏页。另外在闪屏页期间程序是无法控制的所以在这个阶段所看到的页面都是静态页面。
启动页
1.启动页是在闪屏页之后app真正加载完成了。这个时候程序是可控制的一般用于广告图的展示或者引导图的展示。 2.启动页也不是必须的如果不加启动页就直接显示首页了。
二显示方式
1.闪屏页
主流app展示方式如下分别是在默认模式和深色模式下的呈现方式 上边页面配置拆解 上边展示的页面就是闪屏页主要分为两个部分背景色前景图 背景色一般都为单色可根据系统主题适配比如深色模式。 前景图一般都为logo图标文字。图片是分开展示的分为上中下可适当配置。 为什么要这样配置程序推荐的方式适配率比较高比如说安卓大部分机型都能适配。
不推荐直接展示一整张图片
更多内容可看一下文章https://zhuanlan.zhihu.com/p/342038493
如下图这是在大屏端pad的呈现方式很明显图片被裁减缺失了一部分。 图片为什么被裁减了由于图片是整个屏幕显示需要适配不同机型会对图片进行等比例缩放超出的部分会被裁减。
这就是为什么不推荐显示一整张图的原因有没有解决的办法呢简单来说可以在做图片的时候主要的内容信息不要显示在图片的边缘。这样即使被裁减了也不会丢失图片主要信息看起来图片还是完整的。 3.启动页如下图
上边图片就是启动页的展示方式启动页一般是广告推广和进行用户引导。另外还能起到预加载的作用比如项目功能多上来就需要加载很多模块如果不加个启动页用户等待的时候过长体验不好。当然也可以不加启动页直接显示首页。
三.闪屏页配置
1.android端配置
在项目res中drawable目录中创建splash.xml如下
?xml version1.0 encodingutf-8?
layer-list xmlns:androidhttp://schemas.android.com/apk/res/android!--闪屏页背景色--itemshapesolid android:colorcolor/color_FFFFFF //shape/item!--中间前景图--itembitmapandroid:tintcolor/color_title_barandroid:gravitycenterandroid:srcdrawable/ic_splash_center //item!--底部前景图--item android:bottomdimen/space_70bitmapandroid:gravitybottomandroid:srcdrawable/ic_splash_bottom //item/layer-list最后在主题中引入 style namewelcomeTheme parentAppThemeitem nameandroid:windowBackgrounddrawable/splash/item/style这是安卓通用的配置方式不过这里还有个问题。
android 12上的闪屏页配置
主题配置如下 implementation androidx.core:core-splashscreen:1.0.0-beta02?xml version1.0 encodingutf-8?
resourcesstyle nameTheme.App parentandroid:style/Theme.NoTitleBar.Fullscreenitem nameandroid:statusBarColorandroid:color/transparent/itemitem nameandroid:navigationBarColorandroid:color/transparent/itemitem nameandroid:windowDrawsSystemBarBackgroundstrue/item/stylestyle nameLaunchTheme parentTheme.SplashScreenitem namewindowSplashScreenBackgroundcolor/splashScreenBackground/itemitem namewindowSplashScreenAnimatedIcondrawable/splashscreen_icon/itemitem namewindowSplashScreenAnimationDuration2000/itemitem namepostSplashScreenThemestyle/Theme.App/item/stylestyle nameNormalTheme parentandroid:style/Theme.Light.NoTitleBaritem nameandroid:windowBackground?android:colorBackground/item/style
/resourcessplashscreen_icon文件如下是个小动画 animated-vector xmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:aapthttp://schemas.android.com/aaptaapt:attr nameandroid:drawablevectorandroid:width108dpandroid:height108dpandroid:viewportHeight432android:viewportWidth432!--Scale down the icon and translate if to fitwithin the inner 2/3 (scale 0.67) or the viewport.--groupandroid:translateX97android:translateY97android:scaleX0.55android:scaleY0.55clip-path android:pathDatam322.02,167.89c12.141,-21.437 25.117,-42.497 36.765,-64.158 2.2993,-7.7566 -9.5332,-12.802 -13.555,-5.7796 -12.206,21.045 -24.375,42.112 -36.567,63.166 -57.901,-26.337 -127.00,-26.337 -184.90,0.0 -12.685,-21.446 -24.606,-43.441 -37.743,-64.562 -5.6074,-5.8390 -15.861,1.9202 -11.747,8.8889 12.030,20.823 24.092,41.629 36.134,62.446C47.866,200.90 5.0987,267.15 0.0,337.5c144.00,0.0 288.00,0.0 432.0,0.0C426.74,267.06 384.46,201.32 322.02,167.89ZM116.66,276.03c-13.076,0.58968 -22.531,-15.277 -15.773,-26.469 5.7191,-11.755 24.196,-12.482 30.824,-1.2128 7.8705,11.451 -1.1102,28.027 -15.051,27.682zM315.55,276.03c-13.076,0.58968 -22.531,-15.277 -15.773,-26.469 5.7191,-11.755 24.196,-12.482 30.824,-1.2128 7.8705,11.451 -1.1097,28.027 -15.051,27.682z /pathandroid:fillColor#3ddc84android:pathDatam322.02,167.89c12.141,-21.437 25.117,-42.497 36.765,-64.158 2.2993,-7.7566 -9.5332,-12.802 -13.555,-5.7796 -12.206,21.045 -24.375,42.112 -36.567,63.166 -57.901,-26.337 -127.00,-26.337 -184.90,0.0 -12.685,-21.446 -24.606,-43.441 -37.743,-64.562 -5.6074,-5.8390 -15.861,1.9202 -11.747,8.8889 12.030,20.823 24.092,41.629 36.134,62.446C47.866,200.90 5.0987,267.15 0.0,337.5c144.00,0.0 288.00,0.0 432.0,0.0C426.74,267.06 384.46,201.32 322.02,167.89ZM116.66,276.03c-13.076,0.58968 -22.531,-15.277 -15.773,-26.469 5.7191,-11.755 24.196,-12.482 30.824,-1.2128 7.8705,11.451 -1.1102,28.027 -15.051,27.682zM315.55,276.03c-13.076,0.58968 -22.531,-15.277 -15.773,-26.469 5.7191,-11.755 24.196,-12.482 30.824,-1.2128 7.8705,11.451 -1.1097,28.027 -15.051,27.682zandroid:strokeWidth1.93078 /group android:nameanimpathandroid:fillAlpha0.999android:fillColor#979797android:fillTypenonZeroandroid:pathDatam-197.42,638.59c0.0,0.0 -5.9627,-259.30 46.113,-215.87 32.895,27.437 76.838,-65.597 91.553,-46.592 2.7119,-7.7182 95.045,109.16 139.74,17.953 10.678,-21.792 43.788,-64.489 78.236,-16.164 54.226,76.069 110.90,-100.75 179.84,-17.966 36.393,43.701 96.377,-23.605 148.05,19.889 42.614,35.869 83.166,3.7255 109.76,61.101 24.321,52.465 35.893,197.64 35.893,197.64L631.77,92.867L-197.42,92.867Zandroid:strokeAlpha1android:strokeColor#00000000android:strokeWidth12 //group/group/vector/aapt:attrtarget android:nameanimaapt:attr nameandroid:animationobjectAnimatorandroid:duration1000android:propertyNametranslateYandroid:repeatCount0android:valueFrom0android:valueTo-432android:valueTypefloatTypeandroid:interpolatorandroid:interpolator/accelerate_decelerate //aapt:attr/targettarget android:nameanimaapt:attr nameandroid:animationobjectAnimatorandroid:duration500android:propertyNametranslateXandroid:repeatCount-1android:repeatModereverseandroid:valueFrom-162android:valueTo162android:valueTypefloatTypeandroid:interpolatorandroid:interpolator/accelerate_decelerate //aapt:attr/target
/animated-vector在AndroidManifest中引用 activityandroid:name.MainActivityandroid:exportedtrueandroid:launchModesingleTopandroid:themestyle/LaunchThemeandroid:configChangesorientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiModeandroid:hardwareAcceleratedtrueandroid:windowSoftInputModeadjustResize!-- Specifies an Android theme to apply to this Activity as soon asthe Android process has started. This theme is visible to the userwhile the Flutter UI initializes. After that, this theme continuesto determine the Window background behind the Flutter UI. --meta-dataandroid:nameio.flutter.embedding.android.NormalThemeandroid:resourcestyle/NormalTheme/intent-filteraction android:nameandroid.intent.action.MAIN/category android:nameandroid.intent.category.LAUNCHER//intent-filter/activity2.ios端配置
关于ios端的配置比较简单利用Xcode工具不需要写代码。
设置图标Icon
打开 Assets.xcassets将项目结构中的图片拉入 AppIcon 中的相应位置如下图所示。最后在你的 xcodeproj 中将 App Icons Source 设为 AppIcon接下来重新 Build 即可。 设置启动页面Launch Screen
在我当前的 Xcode 版本13.0中要设置启动页面需要有 Launch Screen File事实上这个文件可以使用 .storyboard。
我们在项目中创建 .storyboard文件我将其命名为 “Launch Screen.storyboard”。
打开我们的 storyboard然后在里面设计即可。
最后在我们的 xcodeproj 中将 Launch Screen File 设置为 “Launch Screen.storyboard”。
这样就完成了。
