美文网首页控件与三方的依赖高级UI
上拉加载下拉刷新---SmartRefreshLayout

上拉加载下拉刷新---SmartRefreshLayout

作者: 穿越平行宇宙 | 来源:发表于2019-04-15 20:02 被阅读26次

    前言

    上拉加载下拉刷新的控件大家该很熟悉了,今天介绍一款不错的上拉加载下拉刷新控件--------SmartRefreshLayout
    参考链接:
    SmartRefreshLayout官网

    介绍

    支持下拉刷新、上拉加载、RefreshLayout、OverScroll,Android智能下拉刷新框架,支持越界回弹,具有极强的扩展性,集成了几十种炫酷的Header和 Footer。
    
    不只是如其它的刷新布局所说的支持所有的View,还支持多层嵌套的视图结构。 除了“聪明”之外,SmartRefreshLayout还具备了很多的特点。
    它继承自ViewGroup 而不是其它的FrameLayout或者LinearLayout,提高了性能。
    
    
    1、支持所有的 View(AbsListView、RecyclerView、WebView....View) 和多层嵌套的视图结构
    2、支持自定义并且已经集成了很多炫酷的 Header 和 Footer (图).
    3、支持和ListView的同步滚动 和 RecyclerView、AppBarLayout、CoordinatorLayout 的嵌套滚动 NestedScrolling.
    4、支持在Android Studio Xml 编辑器中预览 效果(图)
    5、支持分别在 Default(默认)、Xml、JavaCode 三个中设置 Header 和 Footer.
    6、支持自动刷新、自动上拉加载(自动检测列表惯性滚动到底部,而不用手动上拉).
    7、支持通用的刷新监听器 OnRefreshListener 和更详细的滚动监听 OnMultiPurposeListener.
    8、支持自定义回弹动画的插值器,实现各种炫酷的动画效果.
    9、支持设置主题来适配任何场景的App,不会出现炫酷但很尴尬的情况.
    10、支持设置多种滑动方式来适配各种效果的Header和Footer:平移、拉伸、背后固定、顶层固定、全屏
    11、支持内容尺寸自适应 Content-wrap_content
    12、支持继承重写和扩展功能,内部实现没有 private 方法和字段,继承之后都可以重写覆盖
    13、支持越界回弹(Listview、RecyclerView、ScrollView、WebView...View)
    14、支持多点触摸,下拉、上拉各种手势冲突
    
    • 一、导入依赖

    在app-module中添加RecycleView和SmartRefreshLayout的依赖

        //recyclerview
        implementation 'com.android.support:recyclerview-v7:26.1.0'
        implementation 'com.android.support:design:26.1.0'
        //SmartRefreshLayout
        implementation 'com.scwang.smartrefresh:SmartRefreshLayout:1.0.4-7'
        implementation 'com.scwang.smartrefresh:SmartRefreshHeader:1.0.4-7'
    
    • 二、在mainActivity中添加xml布局
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout 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:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.freshdemo.MainActivity"
        android:orientation="vertical">
    
    
        <com.scwang.smartrefresh.layout.SmartRefreshLayout
            android:id="@+id/refreshLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:srlAccentColor="#00000000"
            app:srlPrimaryColor="#00000000"
            app:srlEnablePreviewInEditMode="true">
    
                <android.support.v7.widget.RecyclerView
                    android:id="@+id/rv"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"/>
    
        </com.scwang.smartrefresh.layout.SmartRefreshLayout>
    
    </LinearLayout>
    

    这是SmartRefreshLayout的基本布局,其中:

     app:srlAccentColor="#00000000"//设置Header主题颜色
     app:srlPrimaryColor="#00000000"//设置Footer主题颜色
     app:srlEnablePreviewInEditMode="true"//开启和关闭预览功能
    
    • 三、MainActivity中初始化和刷新加载事件
        private RecyclerView mRecyclerView;
        private RefreshLayout mRefreshLayout;
    
        //初始化
        mRecyclerView=findViewById(R.id.rv);
        mRefreshLayout = findViewById(R.id.refreshLayout);
    
               //刷新
            mRefreshLayout.setOnRefreshListener(new OnRefreshListener() {
                @Override
                public void onRefresh(RefreshLayout refreshlayout) {
                    mData.clear();
                    mNameAdapter.notifyDataSetChanged();
                    refreshlayout.finishRefresh();
                }
            });
            //加载更多
            mRefreshLayout.setOnLoadmoreListener(new OnLoadmoreListener() {
                @Override
                public void onLoadmore(RefreshLayout refreshlayout) {
                    for(int i=0;i<30;i++){
                        mData.add("小明"+i);
                    }
                    mNameAdapter.notifyDataSetChanged();
                    refreshlayout.finishLoadmore();
                }
            });
    

    开启/关闭下拉刷新和加载更多,结束刷新和加载

    开始下拉
    mRefreshLayout.setEnableRefresh(true);//启用刷新
    mRefreshLayout.setEnableLoadmore(true);//启用加载
    关闭下拉
    mRefreshLayout.finishRefresh();
    mRefreshLayout.finishLoadmore();
    
    • 四.运行效果

    SmartRefreshLayout运行的默认效果如下

    image.png
    • 五.SmartRefreshLayout的其他的刷新样式
    5.1经典样式ClassicsFooter

    只需要在布局中添加对应的header和footer,则activity_main.xml代码如下:

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout 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:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.freshdemo.MainActivity"
        android:orientation="vertical">
    
    
        <com.scwang.smartrefresh.layout.SmartRefreshLayout
            android:id="@+id/refreshLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:srlAccentColor="#00000000"
            app:srlPrimaryColor="#00000000"
            app:srlEnablePreviewInEditMode="true">
    
            <com.scwang.smartrefresh.layout.header.ClassicsHeader
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>
    
                <android.support.v7.widget.RecyclerView
                    android:id="@+id/rv"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"/>
    
            <com.scwang.smartrefresh.layout.footer.ClassicsFooter
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    
        </com.scwang.smartrefresh.layout.SmartRefreshLayout>
    
    </LinearLayout>
    
    

    运行效果如下图:

    image.png
    5.2一个绚丽的PhoenixHeader展示

    修改后activity_main.xml代码如下:

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout 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:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.freshdemo.MainActivity"
        android:orientation="vertical">
    
    
        <com.scwang.smartrefresh.layout.SmartRefreshLayout
            android:id="@+id/refreshLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:srlAccentColor="#00000000"
            app:srlPrimaryColor="#00000000"
            app:srlEnablePreviewInEditMode="true">
    
            <com.scwang.smartrefresh.header.PhoenixHeader
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    
                <android.support.v7.widget.RecyclerView
                    android:id="@+id/rv"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"/>
    
            <com.scwang.smartrefresh.layout.footer.BallPulseFooter
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    
        </com.scwang.smartrefresh.layout.SmartRefreshLayout>
    
    </LinearLayout>
    
    

    运行效果图:


    image.png
    5.3header,footer各样式类所引入包路径如下

    SmartRefreshLayout可以引入好几种Header和Footer样式,其中footer固定样式有三种,在refresh-layout包下:

    image

    包路径分别为:

    com.scwang.smartrefresh.layout.footer.BallPulseFooter
    com.scwang.smartrefresh.layout.footer.ClassicsFooter
    com.scwang.smartrefresh.layout.footer.FalsifyFooter
    
    

    header样式则很多,在refresh-layout包下有:

    image

    包路径分别为:

    com.scwang.smartrefresh.layout.header.BezierRadarHeader
    com.scwang.smartrefresh.layout.header.ClassicsHeader
    com.scwang.smartrefresh.layout.header.FalsifyHeader
    
    

    在refresh-header包下有以下样式:

    image

    他们的包路径是:

    com.scwang.smartrefresh.header.BezierCircleHeader
    com.scwang.smartrefresh.header.DeliveryHeader
    //以下类似,在此省略
    //......
    
    
    六.自定义Header和Footer

    当然SmartRefreshLayout还支持自定义Header和Footer
    具体可以参考官网中的自定义Header

    SmartRefreshLayout关于属性这一块也是有很多可以设置的,大家依然可以去SmartRefreshLayout官网查看更多使用细则,这里就不展开讲解了

    相关文章

      网友评论

        本文标题:上拉加载下拉刷新---SmartRefreshLayout

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