请选择 进入手机版 | 继续访问电脑版

技术控

    今日:25| 主题:54680
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] 【Android】Splash实践 09/30

[复制链接]
唔爱你的温柔 发表于 2016-9-30 15:43:08
408 14

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
Splash 就是通常说的启动页,启动页既不是必须的,也不是一定要用单独的 Activity 实现。现在使用 Splash 的大致出于以下看考虑:
  
       
  • 为了加入开屏广告,在 App 广告中,这种开屏广告价格是比较高的。   
  • App 从启动到到进入第一个功能界面需要一定的时间,App 会持续一段时间的白屏。特别是冷启动,以及第一次安装启动的时候,这种白屏会特别明显。  
  本文主要是为了避免启动过程中的白屏问题,系统在启动 App 的第一个 Activity 时,会先显示 Activity 对应 Window 的 Background, 所以可以将第一个 Activity 的 WindowBackground 设置为特定的颜色或者图片,那么在启动阶段,会显示我们设置的 WindowBackground,而不是持续的白屏。
   values/styles.xml <style name="SplashBase" parent="AppTheme"> <item name="android:windowNoTitle">true</item> <item name="android:windowActionBar">false</item> <item name="android:windowFullscreen">true</item> <item name="android:windowBackground">@drawable/as_splash</item> </style>
  一个典型的 Splash 界面如下:
  即底部有一个产品的 Logo,界面中间或者上部是产品的 Slogan 或者图标。 如果 Splash 还有广告的话,大致会类似下面:
   

【Android】Splash实践 09/30

【Android】Splash实践 09/30-1-技术控-Android,android,Splash,parent,values

  为了实现这种效果,最简单的方式就是把 WindowBackground 设置成一张带有 Logo 和 Slogan 的全屏图片。不过这种处理方式太暴力了,而且会发生不可避免的变形。 比较合适的方式是把界面元素分成多个部分,然后通过 LayerDrawable 组合到一起。如下:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  3.     <item android:drawable="@android:color/white" /><!-- 白色底色 -->
  4.     <item
  5.         android:drawable="@drawable/as_slogan"
  6.         android:gravity="center" /><!-- slogan 居中 -->
  7.     <item
  8.         android:bottom="16dp"
  9.         android:drawable="@drawable/as_logo"
  10.         android:gravity="bottom|center_horizontal" /><!-- logo 居底部,并有 16dp 的边距 -->
  11. </layer-list>
复制代码
这样可以避免变形,也方便计算各种边距。要显示广告的时候,则可以将广告区域填满 Logo 上部区域(前景区域),从而遮住 Slogan 区域(背景区域)。如下:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:tools="http://schemas.android.com/tools"
  4.     android:id="@+id/activity_main"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     tools:context="dev.xesam.android.splash.demo.SplashActivity">
  8.     <RelativeLayout
  9.         android:layout_width="match_parent"
  10.         android:layout_height="match_parent"
  11.         android:layout_marginBottom="100dp"
  12.         android:background="#e4e4e4"><!-- 增加一个背景色,避免广告图片穿透 -->
  13.         <TextView
  14.             android:layout_width="wrap_content"
  15.             android:layout_height="wrap_content"
  16.             android:text="Ad Area(Left TOp)" />
  17.         <ImageView
  18.             android:layout_width="match_parent"
  19.             android:layout_height="wrap_content"
  20.             android:layout_centerVertical="true"
  21.             android:adjustViewBounds="true"
  22.             android:scaleType="fitCenter"
  23.             android:src="@drawable/ad_1" />
  24.         <Button
  25.             android:layout_width="wrap_content"
  26.             android:layout_height="wrap_content"
  27.             android:layout_alignParentRight="true"
  28.             android:text="Skip" />
  29.         <TextView
  30.             android:layout_width="wrap_content"
  31.             android:layout_height="wrap_content"
  32.             android:layout_alignParentBottom="true"
  33.             android:layout_alignParentRight="true"
  34.             android:text="Ad Area(Right Bottom)" />
  35.     </RelativeLayout>
  36. </RelativeLayout>
复制代码
即底部的产品 Logo 保持不变,界面上部换成对应的广告。
   

【Android】Splash实践 09/30

【Android】Splash实践 09/30-2-技术控-Android,android,Splash,parent,values

  问题

  如果要求在 Splash 的时候 Fullscreen,也就是隐藏 StatusBar,不过 Fullscreen 主题并不会隐藏底部的 Navigation Bar。 在 5.0 以上带有 Navigation Bar 的手机上,windowBackground 会显示在 Navigation Bar 下面,也就是图片被遮挡了一部分。 因此,在 5.0 以上系统中,可以设置:
  values-v21/styles.xml
  1. <style name="Splash" parent="SplashBase">
  2.         <item name="android:windowDrawsSystemBarBackgrounds">false</item>
  3.     </style>
复制代码
当然,也可以使用
  1. getWindow().getDecorView().setSystemUiVisibility()
复制代码
来隐藏 Navigation Bar,不过这种操作会导致其他的问题,当 Navigation Bar 这种系统 UI 被隐藏之后,用户的第一次触屏操作会导致系统 UI 的显示, 结果就导致其他 View 的点击事件失效,需要两次点击才能触发 App 的事件操作。所以,如果 Splash 不是单纯的展示品牌,还是尽量避免这种处理方式。
   示例 Demo 参见 GitHub AndroidSplash
   转载请注明来自:【xesam】 //android/2016/09/30/Android-Splash%E5%AE%9E%E8%B7%B5.html



上一篇:Push to production three times faster with the right git workflow
下一篇:Computing primes with CSS
528944900 发表于 2016-10-1 14:35:38
虽不明,但觉厉,你懂的
回复 支持 反对

使用道具 举报

RaymondHity 发表于 2016-10-9 08:26:50
我就算是一只癞蛤蟆,我也决不娶母癞蛤蟆.
回复 支持 反对

使用道具 举报

堇年纸鸢 发表于 2016-10-20 08:08:44
永远不要给背叛过自己的朋友第二次背叛的机会。
回复 支持 反对

使用道具 举报

紅顔只爲君笑 发表于 2016-10-20 11:24:33
这么大的盾牌你看不见,偏偏要把石头朝我脑袋上扔
回复 支持 反对

使用道具 举报

dddddddd 发表于 2016-10-21 03:27:54
人是铁,范是钢,一天不装憋得慌
回复 支持 反对

使用道具 举报

祖国的老花朵 发表于 2016-10-23 12:05:26
唔爱你的温柔是男的还是女的?
回复 支持 反对

使用道具 举报

ainideshikong 发表于 2016-10-24 14:00:17
最伤人的话,总出自最温柔的嘴。
回复 支持 反对

使用道具 举报

惠茜 发表于 2016-11-6 19:07:45
唔爱你的温柔,此事必有蹊跷!
回复 支持 反对

使用道具 举报

我已长发及腰 发表于 2016-11-11 21:20:17
信唔爱你的温柔,得永生!
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读


回页顶回复上一篇下一篇回列表
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )

© 2001-2017 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表