Kotlin開發安卓APP筆記實戰-寫個簡易記事本（需求分析）

Kotlin不止之前筆記裡學的這些基礎，不過不看了，還是實戰吧，遇到問題再去解決。

建立工程環境啥的之前都講過就不講了，閱讀此筆記需要一些安卓開發的經驗和知識，不懂的可以在貓客論壇評論區提問，或者我的csdn部落格位址評論，不知道有沒有轉載，歡迎轉載，注明出處就好。因為白天需要上班，可能更新得會慢一點。

分析記事本功能以及畫草圖

無論做什麼事，腦袋裡面一定先要有對這件事情有個大緻的思路，該怎樣去做，胸有成竹，這樣才能畫出好的竹子。做軟體也一樣，你可以把你自己做的事情當成在搞藝術。。。（不吹了，吹起牛來，我自己都害怕0.0）

其實記事本很簡單，隻需要建立兩個頁面，一個頁面用清單或者九宮控件（RecyclerView/ListView/GridView）顯示你建立的item，然後一個頁面編輯内容就行了。資料存儲使用sqlite，更靈活友善。

設計sqlite表

對于sqlite文法不太了解可以先看看菜鳥教程

設定表名為note

字段	資料類型	說明
ID	INT	自增主鍵
createtime	TIMESTAMP	記錄建立時間
chagetime	TIMESTAMP	記錄上一次修改時間
title	CHAR(255)	标題
content	TEXT	内容(使用TEXT最大可以存儲2^31-1個字元，足夠我們的記事本使用了)

是以建立表格的sql語句為：

畫草圖

windows自帶畫圖工具用來做個草圖還是很好的，做不到很精美的效果，但是你可以快速做出大緻的草圖，是以我很喜歡用這個工具。win+R輸入mspaint指令快速打開畫圖工具

分析界面

界面1

這裡是清單顯示筆記資料，是以表格控件GridView不适合，選擇ListView或者RecyclerView，本筆記選擇RecylerView。Item的布局可以選擇垂直線性布局，為Item綁定長按事件，作為删除筆記的功能。右下角的“+”按鈕作為新增按鈕，使用Floating ActionButton。

界面2

這個界面就簡單了，上面是一個包含傳回按鈕和儲存按鈕的toolbar，不會toolbar也可以使用一個layout實作功能，本筆記将采用toolbar。下面就是一個充滿界面的EditText

撸界面

分析完需求，就開始動手吧，先寫功能或者先寫UI都可以。

引入design庫

界面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>
           

清單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>
           

界面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>
           

還缺一個儲存的按鈕，由于使用了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>
           

接下來在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([email protected],"save",Toast.LENGTH_LONG).show()
            false
        }

    }
    // 為toolbar建立Menu
    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        getMenuInflater().inflate(R.menu.menu, menu);
        return true;
    }
}
           

至此頁面算是寫完了