您的位置:首页 > 移动开发

Kotlin开发安卓APP笔记实战-写个简易记事本(需求分析)

2017-12-26 13:19 791 查看
Kotlin不止之前笔记里学的这些基础,不过不看了,还是实战吧,遇到问题再去解决。

创建工程环境啥的之前都讲过就不讲了,阅读此笔记需要一些安卓开发的经验和知识,不懂的可以在猫客论坛评论区提问,或者我的csdn博客地址评论,不知道有没有转载,欢迎转载,注明出处就好。因为白天需要上班,可能更新得会慢一点。

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

无论做什么事,脑袋里面一定先要有对这件事情有个大致的思路,该怎样去做,胸有成竹,这样才能画出好的竹子。做软件也一样,你可以把你自己做的事情当成在搞艺术。。。(不吹了,吹起牛来,我自己都害怕0.0)

其实记事本很简单,只需要创建两个页面,一个页面用列表或者九宫控件(RecyclerView/ListView/GridView)显示你创建的item,然后一个页面编辑内容就行了。数据存储使用sqlite,更灵活方便。

设计sqlite表

对于sqlite语法不太了解可以先看看菜鸟教程

设定表名为note

字段数据类型说明
IDINT自增主键
createtimeTIMESTAMP记录创建时间
chagetimeTIMESTAMP记录上一次修改时间
titleCHAR(255)标题
contentTEXT内容(使用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命令快速打开画图工具



分析界面

界面1

这里是列表显示笔记数据,所以表格控件GridView不适合,选择ListView或者RecyclerView,本笔记选择RecylerView。Item的布局可以选择垂直线性布局,为Item绑定长按事件,作为删除笔记的功能。右下角的“+”按钮作为新增按钮,使用Floating ActionButton。

界面2

这个界面就简单了,上面是一个包含返回按钮和保存按钮的toolbar,不会toolbar也可以使用一个layout实现功能,本笔记将采用toolbar。下面就是一个充满界面的EditText

撸界面

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

引入design库

compile 'com.android.support: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(this@EditActivity,"save",Toast.LENGTH_LONG).show()
false
}

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


至此页面算是写完了
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: