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语句为:

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

画草图

windows自带画图工具用来做个草图还是很好的,做不到很精美的效果,但是你可以快速做出大致的草图,所以我很喜欢用这个工具。win+R输入mspaint命令快速打开画图工具
Kotlin开发安卓APP笔记实战-写个简易记事本(需求分析)_第1张图片

分析界面

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

撸界面

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

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

界面1

Kotlin开发安卓APP笔记实战-写个简易记事本(需求分析)_第2张图片


<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


<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


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

Kotlin开发安卓APP笔记实战-写个简易记事本(需求分析)_第3张图片
还缺一个保存的按钮,由于使用了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(this@EditActivity,"save",Toast.LENGTH_LONG).show()
            false
        }

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

至此页面算是写完了

你可能感兴趣的:(Kotlin,安卓)