可折叠的视图+RecyclerView以及下拉刷新

可折叠的视图+RecyclerView以及下拉刷新

• 安卓6.0出来已经很长时间，我们接下来要说的控件就是6.0的新特性。现在市面上很多APP都已经采用了类似的样式。由于图片太大，就不上效果图了。喜欢的同学可以下载demo运行下看看。

• 废话就不多说了，直接说如何实现的。

  1. 首先需要添加依赖，如下所示：
     在项目对应的build.gradle中添加以下配置

dependencies {
                compile 'com.android.support:appcompat-v7:23.1.1'
                compile 'com.android.support:design:23.1.0'
            }

1. 因为十分简单，都是使用的谷歌原生的东西，所以就不啰嗦了。

            "1.0" encoding="utf-8"?>
            .support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true">

                .support.design.widget.AppBarLayout
                    android:layout_width="match_parent"
                    android:layout_height="350dp">

                    .support.design.widget.CollapsingToolbarLayout
                        android:id="@+id/collapsingToolbarLayout"
                        android:layout_width="match_parent"
                        android:layout_height="350dp"
                        app:contentScrim="#30469b"
                        android:fitsSystemWindows="true"
                        app:layout_scrollFlags="scroll|exitUntilCollapsed"
                        app:expandedTitleMarginStart="14dp">
                        "match_parent"
                            android:layout_height="match_parent"
                            android:background="@mipmap/a"/>
                        .support.v7.widget.Toolbar
                            android:id="@+id/toolbar"
                            android:layout_width="match_parent"
                            android:layout_height="?attr/actionBarSize"
                            app:layout_collapseMode="parallax" />
                    .support.design.widget.CollapsingToolbarLayout>

                .support.design.widget.AppBarLayout>

                **"@layout/content_main" />**


            .support.design.widget.CoordinatorLayout>

1. 在Activity中找到布局然后进行简单的设置。

                 CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsingToolbarLayout);
                 //设置title的信息
                    collapsingToolbarLayout.setTitle("可折叠的View");
                    //设置展开后title的颜色
                    collapsingToolbarLayout.setExpandedTitleColor(Color.GREEN);
                    //设置收缩后titile的颜色
                     collapsingToolbarLayout.setCollapsedTitleTextColor(Color.RED);

4.OK到这里，可折叠的控件就介绍完毕了，另外附上一份属性参数介绍。

RecyclerView以及下拉刷新

• 在这里先介绍一个谷歌自己的下拉刷新SwipeRefreshLayout，是在v4包下的。我们今天使用的就是这个东东。

  1. 同样直接上代码，首先看布局文件，RecyclerView很简单和ListView相似

"1.0" encoding="utf-8"?>
.support.v4.widget.SwipeRefreshLayout   xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/refresh_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.sunshine.test.MainActivity"
    tools:showIn="@layout/app_bar_main">

    .support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    .support.v7.widget.RecyclerView>
.support.v4.widget.SwipeRefreshLayout>

1. 和其他布局使用方式都一样，首先我们要在Activitiy中找到控件。还有一些简单的使用，因为很简单我就不一一介绍了，看代码吧。如下：

recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
        final SwipeRefreshLayout refreshLayout = (SwipeRefreshLayout) findViewById(R.id.refresh_layout);
        //设置下拉刷新的样式
        refreshLayout.setColorSchemeResources(android.R.color.holo_blue_light, android.R.color.holo_red_light, android.R.color.holo_orange_light, android.R.color.holo_green_light);
        //下拉刷新的监听
        refreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                new Thread(new Runnable() {
                    @Override
                    public void run() {
                        try {
                            Thread.sleep(5000);
                            runOnUiThread(new Runnable() {
                                @Override
                                public void run() {
                                    //隐藏下拉刷新
                                    refreshLayout.setRefreshing(false);
                                    Toast.makeText(MainActivity.this,"已经是最新了",Toast.LENGTH_SHORT).show();
                                }
                            });
                        } catch (InterruptedException e) {
                            e.printStackTrace();
                        }
                    }
                }).start();
            }
        });

1. 下拉刷新很简单，就是一个回调方法，下面我们主要看RecyclerView的使用，与ListView很相似。如下：

 LinearLayoutManager  linearLayoutManager =  new LinearLayoutManager(this, LinearLayoutManager.VERTICAL,false);
        //设置布局管理器
        recyclerView.setLayoutManager(linearLayoutManager);
        //设置适配器
        RecyclerAdapter recyclerAdapter = new RecyclerAdapter(this, 1, dataBeanList);
        recyclerView.setAdapter(recyclerAdapter);

看到这里的同学们是不是感觉到，使用的方法很有印象，不错和ListView没有区别，多了一个布局管理器的东东。这就是它的强大之处，布局管理器有三个（LinearLayoutManager，GridLayoutManager，StaggeredGridLayoutManager）,前两个我们都经常用到，第三个是比较炫酷的瀑布流管理器，实用起来也非常方便，如上面的代码一样，直接使用即可。

1. RecyclerAdapter的实现，因为RecyclerView没有item的点击事件的，所以只能我们自己写接口实现。下面是我自己写的，供大家参考。

package com.sunshine.test.adapter;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.sunshine.test.R;
import com.sunshine.test.bean.DataBean;
import com.sunshine.test.inter.MyItemListener;

import java.util.List;

/**
 * RecyclerView的适配器
 * Created by Sunshine on 2016/5/23.
 */
public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.ViewHolder>{

    private Context context;
    private List dataBeanList;
    private int style = 0;
    private MyItemListener myItemListener;
    public RecyclerAdapter(Context context,int style,List dataBeanList){
        this.context = context;
        this.dataBeanList = dataBeanList;
        this.style = style;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        //每一个条目创建的回调
        View view = null;
        if (style==0){
            view = View.inflate(context, R.layout.item_grid, null);
        }else {
            view = View.inflate(context, R.layout.item_list, null);
        }

        return new ViewHolder(view,myItemListener);
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        //数据绑定条目的回调
        DataBean dataBean = dataBeanList.get(position);
        holder.setData(dataBean);
    }

    public void setOnItemListener(MyItemListener myItemListener){
        this.myItemListener = myItemListener;
    }

    @Override
    public int getItemCount() {
        //数据的个数
        if (dataBeanList!=null){
            return dataBeanList.size();
        }
        return 0;
    }

    public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
        public ImageView ivIcon;
        public TextView tvName;
        private MyItemListener myItemListener;
        public ViewHolder(View itemView,MyItemListener myItemListener) {
            super(itemView);
            ivIcon = (ImageView) itemView.findViewById(R.id.iv_icon);
            tvName = (TextView) itemView.findViewById(R.id.tv_name);
            this.myItemListener = myItemListener;
            itemView.setOnClickListener(this);
        }

        public void setData(DataBean dataBean) {
            ivIcon.setImageResource(dataBean.ivIcon);
            tvName.setText(dataBean.tvName);
        }

        @Override
        public void onClick(View v) {
            if (myItemListener!=null){
                myItemListener.onItemClick(v,getPosition());
            }
        }
    }
}

最后奉上全部的代码，如有不当之处请多多指教。Demo下载。