Kotlin开发安卓APP笔记实战-写个简易记事本（需求分析）_kotlin 零基础记事本

Kotlin不止之前笔记里学的这些基础，不过不看了，还是实战吧，遇到问题再去解决。
创建工程环境啥的之前都讲过就不讲了，阅读此笔记需要一些安卓开发的经验和知识，不懂的可以在猫客论坛评论区提问，或者我的csdn博客地址评论，不知道有没有转载，欢迎转载，注明出处就好。因为白天需要上班，可能更新得会慢一点。

分析记事本功能以及画草图

无论做什么事，脑袋里面一定先要有对这件事情有个大致的思路，该怎样去做，胸有成竹，这样才能画出好的竹子。做软件也一样，你可以把你自己做的事情当成在搞艺术。。。（不吹了，吹起牛来，我自己都害怕0.0）
其实记事本很简单，只需要创建两个页面，一个页面用列表或者九宫控件（RecyclerView/ListView/GridView）显示你创建的item，然后一个页面编辑内容就行了。数据存储使用sqlite，更灵活方便。

设计sqlite表

对于sqlite语法不太了解可以先看看菜鸟教程
设定表名为note

所以创建表格的sql语句为：

create table note(ID INT PRIMARY KEY NOT NULL,createtime TIMESTAMP NOT NULL,chagetime TIMESTAMP,title CHAR(255) NOT NULL,content TEXT NOT NULL);
1

画草图

windows自带画图工具用来做个草图还是很好的，做不到很精美的效果，但是你可以快速做出大致的草图，所以我很喜欢用这个工具。win+R输入mspaint命令快速打开画图工具

分析界面

界面1
这里是列表显示笔记数据，所以表格控件GridView不适合，选择ListView或者RecyclerView，本笔记选择RecylerView。Item的布局可以选择垂直线性布局，为Item绑定长按事件，作为删除笔记的功能。右下角的“+”按钮作为新增按钮，使用Floating ActionButton。
界面2
这个界面就简单了，上面是一个包含返回按钮和保存按钮的toolbar，不会toolbar也可以使用一个layout实现功能，本笔记将采用toolbar。下面就是一个充满界面的EditText

撸界面

分析完需求，就开始动手吧，先写功能或者先写UI都可以。
引入design库

compile 'com.android.support:design:+'
1

界面1

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="cn.bestmk.note.MainActivity">
    <!-- 标题栏 -->
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:title="@string/app_name"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>
    <!--笔记列表-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <android.support.v7.widget.RecyclerView
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>
    <!--右下角悬浮按钮-->
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_input_add" />

</android.support.design.widget.CoordinatorLayout>
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

列表Item

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_title"
        android:textSize="18sp"
        android:textColor="#000000"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="新建笔记" />

    <TextView
        android:id="@+id/tv_createtime"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#3F48CC"
        android:textSize="11sp"
        android:text="创建时间：2017-12-26 12:00:00" />
    <TextView
        android:id="@+id/tv_chagetime"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#3F48CC"
        android:textSize="11sp"
        android:text="修改时间：2017-12-26 12:00:00" />
</LinearLayout>
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

界面2

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="cn.bestmk.note.EditActivity">
<!-- 标题栏 -->

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:icon="@mipmap/back"
        app:popupTheme="@style/AppTheme.PopupOverlay"
        app:title="新建笔记1" />

</android.support.design.widget.AppBarLayout>

<EditText
    android:id="@+id/editText"
    android:gravity="start"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

</LinearLayout>
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

还缺一个保存的按钮，由于使用了toolbar，这个按钮需要写到菜单里面
创建res/menu/menu.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools" tools:context=".MainActivity">
    <item android:id="@+id/action_search"
        android:title="Search"
        android:icon="@mipmap/save"
        app:showAsAction="ifRoom"/>
</menu>
1
2
3
4
5
6
7
8
9

接下来在Activity中重写onCreateOptionsMenu方法来给Toolbar控件设置具体菜单条目

package cn.bestmk.note

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.view.Menu
import android.view.MenuItem
import android.widget.Toast
import android.widget.Toolbar
import kotlinx.android.synthetic.main.activity_edit.*

class EditActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_edit)

        setSupportActionBar(toolbar)//为当前的Activity设置标题栏

        //为save按钮绑定事件
        toolbar.setOnMenuItemClickListener{
            Toast.makeText(this@EditActivity,"save",Toast.LENGTH_LONG).show()
            false
        }

    }
    // 为toolbar创建Menu
    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        getMenuInflater().inflate(R.menu.menu, menu);
        return true;
    }
}
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

至此页面算是写完了