手把手教你从零开始做一个好看的 APP - Day two

转载请注明出处作者：developerHaoz Github 地址：developerHaoz

本文为手把手教你从零开始做一个好看的 APP - Day two ，如果想看该系列的其他文章，请点击以下连接

手把手教你从零开始做一个好看的 APP

手把手教你从零开始做一个好看的 APP - Day one

手把手教你从零开始做一个好看的 APP - Day two

手把手教你从零开始做一个好看的 APP - Day three

手把手教你从零开始做一个好看的 APP - Day four

手把手教你从零开始做一个好看的 APP - Day five

Day two

一、界面的设计及实现

既然我们想要完成一个好看的 APP，那么好看的界面便是必不可少的，这里我强烈推荐 APP 界面的设计必须尽量遵从 Google 提出的 Material Design，在这里推荐一个能够让我们实现 Material Design 变得更加简单的网站 material design palette，我这个 APP 的配色就是用这个网站完成的，贴几张图片，让你感受一下它的强大

material design palette

Material Design 风格的图标

借助这个网站便能让我们完成 APP 的配色以及图标的收集，为下一步功能的实现，先打好了基础，至于界面的设计就仁者见仁智者见智了，篇幅有限，我就不多讲了。

APP 的最终设计效果如下：

SleepHelper

二、公共类的实现

因为这个项目有三个模块，有一些东西其实是可以通用的，如果我们先把这些能够通用的东西，封装起来，供给所有的模块调用的话，相信会大大提高我们的开发效率。

1、网络工具类的封装

这个 APP 中，很多地方都要用到网络请求，因此也就很有必要将网络请求封装起来，因为这个 APP 的规模比较小，因此我选择了 Volley 这个网络框架作为我们网络请求库，把网络请求封装起来，那哪个地方需要，调用一下就行了。对于网络请求，我觉得每个程序员都该懂点 HTTP，这里附上一篇有关 HTTP 的文章程序员都该懂点 HTTP。

先让我们来写个将网络请求进行回调的接口

public interface VolleyResponseCallback {
    void onSuccess(String response);
    void onError(VolleyError error);
}

然后将网络请求封装起来

public class VolleyHelper {

    /**
     * 用于发送 Get 请求的封装方法
     *
     * @param context Activity 的实例
     * @param url 请求的地址
     * @param callback 用于网络回调的接口
     */
    public static void sendHttpGet(Context context, String url, final VolleyResponseCallback callback){
        RequestQueue requestQueue = Volley.newRequestQueue(context);
        StringRequest stringRequest = new StringRequest(url
                , new Response.Listener<String>() {
            @Override
            public void onResponse(String s) {
                callback.onSuccess(s);
            }
        }, new Response.ErrorListener() {
            @Override
            public void onErrorResponse(VolleyError error) {
                callback.onError(error);
            }
        });
        requestQueue.add(stringRequest);
    }


}

2、Json 解析的帮助类

因为我们这个 APP 中，获取到的数据都是 Json 格式的，因此也就有必要将有关的 Json 解析封装成一个工具类，传入一个 String 类型的数据，直接得到数据实体类的 List。

public class CommonParser {

    /**
     * 用来解析列表性的JSON数据
     * 如:
     * {"success":true,"fileList":[{"filename":"文件名1","fileSize":"文件大小1"},
     * {"filename":"文件名2","fileSize":"文件大小2"}]}
     *
     * @param result     网络返回来的JSON数据   比如:上面的整串数据
     * @param successKey 判断网络是否成功的字段  比如:上面的success字段
     * @param arrKey     列表的字段            比如:上面的fileList字段
     * @param clazz      需要解析成的Bean类型
     * @param <T>        需要解析成的Bean类型
     * @return
     */
    public static <T> List<T> parseForList(String result, String successKey, String arrKey, Class<T> clazz) {
        List<T> list = new ArrayList<>();
        JSONObject rootJsonObject = null;
        try {
            rootJsonObject = new JSONObject(result);
            if (rootJsonObject.getBoolean(successKey)) {
                JSONArray rootJsonArray = rootJsonObject.getJSONArray(arrKey);
                Gson g = new Gson();
                for (int i = 0; i < rootJsonArray.length(); i++) {
                    T t = g.fromJson(rootJsonArray.getJSONObject(i).toString(), clazz);
                    list.add(t);
                }
            }
        } catch (JSONException e) {
            e.printStackTrace();
        }
        return list;
    }
}

3、HomeActivity（主页面）的封装

主页面我用的是 TabLayout + ViewPager + Fragment，也是现在主流 APP 主页面的显示方式。主界面底部是我们三个模块的图标和名称，通过左右滑动能实现界面的跳转。

底部图标的实体类 CommonTabBean

public class CommonTabBean implements CustomTabEntity{

    private int selectedIcon;
    private int unselectedIcon;
    private String title;

    public CommonTabBean(String title){
        this.title = title;
    }

    public CommonTabBean(String title, int selectedIcon, int unselectedIcon) {
        this.title = title;
        this.selectedIcon = selectedIcon;
        this.unselectedIcon = unselectedIcon;
    }

    @Override
    public String getTabTitle() {
        return title;
    }

    @Override
    public int getTabSelectedIcon() {
        return selectedIcon;
    }

    @Override
    public int getTabUnselectedIcon() {
        return unselectedIcon;
    }
}

ViewPager + Fragment 通用的 Adapter

public class CommonPagerAdapter extends FragmentPagerAdapter {

    private List<Fragment> mFragments;

    public CommonPagerAdapter(FragmentManager fragmentManager, List<Fragment> mFragments){
        super(fragmentManager);
        this.mFragments = mFragments;
    }

    @Override
    public Fragment getItem(int position) {
        return mFragments.get(position);
    }

    @Override
    public int getCount() {
        return mFragments.size();
    }
}