FineWeather开坑记录

前言

九月份看完了郭霖大神的第一行代码，然后跟着书里的实战敲了一个天气app，但是感觉过于简陋，考虑到天气能锻炼到地方还挺多，于是打算自己开个坑。因为本人是美化爱好者，难得可以自己开发一个app，那本app自然是界面不能丑了，在保证实用性的基础上我会大力加点花里胡哨的东西。

准备

既然注册了彩云app的账号，那既然还是用这个api啦，提供的数据也足够用了。还要搜集插图，设计界面。

TODO（画饼）

  • 画launcher icon
  • 搜集插图
  • 设计界面
  • 完成基础功能
  • 优化好暗色模式
  • 升级动效
  • 待定

开坑

GitHub项目地址：可以来提issue哇

第一次失败

本来在dribble找了个挺好看的设计的，但是在GitHub上找到的shadow库全都用不了，就勉强用material design硬上了，然后发现好多东西都不会改，于是第一版设计结束了。泪目，丢个图纪念一下。属实是差别有点大。

记录一个小技巧

先放个效果图

demo

解释一下原理：

先创建一个buttom appbar，然后在这个部件里嵌入一个buttomnavigation，再把buttomnavigation的右边边距设置在fab的左边，就能做出这个效果。这样就可以同时拥有fab和navigation的特性

下面是示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#235fd9"
    >
    

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"

        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:backgroundTint="#ffffff"
        style="@style/Widget.MaterialComponents.BottomAppBar.Colored"
        app:contentInsetEnd="0dp"
        app:contentInsetStart="0dp"
        app:fabAlignmentMode="end"
        app:elevation="0dp"
        >

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavigation"

            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginEnd="100dp"
            app:backgroundTint="@android:color/transparent"
            app:elevation="0dp"
            app:itemIconTint="#585342"
            app:itemRippleColor="?attr/colorOnSurface"
            app:itemTextColor="#585342"
            app:labelVisibilityMode="selected"
            app:menu="@menu/navigation"

            android:elevation="0dp"/>

    </com.google.android.material.bottomappbar.BottomAppBar>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:backgroundTint="#ffffff"
        android:contentDescription="@string/todo"
        android:src="@drawable/ic_baseline_add_24"
        app:elevation="0dp"
        android:tint="#585342"
        app:layout_anchor="@id/bottomAppBar" />


</androidx.coordinatorlayout.widget.CoordinatorLayout>