前言
本文的內容主要是解析日記 APP 的製作流程，以及程式碼的具體實現，若有什麼不足之處，還請提出建議，附上這個 APP 的 Github 地址 WatermelonDiaryNew 歡迎大家 star 和 fork.
本文的主要內容
- 日記的展示
- 懸浮選單的實現
- 日記增刪改的實現
先來一波日記的展示吧，雖然內容比較簡單，但還是設計的非常用心的，因此這款 APP 還是非常簡潔和優雅的
一、日記的展示
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，如果有什麼想法或者建議，非常歡迎大家來討論。