Android 一款十分简洁、优雅的日记 APP

前言

本文的内容主要是解析日记 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，如果有什么想法或者建议，非常欢迎大家来讨论

猜你喜欢

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,271评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,275评论 2赞 380
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,151评论 0赞 336
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,550评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,553评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,559评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,924评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,580评论 0赞 257
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,826评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2赞 320
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,363评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,940评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2赞 342

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,389评论 25赞 707
  • GitHub上受欢迎的Android UI Library
    内容抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条TabLayout图标下拉刷新...
    皇小弟阅读 46,699评论 22赞 664
  • 复习
    今天放学回家！我先写了语文作业的2号本。“西”字妈妈就让我从新写了3-4遍。后来我发脾气了，气的妈妈要走，我抱着妈...
    荣沛鋡阅读 219评论 0赞 1
  • 抢七之前，比主场更重要的是决心
    当勇士马刺备战西决，当勒布朗·詹姆斯苦苦等待对手，奇才和凯尔特人却还要相爱相杀到抢七。 两支球队有些许相似的地方，...
    ThuleWang阅读 235评论 0赞 0
  • 053
    我想有一间房，全部刷成黑色。然后，墙的一面，整齐地 钉满 照片。
    M_152阅读 93评论 0赞 0