【比你想的简单很多!从0开始完成一款App】6.app图标和欢迎页

个人博客CoorChice,https://chenbingx.github.io/ ,最新文章将会首发CoorChice的博客,欢迎探索哦 !
同时,搜索CoorChice关注我的微信公众号,同期文章也将会优先推送到公众号中,以提醒您有新鲜文章出炉。亦可在文章末尾扫描二维码关注。

【比你想的简单很多!从0开始完成一款App】6.app图标和欢迎页_第1张图片
封面.jpg

本系列文章列表

经过前面5篇的构建,我们已经基本打好了地基,现在可以开始往上叠加楼层(功能)了!本篇我们一起来为这个app更换一个图标,然后制作一个有意思的欢迎页面。

更换图标

使用Android Studio创建的应用默认会为我们在mipmap包下生成一个icon,它里面包含了一组不同大小的图标,目的是为了适配不同尺寸的Android设备,我们在更换时,也应该仿照它生成对应大小的图标。

不同像素密度下app图标的建议

以下是官方建议的不同像素密度下app图标大小:

dpi类型 dpi 建议图标尺寸
idpi 120dpi 36*36
mdpi 160dpi(标准尺寸1dp = 1px) 48*48
hdpi 240dpi 72*72
xhdpi 320dpi 96*96
xxhdpi 420dpi 144*144

图标导入插件

我们一个使用制图软件生成不同尺寸的图标,然后再分别复制粘贴到对应尺寸的drawablemipmap 文件夹下。但是这里我推荐一个Android Studio的插件,叫做Android Drawable Importer 。它可以直接以拖拽的方式将图标拖进去,然后自动生成对应不同尺寸的图标,当然你可以自定义。
下载该插件重启Sutiod后,在Project区按下command + N 或者右键->New 找到Batch Drawable Import

【比你想的简单很多!从0开始完成一款App】6.app图标和欢迎页_第2张图片
**command + N**
【比你想的简单很多!从0开始完成一款App】6.app图标和欢迎页_第3张图片
**右键->New**image

点击后看到如下界面,点击+号选择图标导入。

【比你想的简单很多!从0开始完成一款App】6.app图标和欢迎页_第4张图片
导入界面

点击ok后,进入如下页面,我们根据官方建议修改基准值,我以XHDPI为基准(在Source-Resolutionchu处选择)将尺寸设为72*72,后面的它会自动计算生产。下面选择目录到项目res下,改好名字,点击确定,他就会帮我们在drawable下生产符合要求的图片。

【比你想的简单很多!从0开始完成一款App】6.app图标和欢迎页_第5张图片
配置
【比你想的简单很多!从0开始完成一款App】6.app图标和欢迎页_第6张图片
生成的图标

下面在AndroidManifest.xml配置文件中,把标签下的android:icon 的值改成刚刚导入的图标。


【比你想的简单很多!从0开始完成一款App】6.app图标和欢迎页_第7张图片
效果图

欢迎页面

现在很多app都喜欢在启动应用的时候加一个欢迎页面,这样做可以让用户有一个缓冲,不会因为一进去就是操作页而感到突兀,同时最重要的是我们能在欢迎页初始化数据和配置,这样当进入主页时,能够直接呈现数据。当然我们这个项目的首次天气数据请求也会放到欢迎页中进行。

欢迎页面需求

  • 生动有趣,这样不会让人感觉到枯燥;
  • 有按钮点击进入主页,并且不能被返回;
  • 启动数据加载,并将数据缓存共享。

暂时这些,我们会在开发中根据情况再变化。

实现

看似这几个简单的需求,我们要做的事情也不少,所以我本篇只实现前两个需求,不然篇幅太长了。下面我们一步步来完成这个欢迎页面。

效果图走一波

效果图1
效果图2

SplashActivity

我将欢迎页面定义为一个Activity,本次我们主要关注的是动画和交互。
通过右键->Newcommand+N 找到Activity,然后创建一个EmptyActivity,创建时需要勾选上LauncherActivity把它作为启动后的第一个Activity,相应的会在AndroidManifest自动注册这个Activity(很方便啊!),然后继承改成之前写好的BaseActivity 。注意,由于Studio自动生成的MainActivity是默认的LauncherActivity所以需要把它该成普通的Activity。
此时的AndroidManifest.xml


    

    
     //设置自定义好的主题
      
        

        
      
    
  

这一有个坑需要注意 Android在绘制Activity页面之前,Window窗口默认是黑色的,可以看到上图效果中我已经把它调成了我需要的背景色,并且去掉了状态栏 。注意上面的AndroidManifest文件我标注地方,我使用了自定义主题。自定义主题写在values/styles.xml中。


  

其中themeBlueDeep颜色值为:

#52AEB4

下面看看SplashActivity的xml文件。



  

  

  

  

  

很简单,一个太阳、三个云都是ImageView,进入按钮是TextView。
我对TextView进行了一个简单的二次封装,便于以后统一修改。

public class NormalTextView extends TextView {
  public NormalTextView(Context context) {
    super(context);
  }

  public NormalTextView(Context context, AttributeSet attrs) {
    super(context, attrs);
  }

  public NormalTextView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
  }

  {
    this.setTypeface(Typeface.DEFAULT); //设置字体为默认字体
  }
}

从上图可以看到,这个欢迎页面主要就5个动画,我使用属性动画完成:

  • 太阳做旋转动画
private void playSunAnim() {
    ObjectAnimator anim = ObjectAnimator.ofFloat(sun, "rotation", 0f, 360f);
    anim.setRepeatMode(ObjectAnimator.RESTART); //因为是0-360,所以重复模式为从头开始
    anim.setRepeatCount(ObjectAnimator.INFINITE); //设置为无限重复
    anim.setInterpolator(new LinearInterpolator()); //设置为匀速动画,不然会出现明显的停顿效果。
    anim.setDuration(30 * 1000);
    anim.start();
  }
  • 3朵云做x轴上的水平动画,都差不多,就先展示一个。完整代码到GitHub看,在View->Activitys->SplashActivity 。地址:项目地址GitHub。
private void playCloud_1Anim() {
    //下面几步是在计算平移动画的起止点,结合xml来理解,最终实现的效果就是
    //当完全移动出屏幕左边时,立即从屏幕右边重新开始向左平移。有的为了实现层次感,它右边的起点我设置的在屏幕右边缘稍远的地方,具体的到GitHub看。
    int left = cloud_1.getLeft(); 
    int right = DisplayUtils.getScreenWidth() - cloud_1.getRight();
    int width = cloud_1.getMeasuredWidth();
    ObjectAnimator anim =
        ObjectAnimator.ofFloat(cloud_1, "translationX", right + width, -(left + width)); 
        
    anim.setRepeatMode(ObjectAnimator.RESTART);
    anim.setRepeatCount(ObjectAnimator.INFINITE);
    anim.setInterpolator(new LinearInterpolator());
    anim.setDuration(31 * 1000);
    anim.start();
  }

注意上面代码中,由于需要获取到控件的尺寸,而在View没有被绘制时我们是无法获取的,所以需要等View绘制到屏幕上后才能获取到。怎么知道View什么时候被绘制到屏幕上呢,我们在Activity的前几个回调onCreate()-onResume() 中均无法获取到,但是我们又让它一旦显示就要立即开始动画,怎么办呢?不怕,可以使用ViewTreeObserver.OnGlobalLayoutListener来监听View什么时候被绘制到屏幕上。

private void playAnimOnLayoutFinish() {
    // 需要在布局填充完成后才能获取到View的尺寸
    getWindow().getDecorView().getViewTreeObserver().addOnGlobalLayoutListener(
        new ViewTreeObserver.OnGlobalLayoutListener() {
          @Override
          public void onGlobalLayout() {
            playAnim();
            // 需要移除监听,否则会重复触发
            getWindow().getDecorView().getViewTreeObserver().removeGlobalOnLayoutListener(this);
          }
        });
  }
  • 进入按钮做透明度动画。
private void playJoinNowAnim() {
    ObjectAnimator anim = ObjectAnimator.ofFloat(joinNow, "alpha", 0.1f, 1f);
    anim.setDuration(2000);
    anim.setRepeatCount(ObjectAnimator.INFINITE);
    anim.setRepeatMode(ObjectAnimator.REVERSE);
    anim.start();
  }

接着,我们需要监听进入按钮的点击事件,一旦点击就跳入MainActivity,并finish()掉,不然这个Activity就会存在Activity返回栈中 。

private void registerJoinNowListener() {
    joinNow.setOnClickListener(v -> jumpToMainActivity());
  }
  
private void jumpToMainActivity() {
    Intent intent = new Intent(this, MainActivity.class);
    startActivity(intent);
    finish();
  }

现在我们已经实现了前两个需求,第三个加载数据的需求我们下篇在一起来完成。
本篇的具体代码请到GitHub查看,地址:项目地址GitHub。

资源

  • Launcher图标资源
  • 太阳
  • 云的图片是SVG格式的,请到GitHub项目中找。快捷传送门

项目地址GitHub

【比你想的简单很多!从0开始完成一款App】6.app图标和欢迎页_第8张图片
CoorChice的公众号

你可能感兴趣的:(【比你想的简单很多!从0开始完成一款App】6.app图标和欢迎页)