美文网首页Android技术交流UI & Material DesignAndroid
Material Design控件使用(完结篇)

Material Design控件使用(完结篇)

作者: 阳春面 | 来源:发表于2015-07-02 01:05 被阅读2339次

    本文整合前面四篇的控件,再结合豆瓣读书的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控件使用(二)

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

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

    欢迎关注我的微信公众号,分享Android 开发,IOS开发,Swift开发和互联网内容
    微信号:APP开发者

    相关文章

      网友评论

      • M星空:@阳春面 我私信了你我的联系方式
      • M星空:你在你的fragment布局中加一个button,点击事件都不用加,滑动button 滚动,有的界面能滑动,有的界面就不能。
      • M星空:@阳春面 你把点击事件去掉,即使文字少,还是能够滚动的,而且有时候文字多也是不能够滚动滚动
      • 阳春面: @M星空 不是随机的,是那个textview内容太少了,没触发滚动
      • M星空:@阳春面 他能不能滚动每个都不一样,随机的,你切换到其他书籍又不一样了。
      • 阳春面: @M星空 恩,是的,第二个fragment不能滚动,我改改看
      • M星空:@阳春面 我也在miui v6 刚刚测试的,在第一个花千古的第一个fragment点击文字能滚动,第二个点击文字不能滚动,点击下面的空白能滚动。花千古(下)的第一个和第二个fragment的文字都不能滚动了。
      • 阳春面:@M星空 我在tvInfo加了onclickListener , 我在米4上测试没有出现不能滚动的效果,这个是我打的APK,你试一下看, https://raw.githubusercontent.com/chenyangcun/MaterialDesignExample/master/images/app-debug.apk
      • M星空:@阳春面 我开始就为你的那个文字tvInfo添加了onclickListener 点击事件,就影响滚动了,而且没找到规律,有的时候能够滚动,有的时候不能,我是说在滚动加点击事件的控件的时候。design library 刚出来的时候就研究,想通过CollapsingToolbarLayout 做一个 向上滚动隐藏头像的功能,像google博文介绍的那样子:http://img.blog.csdn.net/20150530175223264 ,滚动效果是能做出来,但是问题是,下面的NestedScrollView布局中的控件如果添加了点击事件,再触摸滚动这个控件,就会出现随机性的不能滚动。stackoverflow也查了,没找到原因
      • 阳春面:@M星空 我在这个fragment里文本前面加了个button, 没有影响滚动,你是加了什么控件呢?
      • 阳春面: @M星空 好的,我查一下
      • M星空:在显示书籍信息的 AppBarLayout+ TabLayout+ViewPager,中的fragment中,如果fragment中的控件添加点击事件之后就会影响上面的滚动,而且是随机的,不知道是不是bug,试了好多次

      本文标题:Material Design控件使用(完结篇)

      本文链接:https://www.haomeiwen.com/subject/wkfyqttx.html