天天看点

可折叠的视图+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. 因为十分简单,都是使用的谷歌原生的东西,所以就不啰嗦了。
<?xml version="1.0" encoding="utf-8"?>
            <android.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">

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

                    <android.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">
                        <ImageView
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:background="@mipmap/a"/>
                        <android.support.v7.widget.Toolbar
                            android:id="@+id/toolbar"
                            android:layout_width="match_parent"
                            android:layout_height="?attr/actionBarSize"
                            app:layout_collapseMode="parallax" />
                    </android.support.design.widget.CollapsingToolbarLayout>

                </android.support.design.widget.AppBarLayout>

                **<include layout="@layout/content_main" />**


            </android.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相似
<?xml version="1.0" encoding="utf-8"?>
<android.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">

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

    </android.support.v7.widget.RecyclerView>
</android.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();
                            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, , 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<DataBean> dataBeanList;
    private int style = ;
    private MyItemListener myItemListener;
    public RecyclerAdapter(Context context,int style,List<DataBean> dataBeanList){
        this.context = context;
        this.dataBeanList = dataBeanList;
        this.style = style;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        //每一个条目创建的回调
        View view = null;
        if (style==){
            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 ;
    }

    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下载。

继续阅读