手把手教你從零開始做一個好看的 APP

本篇文章已授權(quán)為微信公眾號 code小生 發(fā)布
轉(zhuǎn)載請注明出處：http://www.itdecent.cn/p/8d2d74d6046f

前言

從零開始，手把手帶你實現(xiàn)一個「專注睡前的 APP」。睡覺之前如果能有一個 APP，能讓我們寫一寫這一天的見聞或者心得，同時又能看一會段子、瞄一會好看的妹子，放松一下疲憊的身心那該多好，這也是我完成這個 APP 的原因。APP 的全部代碼我已經(jīng)分享到 Github 上了，需要的直接 點擊這里，如果喜歡的話，麻煩給個 star，謝謝啦。

本文為這一系列文章的總述，如果覺得篇幅過長，請點擊下面的連接

手把手教你從零開始做一個好看的 APP - Day one

手把手教你從零開始做一個好看的 APP - Day two

手把手教你從零開始做一個好看的 APP - Day three

手把手教你從零開始做一個好看的 APP - Day four

手把手教你從零開始做一個好看的 APP - Day five

在開始寫正文之前，先來一波效果的展示，看看五天過后我們能實現(xiàn)怎樣的效果


SleepHelper.gif

本次的教程分為 5 天，內(nèi)容分別為：

  • Day one，準備

    • 功能需求
    • 可行性分析

  • Day two，UI 及公共類的封裝

    • 界面的設(shè)計及實現(xiàn)
    • 公共類的實現(xiàn)

  • Day three，日記模塊

    • 日記的展示
    • 懸浮菜單的實現(xiàn)
    • 日記增刪改的實現(xiàn)

  • Day four，妹子模塊

    • 圖片的獲取
    • 圖片的展示
    • 詳情頁面的展示

  • Day five，段子模塊

    • 段子數(shù)據(jù)的獲取
    • 段子的顯示

Day one

俗話說，萬事開頭難，在開始敲代碼之前，先讓我們來做一些必要的準備，這樣才能事半功倍嘛！

一、功能需求

既然要做一個 APP，那我們首先還是得把 APP 的功能都列出來，有了方向才能更好的努力，因為我想做的是一個專門給睡覺前用的 APP，所以我覺得應(yīng)該有以下的這些功能

  • 1、日記的增刪改
  • 2、顯示一些有趣好玩的段子
  • 3、瀑布流展示漂亮的妹子
  • 4、保存日記的內(nèi)容以及緩存妹子圖片

雖然說需求不多，但是卻要運用到網(wǎng)絡(luò)、數(shù)據(jù)存儲、圖片緩存、UI 設(shè)計等內(nèi)容，相信整個 APP 完成下來，必定能鞏固我們的 Android 基礎(chǔ)。

二、可行性分析

我們這個 APP 主要有三個模塊，日記模塊主要是運用到了數(shù)據(jù)庫的知識，難度不大。但是，段子模塊和妹子模塊的數(shù)據(jù)要從哪來，這便是要好好考慮的了。幸好現(xiàn)在是個開源的時代，很多的數(shù)據(jù)，網(wǎng)上已經(jīng)開源出來了。

我們先來看一下數(shù)據(jù)的內(nèi)容

group: {
        text: "教授在河邊，常?？吹絻芍积?，縮著一動不動。有天忍不住好奇，問一農(nóng)      
        民：這兩只烏龜在干嗎？農(nóng)民說：他們在pk。教授不解地問：動都沒動過p什么    
        k。老農(nóng)說:他們在比誰壽命長。教授說：可是殼上有甲骨文的那只，早就死了埃
        這時，另一只猛然探出頭來罵到：md，死了也不吭一聲！有甲骨文的那只也伸
        出頭來：“專家說啥你信啥１",

        user: {
              user_id: 4669064575,

              name: "饅頭啊",

              avatar_url: "http://p3.pstatp.com/medium/6237/7969345239",
},

          content: "教授在河邊，常常看到兩只龜，縮著一動不動。有天忍不住好奇，問        
           一農(nóng)民：這兩只烏龜在干嗎？農(nóng)民說：他們在pk。教授不解地問：動都沒動過
           p什么k。老農(nóng)說:他們在比誰壽命長。教授說：可是殼上有甲骨文的那只，早
           就死了埃這時，另一只猛然探出頭來罵到：md，死了也不吭一聲！有甲骨文
           的那只也伸出頭來：“專家說啥你信啥１",
...  
}

{
          id: "56cc6d1d421aa95caa7076df",

          type: "福利",

          url: "http://ww1.sinaimg.cn/large/7a8aed7bgw1esxxi1vbq0j20qo0hstcu.jpg",

          used: true,

          who: "張涵宇"

}

上面那兩段代碼分別是段子和妹子模塊的 json 類型的數(shù)據(jù)，我已經(jīng)將一些沒用的字段去掉了。剩下的都是我們想要的數(shù)據(jù)?？梢钥吹蕉巫訑?shù)據(jù)中，有著段子的內(nèi)容，以及發(fā)布者的頭像和名字。而妹子數(shù)據(jù)中有著圖片的 url、id、以及圖片的類型。相信有了這么豐富的數(shù)據(jù)，我們想要完成這個 APP 也是有底氣了。

Day two

一、界面的設(shè)計及實現(xiàn)

既然我們想要完成一個好看的 APP，那么好看的界面便是必不可少的，這里我強烈推薦 APP 界面的設(shè)計必須盡量遵從 Google 提出的 Material Design，在這個推薦一個能夠讓我們實現(xiàn) Material Design 變得更加簡單的網(wǎng)站 material design palette，我這個 APP 的配色就是用這個網(wǎng)站完成的，貼幾張圖片，讓你感受一下它的強大

material design palette
Material Design 風(fēng)格的圖標

借助這個網(wǎng)站便能讓我們完成 APP 的配色以及圖標的收集，為下一步功能的實現(xiàn)，先打好了基礎(chǔ)，至于界面的設(shè)計就仁者見仁智者見智了，篇幅有限，我就不多講了。

APP 的最終設(shè)計效果如下：


SleepHelper

二、公共類的實現(xiàn)

因為這個項目有三個模塊，有一些東西其實是可以通用的，如果我們先把這些能夠通用的東西，封裝起來，供給所有的模塊調(diào)用的話，相信會大大提高我們的開發(fā)效率。

1、網(wǎng)絡(luò)工具類的封裝

這個 APP 中，很多地方都要用到網(wǎng)絡(luò)請求，因此也就很有必要將網(wǎng)絡(luò)請求封裝起來，因為這個 APP 的規(guī)模比較小，因此我選擇了 Volley 這個網(wǎng)絡(luò)框架作為我們網(wǎng)絡(luò)請求庫，把網(wǎng)絡(luò)請求封裝起來，哪個地方需要，調(diào)用一下就行了。對于網(wǎng)絡(luò)請求，我覺得每個程序員都該懂點 HTTP，這里附上一篇有關(guān) HTTP 的文章 程序員都該懂點 HTTP。

先讓我們來寫個將網(wǎng)絡(luò)請求進行回調(diào)的接口

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

然后將網(wǎng)絡(luò)請求封裝起來

public class VolleyHelper {

    /**
     * 用于發(fā)送 Get 請求的封裝方法
     *
     * @param context Activity 的實例
     * @param url 請求的地址
     * @param callback 用于網(wǎng)絡(luò)回調(diào)的接口
     */
    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 中，獲取到的數(shù)據(jù)都是 Json 格式的，因此也就有必要將有關(guān)的 Json 解析封裝成一個工具類，傳入一個 String 類型的數(shù)據(jù)，直接得到數(shù)據(jù)實體類的 List。

public class CommonParser {

    /**
     * 用來解析列表性的JSON數(shù)據(jù)
     * 如:
     * {"success":true,"fileList":[{"filename":"文件名1","fileSize":"文件大小1"},
     * {"filename":"文件名2","fileSize":"文件大小2"}]}
     *
     * @param result     網(wǎng)絡(luò)返回來的JSON數(shù)據(jù)   比如:上面的整串數(shù)據(jù)
     * @param successKey 判斷網(wǎng)絡(luò)是否成功的字段  比如:上面的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，也是現(xiàn)在主流 APP 主頁面的顯示方式。主界面底部是我們?nèi)齻€模塊的圖標和名稱，通過左右滑動能實現(xiàn)界面的跳轉(zhuǎn)。

底部圖標的實體類 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();
    }
}

Day three

關(guān)于日記模塊的實現(xiàn)，其實我是復(fù)用了以前寫過的一個日記 APP，具體的思路和做法，可以參考我的這篇文章 Android 一款十分簡潔、優(yōu)雅的日記 APP

Day four

一、圖片的獲取

1、根據(jù)返回的數(shù)據(jù)來編寫圖片的實體類
public class MeiziBean {

    @SerializedName("_id")
    private String id;
    @SerializedName("url")
    private String imageUrl;
    @SerializedName("who")
    private String who;

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getImageUrl() {
        return imageUrl;
    }

    public MeiziBean(String imageUrl){
        this.imageUrl = imageUrl;
    }
}
2、圖片的展示

可以看到我是用瀑布流的方式來實現(xiàn)圖片的展示，效果還不錯，但其實實現(xiàn)起來也是很簡單的

先寫個圖片的布局作為 RecyclerView 的 Item

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

                <ImageView
                    android:id="@+id/item_iv_meizi"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:layout_centerVertical="true"
                    />
</android.support.v7.widget.CardView>

可以看到我在 ImageView 的外面加了一個 CardView，這個一種卡片式布局，能讓圖片看起來就像一張卡片一樣，相當?shù)膬?yōu)雅、美觀。

接著編寫 Adapter，將數(shù)據(jù)和界面進行綁定

public class MeiziAdapter extends RecyclerView.Adapter<MeiziAdapter.MeiziViewHolder> {

    private List<MeiziBean> mMeiziBeanList;
    private Fragment mFragment;

    public MeiziAdapter(List<MeiziBean> mMeiziBeanList, Fragment mFragment){
        this.mMeiziBeanList = mMeiziBeanList;
        this.mFragment = mFragment;
    }

    @Override
    public MeiziViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_meizi, null);
        return new MeiziViewHolder(view);
    }

    @Override
    public void onBindViewHolder(MeiziViewHolder holder, final int position) {

        Glide.with(mFragment)
                .load(mMeiziBeanList.get(position).getImageUrl())
                .fitCenter()
                .dontAnimate()
                .diskCacheStrategy(DiskCacheStrategy.ALL)
                .into(holder.mIvMeizi);

        holder.mIvMeizi.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ArrayList<String> resultList = new ArrayList<String>();
                for (MeiziBean meiziBean : mMeiziBeanList) {
                    resultList.add(meiziBean.getImageUrl());
                }
                DetailActivity.startActivity(mFragment.getActivity(), resultList, position);

            }
        });

    }

    @Override
    public int getItemCount() {
        if(mMeiziBeanList.size() > 0){
            return mMeiziBeanList.size();
        }
        return 0;
    }

    public static class MeiziViewHolder extends RecyclerView.ViewHolder{

        ImageView mIvMeizi;

        public MeiziViewHolder(View itemView) {
            super(itemView);
            mIvMeizi = (ImageView) itemView.findViewById(R.id.item_iv_meizi);
        }
    }
}

最后在 Fragment 進行數(shù)據(jù)的獲取，以及布局的初始化就行了

public class MeiziFragment extends Fragment {

    ......

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_meizi, container, false);
        ButterKnife.bind(this, view);
        initView();
        refreshMeizi();
        return view;
    }

    /**
     * 刷新當前界面
     */
    private void refreshMeizi() {
        mRefresh.setColorSchemeResources(R.color.colorPrimary);
        mRefresh.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                initView();
                mRefresh.setRefreshing(false);
            }
        });
    }

    private void initView() {
        VolleyHelper.sendHttpGet(getActivity(), MeiziApi.getMeiziApi(), new VolleyResponseCallback() {
            @Override
            public void onSuccess(String s) {
                response = s;
                meiziBeanList = GsonHelper.getMeiziBean(response);
                mRvShowMeizi.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));
                Collections.shuffle(meiziBeanList);
                mRvShowMeizi.setAdapter(new MeiziAdapter(meiziBeanList, MeiziFragment.this));
            }

            @Override
            public void onError(VolleyError error) {
                Logger.d(error);
            }
        });
    }
3、詳情頁面的展示

干巴巴的，整個模塊只能顯示妹子的圖片怎么行呢！??！怎么著也得能查看大圖，根據(jù)手勢放大縮小，以及瀏覽下一張圖片才行嘛，說干就干。

因為圖片需要有根據(jù)手勢來放大縮小的功能，因此我便想到了 PhotoView，這是網(wǎng)上一個大神寫的，繼承自 ImageView 的一個自定義控件。圖片加載我用的是
Glide，如果沒了解過這個庫的，強烈推薦，一行代碼就能搞定圖片加載，你確定不研究一下。這里附上一篇有關(guān) Glide 的文章 Glide 一個強大的圖片加載框架

public class DetailFragment extends Fragment {

    public static DetailFragment newInstance(String imageUrl) {
        DetailFragment fragment = new DetailFragment();
        Bundle bundle = new Bundle();
        bundle.putString(IMAGE_URL, imageUrl);
        fragment.setArguments(bundle);
        return fragment;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_detail, container, false);
        ButterKnife.bind(this, view);
        Bundle bundle = getArguments();
        String imageUrl = bundle.getString(IMAGE_URL);
        Glide.with(this).load(imageUrl).into(mPvShowPhoto);
        mPvShowPhoto.setOnPhotoTapListener(new PhotoViewAttacher.OnPhotoTapListener() {
            @Override
            public void onPhotoTap(View view, float v, float v1) {
                getActivity().finish();
            }

            @Override
            public void onOutsidePhotoTap() {

            }
        });
        return view;
    }
}

Day five

一、段子數(shù)據(jù)的獲取

段子數(shù)據(jù)的獲取其實跟妹子模塊的方法基本一樣

先編寫實體類

public class DuanziBean {

    @SerializedName("group")
    private GroupBean groupBean;
    private String type;

    public GroupBean getGroupBean() {
        return groupBean;
    }

    public void setGroupBean(GroupBean groupBean) {
        this.groupBean = groupBean;
    }

    public String getType() {
        return type;
    }

    public void setType(String type) {
        this.type = type;
    }
    
}

public class GroupBean {

    private String text;
    private long id;
    private UserBean user;

    public String getText() {
        return text;
    }

    public long getId() {
        return id;
    }

    public UserBean getUser() {
        return user;
    }

    public static class UserBean {

        private long user_id;
        private String name;
        private String avatar_url;

        public String getName() {
            return name;
        }

        public String getAvatar_url() {
            return avatar_url;
        }

    }
}

寫好實體類之后，使用我們之前已經(jīng)封裝好的網(wǎng)絡(luò)請求工具以及解析工具，便能將返回的數(shù)據(jù)，解析成一個包含段子實體類的 List。

二、段子的顯示

老規(guī)矩，先寫個 RecyclerView 的 Item

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical"
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:paddingLeft="8dp"
        >

        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/duanzi_civ_avatar"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:src="@drawable/avatar"
            android:layout_gravity="center"
            />

        <TextView
            android:id="@+id/duanzi_tv_author"
            android:paddingLeft="8dp"
            android:paddingStart="8dp"
            android:layout_width="match_parent"
            android:layout_height="16dp"
            android:text="DeveloperHaoz"
            android:layout_gravity="center_vertical"
            />

    </LinearLayout>

    <TextView
        android:id="@+id/duanzi_tv_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="10dp"
        android:paddingLeft="40dp"
        android:paddingRight="10dp"
        android:text=""
        />
    <include layout="@layout/layout_app_divide"/>

</LinearLayout>

然后編寫將數(shù)據(jù)和界面進行綁定的 Adapter

public class DuanziAdapter extends RecyclerView.Adapter<DuanziAdapter.DuanziViewHolder>{

    private Fragment mFragment;
    private List<DuanziBean> mDuanziBeanList;

    public DuanziAdapter(Fragment fragment, List<DuanziBean> duanziBeanList){
        this.mFragment = fragment;
        this.mDuanziBeanList = duanziBeanList;
    }

    @Override
    public DuanziViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_duanzi, null);
        return new DuanziViewHolder(view);
    }

    @Override
    public void onBindViewHolder(DuanziViewHolder holder, int position) {
        try {
            DuanziBean duanziBean = mDuanziBeanList.get(position);
            Glide.with(mFragment).load(duanziBean.getGroupBean().getUser().getAvatar_url()).into(holder.mCivAvatar);
            holder.mTvContent.setText(duanziBean.getGroupBean().getText());
            holder.mTvAuthor.setText(duanziBean.getGroupBean().getUser().getName());
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    @Override
    public int getItemCount() {
        return mDuanziBeanList.size();
    }

    public static class DuanziViewHolder extends RecyclerView.ViewHolder{

        private CircleImageView mCivAvatar;
        private TextView mTvAuthor;
        private TextView mTvContent;

        public DuanziViewHolder(View itemView) {
            super(itemView);
            mCivAvatar = (CircleImageView) itemView.findViewById(R.id.duanzi_civ_avatar);
            mTvAuthor = (TextView) itemView.findViewById(R.id.duanzi_tv_author);
            mTvContent = (TextView) itemView.findViewById(R.id.duanzi_tv_content);
        }
    }


}

最后段子頁面中進行數(shù)據(jù)和獲取以及界面的初始化

public class DuanziFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_duanzi, container, false);
        ButterKnife.bind(this, view);
        initView();
        initRefresh();
        return view;
    }

    private void initRefresh() {
        mRefresh.setColorSchemeResources(R.color.colorPrimary);
        mRefresh.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                initView();
                mRefresh.setRefreshing(false);
            }
        });
    }

    private void initView() {
        VolleyHelper.sendHttpGet(getActivity(), DuanziApi.GET_DUANZI, new VolleyResponseCallback() {
            @Override
            public void onSuccess(String response) {
                List<DuanziBean> mDuanziBeanList = GsonHelper.getDuanziBeanList(response);
                mDuanziBeanList.remove(3);
                mRvShowDuanzi.setLayoutManager(new LinearLayoutManager(getActivity()));
                mRvShowDuanzi.setAdapter(new DuanziAdapter(DuanziFragment.this, mDuanziBeanList));
            }

            @Override
            public void onError(VolleyError error) {
                Logger.d(error);
            }
        });
    }

}

以上便是本文的全部內(nèi)容，這個 APP 的全部代碼我已經(jīng)分享到 Github 上了，如果覺得對你有幫助的話，就賞個 star 吧。

猜你喜歡

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容