前言
本文的內容主要是解析日記 APP 的制作流程，以及代碼的具體實現，若有什么不足之處，還請提出建議，附上這個 APP 的 Github 地址 WatermelonDiaryNew 歡迎大家 star 和 fork.
本文的主要內容
- 日記的展示
- 懸浮菜單的實現
- 日記增刪改的實現
先來一波日記的展示吧，雖然內容比較簡單，但還是設計的非常用心的，因此這款 APP 還是非常簡潔和優雅的
DiaryLICE.gif
一、日記的展示
1、偽日記的處理
可以看到剛開始進入主頁面，顯示的是 今天，你什么都沒寫下... 這個偽日記，其實只要是某一天沒有寫日記的話，界面最上面顯示的就是這個，當我們寫了日記之后，這個偽日記便會消失，講道理一開始實現這個還真花了我不少心思，本來的思路是將這個偽日記作為 RecyclerView 的第一個Item，如果當天有寫日記了，就將它隱藏起來，等到了第二天再重新顯示，但是感覺實現起來會很麻煩，后來想了想只要將這個偽日記，直接寫在主頁面的布局中，到時候如果檢索到數據庫里面，有某篇日記的日期跟當天的日期一致的話，就將偽日記從布局中 remove 掉就行了
if (cursor.moveToFirst()) {
do {
String date = cursor.getString(cursor.getColumnIndex("date"));
// 這是我自己寫的一個獲取當天日期的一個方法
String dateSystem = GetDate.getDate().toString();
if (date.equals(dateSystem)) {
mMainLlMain.removeView(mItemFirst);
break;
}
} while (cursor.moveToNext());
}
2、使用 RecyclerView 展示日記
因為我是打算以事件線的形式來展示我們所寫的日記，因此使用 RecyclerView 也算是比較合適的了。這里附上一篇將 RecyclerView 講的很不錯的博客 RecyclerView 使用詳解（一）
要想使用 RecyclerView來實現我們想要實現的效果，先讓我們建立一個item_rv_diary作為 RecyclerView 的子布局
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/item_ll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingRight="10dp"
android:background="@color/white"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="25dp"
android:orientation="horizontal"
android:paddingLeft="10.8dp"
android:background="#ffffff"
>
<ImageView
android:id="@+id/main_iv_circle"
android:paddingTop="2dp"
android:layout_width="22dp"
android:layout_height="22dp"
android:src="@drawable/circle"
android:layout_gravity="center_vertical"
/>
<TextView
android:id="@+id/main_tv_date"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="25dp"
android:gravity="center_vertical"
android:paddingLeft="4dp"
android:paddingTop="1dp"
android:text="2017年01月18日"
android:textSize="14sp"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<LinearLayout
android:layout_width="23.3dp"
android:layout_height="match_parent"
android:background="@drawable/linear_style"
>
</LinearLayout>
<LinearLayout
android:id="@+id/item_ll_control"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<LinearLayout
android:id="@+id/main_ll_title"
android:layout_width="match_parent"
android:layout_height="35dp"
android:orientation="horizontal"
android:background="#ffffff"
>
<TextView
android:paddingTop="3dp"
android:background="#ffffff"
android:id="@+id/main_tv_title"
android:layout_width="match_parent"
android:layout_height="32dp"
android:gravity="center_vertical"
android:paddingLeft="16dp"
android:text="哈哈哈今天傻逼了"
android:textColor="@color/black"
android:textSize="19sp"
/>
</LinearLayout>
<TextView
android:paddingTop="2dp"
android:background="#ffffff"
android:id="@+id/main_tv_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:lineSpacingExtra="4dp"
android:paddingLeft="33dp"
android:paddingRight="15dp"
android:text=" 在這里寫些什么在這里寫些什么在這里寫些什么在這里寫些什么在這里寫些什么在這里寫些什么在這里寫些什么在這里寫些什么在這里寫些什么在這里 寫些什么在這里寫些什么在這里寫些什么在這里寫些什么在這里寫些什么在這里寫些什么在這里寫些什么"
android:textColor="@color/black"
android:textSize="16sp"
/>
<RelativeLayout
android:id="@+id/item_rl_edit"
android:layout_width="match_parent"
android:layout_height="40dp"
android:paddingRight="5dp"
android:background="#ffffff"
>
<ImageView
android:id="@+id/main_iv_edit"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:src="@drawable/edit"
/>
</RelativeLayout>
<LinearLayout
android:background="#ffffff"
android:layout_width="match_parent"
android:layout_height="20dp">
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
布局還是比較簡單的，比較難實現的應該是左邊的那條豎線，其實，一開始并沒有什么思路，因為
shape 中的 line 只能畫橫線，而畫不了豎線，最后在 Google 的幫助下，終于找到了實現這個豎線的思路，我是這樣處理的，定義一個 layer-list 設置在 TextView 中，將 TextView 的右邊框進行描繪
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 邊框顏色值 --><item>
<shape>
<solid android:color="#8a8a8a" />
</shape>
</item>
<!-- 主體背景顏色值 -->
<item android:right="1.5dp">
<shape>
<solid android:color="#ffffff" />
<padding android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape>
</item>
</layer-list>
寫好子布局之后，再讓我們來實現 RecyclerView 的 Adapter，首先定義了一個 DiaryViewHolder 繼承自 RecyclerView.ViewHolder，傳入一個保存日記信息的 List，然后通過 onCreateViewHolder 來創建布局，通過 onBindViewHolder 將數據綁定到對應的 Item 上面，這里我使用了 EventBus 通過點擊編輯按鈕打開修改日記的界面， EventBus 是一款針對Android優化的發布/訂閱事件總線，使用也是非常簡單的，可以當作一個輕量級的BroadCastReceiver 來使用，有興趣可以看看這篇文章 EventBus 使用詳解(一)——初步使用 EventBus
public class DiaryAdapter extends RecyclerView.Adapter<DiaryAdapter.DiaryViewHolder> {
private Context mContext;
private LayoutInflater mLayoutInflater;
private List<DiaryBean> mDiaryBeanList;
public DiaryAdapter(Context context, List<DiaryBean> mDiaryBeanList){
mContext = context;
this.mLayoutInflater = LayoutInflater.from(context);
this.mDiaryBeanList = mDiaryBeanList;
}
@Override
public DiaryViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
return new DiaryViewHolder(mLayoutInflater.inflate(R.layout.item_rv_diary, parent, false));
}
@Override
public void onBindViewHolder(final DiaryViewHolder holder, final int position) {
String dateSystem = GetDate.getDate().toString();
/**
* 如果該日記是當天寫的，則將日期左邊的圓圈設置成橙色的
*/
if(mDiaryBeanList.get(position).getDate().equals(dateSystem)){
holder.mIvCircle.setImageResource(R.drawable.circle_orange);
}
holder.mTvDate.setText(mDiaryBeanList.get(position).getDate());
holder.mTvTitle.setText(mDiaryBeanList.get(position).getTitle());
holder.mTvContent.setText(mContext.getString(R.string.spaces) + mDiaryBeanList.get(position).getContent());
holder.mIvEdit.setVisibility(View.INVISIBLE);
/**
* 當點擊日記的內容時候，則顯示出編輯按鈕
*/
holder.mLl.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (holder.mIvEdit.getVisibility() == View.INVISIBLE) {
holder.mIvEdit.setVisibility(View.VISIBLE);
}else {
holder.mIvEdit.setVisibility(View.INVISIBLE);
}
}
});
/**
* 使用 EventBus 來打開修改日記的界面，事件接收函數載 MainActivity 中
*/
holder.mIvEdit.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
EventBus.getDefault().post(new StartUpdateDiaryEvent(position));
}
});
}
@Override
public int getItemCount() {
return mDiaryBeanList.size();
}
static class DiaryViewHolder extends RecyclerView.ViewHolder{
TextView mTvDate;
TextView mTvTitle;
TextView mTvContent;
ImageView mIvEdit;
LinearLayout mLlTitle;
LinearLayout mLl;
ImageView mIvCircle;
LinearLayout mLlControl;
RelativeLayout mRlEdit;
DiaryViewHolder(View view){
super(view);
mIvCircle = (ImageView) view.findViewById(R.id.main_iv_circle);
mTvDate = (TextView) view.findViewById(R.id.main_tv_date);
mTvTitle = (TextView) view.findViewById(R.id.main_tv_title);
mTvContent = (TextView) view.findViewById(R.id.main_tv_content);
mIvEdit = (ImageView) view.findViewById(R.id.main_iv_edit);
mLlTitle = (LinearLayout) view.findViewById(R.id.main_ll_title);
mLl = (LinearLayout) view.findViewById(R.id.item_ll);
mLlControl = (LinearLayout) view.findViewById(R.id.item_ll_control);
mRlEdit = (RelativeLayout) view.findViewById(R.id.item_rl_edit);
}
}
}
最后在 MainActivity 中將 RecyclerView 進行處理就行了
mMainRvShowDiary.setLayoutManager(new LinearLayoutManager(this));
mMainRvShowDiary.setAdapter(new DiaryAdapter(this, mDiaryBeanList));
二、懸浮菜單的實現
懸浮菜單看起來逼格還是挺高的， 而且觀賞性也算是比較高，我是從 Github 找的一個庫，來實現這個懸浮菜單的，不得不說，搞這個懸浮菜單真的花了我不少時間， 有些庫要么不能調節菜單的大小，要么不能調節菜單圖案，找了好久才找到這個讓我比較滿意的庫FloatingActionButton
雖然逼格挺高的，但使用起來卻是相當的方便，先在build.grade中添加
dependencies {
compile 'cc.trity.floatingactionbutton:library:1.0.0'
}
然后在布局中設置我們想要的顏色和圖案，最后在 Activity 中進行懸浮按鈕點擊事件的處理就行了
<cc.trity.floatingactionbutton.FloatingActionsMenu
android:id="@+id/right_labels"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
app:fab_expandDirection="right"
app:fab_addButtonSize="mini"
>
<cc.trity.floatingactionbutton.FloatingActionButton
android:id="@+id/update_diary_fab_back"
android:layout_width="40dp"
android:layout_height="40dp"
app:fab_size="normal"
app:fab_icon = "@drawable/delete_new"
app:fab_colorNormal="#c8180e"
/>
<cc.trity.floatingactionbutton.FloatingActionButton
android:id="@+id/update_diary_fab_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/save"
app:fab_size="normal"
app:fab_title="FAB 2"
app:fab_icon = "@drawable/save_new"
app:fab_colorNormal="#24d63c"
/>
<cc.trity.floatingactionbutton.FloatingActionButton
android:id="@+id/update_diary_fab_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/delete"
app:fab_colorNormal="#d92410"
app:fab_icon = "@drawable/back_new"
app:fab_size="normal"
app:fab_title="FAB 2"
/>
</cc.trity.floatingactionbutton.FloatingActionsMenu>
三、日記增刪改的實現
日記的信息，我是使用 Android 自帶的 SQLite 數據庫進行保存的，做法也是比較簡單的，這里附上一篇講解 SQLite 的博客 Android中SQLite應用詳解，先建立一個 DiaryDatabaseHelper 作為我們進行數據庫操作的幫助類，因為日記的內容比較簡單， 因此，我只建了一張表
public class DiaryDatabaseHelper extends SQLiteOpenHelper {
public static final String CREATE_DIARY = "create table Diary("
+ "id integer primary key autoincrement, "
+ "date text, "
+ "title text, "
+ "content text)";
private Context mContext;
public DiaryDatabaseHelper(Context context, String name, SQLiteDatabase.CursorFactory factory, int version){
super(context, name, factory, version);
mContext = context;
}
@Override
public void onCreate(SQLiteDatabase db) {
db.execSQL(CREATE_DIARY);
}
@Override
public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) {
db.execSQL("drop table if exists Diary");
onCreate(db);
}
}
1、日記的添加
獲取添加日記界面中日記的日期、標題以及具體的內容，然后將這些信息添加到數據庫中
String date = GetDate.getDate().toString();
String title = mAddDiaryEtTitle.getText().toString() + "";
String content = mAddDiaryEtContent.getText().toString() + "";
if (!title.equals("") || !content.equals("")) {
SQLiteDatabase db = mHelper.getWritableDatabase();
ContentValues values = new ContentValues();
values.put("date", date);
values.put("title", title);
values.put("content", content);
db.insert("Diary", null, values);
values.clear();
2、日記的刪除
在這里我為了防止日記被誤刪，就做了一個對話框，當點擊刪除按鈕的時候，便會跳出這個對話框詢問用戶是否真的要刪除該日記
AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(this);
alertDialogBuilder.setMessage("確定要刪除該日記嗎？").setPositiveButton("確定", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
String title = mUpdateDiaryEtTitle.getText().toString();
SQLiteDatabase dbDelete = mHelper.getWritableDatabase();
dbDelete.delete("Diary", "title = ?", new String[]{title});
MainActivity.startActivity(UpdateDiaryActivity.this);
}
}).setNegativeButton("取消", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
}
}).show();
3、日記的修改
SQLiteDatabase dbUpdate = mHelper.getWritableDatabase();
ContentValues valuesUpdate = new ContentValues();
String title = mUpdateDiaryEtTitle.getText().toString();
String content = mUpdateDiaryEtContent.getText().toString();
valuesUpdate.put("title", title);
valuesUpdate.put("content", content);
dbUpdate.update("Diary", valuesUpdate, "title = ?", new String[]{title});
dbUpdate.update("Diary", valuesUpdate, "content = ?", new String[]{content});
以上便是我寫這個 APP 的具體實現思路，以及踩過的一些坑，記錄下來，給大家看看，最后附上這個 APP 的 Github 地址 WatermelonDiaryNew 歡迎大家 star 和 fork，如果有什么想法或者建議，非常歡迎大家來討論
