Material Design控件使用

最新推荐文章于 2022-08-11 22:44:32 发布

转载最新推荐文章于 2022-08-11 22:44:32 发布 · 56 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/59a80875f265da249517a3b1

本文介绍了一个基于豆瓣API的书籍搜索应用Demo，使用Android平台的多种控件和技术，如RecyclerView、CardView、Glide等，实现了书籍搜索、列表展示及详细信息查看等功能。

本文整合前面四篇的控件，再结合豆瓣读书的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'
}复制代码

##书籍列表

使用了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) {

          }
      });
  }复制代码

获取数据后，更新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控件使用（二）

##动画效果
动画实现请参考：Android Material Design 动画实现

项目源码已发布到Github
APK下载地址：demo.apk
源码地址：MaterialDesignExample

扫一扫下方二维码，关注我的微信公众号(APP开发进阶)，第一时间获得Android开发进阶文章

APP开发进阶

转载于:https://juejin.im/post/59a80875f265da249517a3b1