Material Design控件使用（完結篇）

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

項目依賴庫

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'

}</pre>

書籍列表 

 

使用了RecyclerView和CardView進行布局。 

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

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

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

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


搜索書籍 

 

搜索按鈕(FAB)點擊后，使用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發送HTTP請求，gson解析數據 

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) {

    }
});

}</pre>

獲取數據后，更新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控件使用（四） 

側邊菜單欄 
 
菜單欄實現請參考： Material Design控件使用（二） 

項目源碼已發布到Github 
APK下載地址： demo.apk 
源碼地址： MaterialDesignExample 

原文  http://www.aswifter.com/2015/07/02/Material-Design-Example-5/