本文整合前面四篇的控件，再結(jié)合豆瓣讀書的API，做了一個(gè)搜索書籍和查看書籍信息的Demo。

項(xiàng)目依賴庫

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:design:22.2.0'
    compile 'com.android.support:appcompat-v7:22.2.0'
    compile 'com.android.support:cardview-v7:22.2.0'
    compile 'com.android.support:recyclerview-v7:22.2.0'

    compile 'com.github.bumptech.glide:glide:3.6.0'
    compile 'de.hdodenhof:circleimageview:1.3.0'
    compile 'com.loopj.android:android-async-http:1.4.7'
    compile 'com.google.code.gson:gson:2.3'
    compile 'com.afollestad:material-dialogs:0.7.6.0'
}

書籍列表

使用了RecyclerView和CardView進(jìn)行布局。

RecyclerView參考文章：Material Design控件使用（一）

CardView參考文章：Material Design控件使用（三）

圖片的顯示，使用了glide，用法比較簡單

 Glide.with(holder.ivBook.getContext())
                    .load(book.getImage())
                    .fitCenter()
                    .into(holder.ivBook);

搜索書籍

• 搜索按鈕(FAB)點(diǎn)擊后，使用material-dialogs顯示dialog

 new MaterialDialog.Builder(getActivity())
                        .title(R.string.search)
                        .input(R.string.input_hint, R.string.input_prefill, new MaterialDialog.InputCallback() {
                            @Override
                            public void onInput(MaterialDialog dialog, CharSequence input) {
                                if (!TextUtils.isEmpty(input)) {
                                    doSearch(input.toString());
                                }
                            }
                        }).show();

• 使用android-async-http發(fā)送HTTP請求，gson解析數(shù)據(jù)

    public static void searchBooks(String name, final IBookResponse<List<Book>> response) {
        RequestParams params = new RequestParams();
        params.put("q", name);
        params.put("start", 0);
        params.put("end", 50);
        client.get(getAbsoluteUrl("book/search"), params, new AsyncHttpResponseHandler() {
            @Override
            public void onSuccess(int statusCode, Header[] headers, byte[] responseBody) {
                try {
                    Gson gson = new Gson();
                    JSONObject json = new JSONObject(new String(responseBody));
                    JSONArray jaBooks = json.optJSONArray("books");
                    List<Book> books = gson.fromJson(jaBooks.toString(), new TypeToken<List<Book>>() {
                    }.getType());
                    response.onData(books);

                } catch (Exception e) {
                    e.printStackTrace();
                }

            }

            @Override
            public void onFailure(int statusCode, Header[] headers, byte[] responseBody, Throwable error) {

            }
        });
    }

• 獲取數(shù)據(jù)后，更新RecyclerView

 private void doSearch(String keyword) {
        mProgressBar.setVisibility(View.VISIBLE);
        Book.searchBooks(keyword, new Book.IBookResponse<List<Book>>() {
            @Override
            public void onData(List<Book> books) {
                mAdapter = new MyAdapter(getActivity(), books);
                mRecyclerView.setAdapter(mAdapter);
                mProgressBar.setVisibility(View.GONE);
            }
        });
    }

顯示書籍信息

使用AppBarLayout+ TabLayout+ViewPager顯示書籍信息，
具體布局參考：Material Design控件使用（四）

側(cè)邊菜單欄

菜單欄實(shí)現(xiàn)請參考：Material Design控件使用（二）

項(xiàng)目源碼已發(fā)布到Github
APK下載地址：demo.apk
源碼地址：MaterialDesignExample

本文作者： 陽春面
原文地址：http://www.aswifter.com/2015/07/02/Material-Design-Example-5/

歡迎關(guān)注我的微信公眾號，分享Android 開發(fā)，IOS開發(fā)，Swift開發(fā)和互聯(lián)網(wǎng)內(nèi)容
微信號：APP開發(fā)者