Things have done

花了两天时间画了下各个界面，并按照画的界面一点点实现，技术方面这次尝试了RxJava，RxAndroid，RxBinding，ButterKnife这几个开源库，算是边学边用，有两篇感觉非常不错的教程，分别是

• 给 Android 开发者的 RxJava 详解
• 详细解析RxAndroid的使用方式

具体实现：

1.侧滑栏

使用原生NavigationView简单粗暴完成

2.添加密码界面

首先来个初步完成图

四个TextView外面嵌套TextInputLayout来实现Material Design风格的动画特效，其中的密码TextView由于要实现显示和隐藏密码的功能，使用了开源库showhidepasswordedittext，有意思的是在这个开源库的简介里作者着重提示了这个功能在Android Support Library, revision 24.2.0 (August 2016) 这个版本中已经原生提供了。

填充完的界面如下：

3.选择网站功能

虽然这个严格来说属于上一界面，但是由于我实现的时候花费了不少精力并且遇到了很多问题所以着重写一下。

首先，点击右上角Toolbar中的按钮后会通过onOptionsItemSelected调用方法创建一个AlertDialog

1
2
3
4
5

AlertDialog.Builder builder = new AlertDialog.Builder(AddActivity.this);
dialog = builder
        .setView(R.layout.alert_add)
        .create();
dialog.show();

AlertDialog直接载入布局文件，在布局中我将几个主流网站logo排好版，对ImageView进行

1
2

android:clickable="true"
android:onClick="onWebsiteSelected"

然后在Activity中添加这个方法，简单地使用switch/case对传入的View.getId()进行判断，然后设置网站TextView的文字，如下图。

可以看出排版还有些问题，但是我认为已经比我开始使用的方法好很多，开始我是用如下的方法

1
2
3
4
5
6
7
8
9

SimpleImageArrayAdapter adapter = new SimpleImageArrayAdapter(AddActivity.this,
        new Integer[]{R.drawable.logo_baidu, R.drawable.logo_bilibili, R.drawable.logo_facebook, R.drawable.logo_github, R.drawable.logo_google});
builder.setAdapter(adapter, new DialogInterface.OnClickListener() {
    @Override
    public void onClick(DialogInterface dialog, int which) {
        Toast.makeText(AddActivity.this, " " + which, Toast.LENGTH_SHORT).show();
    }
});
builder.show();

使用SimpleImageArrayAdapter继承ArrayAdapter来传入多个图片，但是这么做AlertDialog的显示是个很大问题，图片压缩在左边，右边是大片空白，网站图片单纯的上下排放，没有滑动栏，如果静态设置AlertDialog的长宽又担心适配问题，最后放弃了这种做法。

但是现在的效果仍然距离我想要的效果很远，首先常用网站较多，应该点击按钮后显示一级菜单即网站分类，比如社交网站、技术网站之类，二级菜单显示具体网站，这样应该是一种比较合理的设计。

Things to do

添加密码界面增加随机密码生成器，完成数据库的编写，完成主界面