自定义下拉刷新控件-CBStoreHouseRefreshControl

本文转载至 http://www.cocoachina.com/ios/20141110/10177.html

iOS开发自定义刷新CBStoreHouseRefres

介绍

这是一款在Storehouse启发下创作出来的控件,下拉刷新的时候可以完全定制自己想要的效果。来看效果图:

通过plist文件你可以使用任何想要的形状,下面这张是作者所在公司的logo:

安装

CBStoreHouseRefreshControl依赖于CocoaPods,通过在你的Podfile中添加下面这行命令来安装:


1

pod "CBStoreHouseRefreshControl"

当然你也可以直接把CBStoreHouseRefreshControl (.h .m) 和 BarItem (.h .m)文件直接拖到你的工程中去。

用法

只需要简单的使用下面这个方法你就可以将其添加到你的UIScrollView中,像使用UITableView和UICollectionView那样:


1

2

3

4

5

+ (CBStoreHouseRefreshControl*)attachToScrollView:(UIScrollView *)scrollView

                                           target:(id)target

                                    refreshAction:(SEL)refreshAction

                                            plist:(NSString *)plist;

self.storeHouseRefreshControl = [CBStoreHouseRefreshControl attachToScrollView:self.tableView target:self refreshAction:@selector(refreshTriggered:) plist:@"storehouse"];

还可以设定更多的参数:


1

2

3

4

5

6

7

8

9

10

11

12

+ (CBStoreHouseRefreshControl*)attachToScrollView:(UIScrollView *)scrollView

                                           target:(id)target

                                    refreshAction:(SEL)refreshAction

                                            plist:(NSString *)plist

                                            color:(UIColor *)color

                                        lineWidth:(CGFloat)lineWidth

                                       dropHeight:(CGFloat)dropHeight

                                            scale:(CGFloat)scale

                             horizontalRandomness:(CGFloat)horizontalRandomness

                          reverseLoadingAnimation:(BOOL)reverseLoadingAnimation

                          internalAnimationFactor:(CGFloat)internalAnimationFactor;

self.storeHouseRefreshControl = [CBStoreHouseRefreshControl attachToScrollView:self.tableView target:self refreshAction:@selector(refreshTriggered:) plist:@"storehouse" color:[UIColor whiteColor] lineWidth:1.5 dropHeight:80 scale:1 horizontalRandomness:150 reverseLoadingAnimation:YES internalAnimationFactor:0.5];

接下来就是在你的UIViewController中实现UIScrollViewDelegate,假如实现过就不必了。然后在刷新控件里传递调用。


1

2

3

4

5

6

7

8

- (void)scrollViewDidScroll:(UIScrollView *)scrollView

{

    [self.storeHouseRefreshControl scrollViewDidScroll];

}

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate

{

    [self.storeHouseRefreshControl scrollViewDidEndDragging];

}

最后,确保你已经实现了之前用来监听刷新触发器的refreshAction。


1

2

3

4

5

6

- (void)refreshTriggered

{

    //call your loading method here

    //Finshed loading the data, reset the refresh control

    [self.storeHouseRefreshControl finishedLoading];

}

想了解更多请看源码

使用自定义图形

CBStoreHouseRefreshControl中的图形使用BarItem来实现动画,每个BarItem会有自己的动画,你仅需要使用plist文件为其指定开始点starPoint和结束点endPoint。

所有的BarItem共享的是以屏幕左上角为原点的坐标系,比如你要绘制一个正方形的话,plist文件就该这么写:

效果如下:

注意

确保为开始点startPoint和结束点endPoint都设置了正确的值。

确保坐标的书写是{x,y}的形式

使用loading或者是highlight的动画都会使得plist中所有BarItem按顺序高亮,而使用reverseLoadingAnimation则相反。

@isaced同学提到,使用PaintCode来生成开始点和结束点会更轻松得多,具体介绍看这里

配置方法

color参数用于设置Baritem的颜色

lineWidth则可以设置Baritem的宽度

dropHeight用来设置控件的高度

scale可以设置控件比例

horizontalRandomness能改变Baritme的散开方式

reverseLoadAnimation设置为YES的话可以Baritem的高亮顺序会颠倒

internalAnimationFactor用于改变Baritem动画时间,如果设置为1,则所有Baritem一同消失或者出现。

时间: 2024-10-24 17:34:16

自定义下拉刷新控件-CBStoreHouseRefreshControl的相关文章

自定义下拉刷新控件

一.功能效果 1.在很多app中,在信息展示页面,当我们向下拖拽时,页面会加载最新的数据,并有一个短暂的提示控件出现,有些会有加载进度条,有些会记录加载日期.条目,有些还带有加载动画.其基本实现原理都相仿,本文中将探讨其实现原理,并封装出一个简单的下拉刷新控件 2.自定义刷新工具简单的示例 二.系统提供的下拉刷新工具 1.iOS6.0以后系统提供了自己的下拉刷新的控件:UIRefreshControl .例如,refreshControl,作为UITableViewController中的一个属

Android PullToRefreshView自定义下拉刷新控件

MyPullToRefreshView继承自LinearLayout,布局为vertical,该容器中包含三个子view,这三个view从上到下依次排列在LinearLayout中. 效果图如下: 下图中蓝色部分是充满屏幕的,HeaderView在ListView的上方,在代码中动态添加进来,使其底部Y轴坐标刚好为0,FooterView在ListView的下方,也在代码中动态添加进来,该View的TopMargin刚好为整个布局的高度. 首先看一下该控件的使用: 1.在xml中配置 <span

[Android]下拉刷新控件RefreshableView的实现

需求:自定义一个ViewGroup,实现可以下拉刷新的功能.下拉一定距离后(下拉时显示的界面可以自定义任何复杂的界面)释放手指可以回调刷新的功能,用户处理完刷新的内容后,可以调用方法onCompleteRefresh()通知刷新完毕,然后回归正常状态.效果如下:     源代码:RefreshableView(https://github.com/wangjiegulu/RefreshableView) 分析: 我们的目的是不管什么控件,只要在xml中外面包一层标签,那这个标签下面的所有子标签所

Android 解决下拉刷新控件和ScrollVIew的滑动冲突问题。

最近项目要实现ScrollView中嵌套广告轮播图+RecyleView卡片布局,并且RecyleView按照header和内容的排列样式,因为RecyleView的可扩展性很强,所以我毫无疑问的选择了它,而且让RecyleView实现了可拖拽的效果, 最后我再加上了下拉刷新的效果(这里我用的下拉刷新控件是三方的SmartRefreshLayout).记得刚开始实现这个效果的时候还是十分的得心印手.可是当我测试的时候,发现RecyleView的子item的拖拽效果并不流畅,起初我以 为是由于Re

Android下拉刷新控件--PullToRefresh的简单使用

Android中很多时候都会用到上下拉刷新,这是一个很常用的功能,Android的v4包中也为我们提供了一种原生的下拉刷新控件--SwipeRefreshLayout,可以用它实现一个简洁的刷新效果,但今天我们的主角并不是它,而是一个很火的第三方的上下拉刷新控件--PullToRefresh.PullToRefresh包括PullToRefreshScrollView.PullToRefreshListView.PullToRefreshGridView等等很多为我们提供的控件,我们可以在xml

Android下拉刷新控件SwipeRefreshLayout源码浅析

SwipeRefreshLayout是Android官方的下拉刷新控件,使用简单,界面美观,不熟悉的朋友可以随便搜索了解一下,这里就不废话了,直接进入正题. 这种下拉刷新控件的原理不难,基本就是监听手指的运动,获取手指的坐标,通过计算判断出是哪种操作,然后就是回调相应的接口了.SwipeRefreshLayout是继承自ViewGroup的,根据Android的事件分发机制,触摸事件应该是先传递到ViewGroup,根据onInterceptTouchEvent的返回值决定是否拦截事件的,那么就

Android——谷歌官方下拉刷新控件SwipeRefreshLayout(转)

转自:http://blog.csdn.net/zouzhigang96/article/details/50476402 版权声明:本文为博主原创文章,未经博主允许不得转载. 前言: 如今谷歌推出了更官方的下拉刷新控件, 这无疑是对安卓开发人员来说是个好消息,很方便的使用这个SwipeRefreshLayout控件实现下拉刷新功能.Android4.0以下的版本需要用到 Android-support-v4.jar包才能用到 android-support-v4.jar 包下载地址:http:

Android仿苹果版QQ下拉刷新实现(一) ——打造简单平滑的通用下拉刷新控件

前言: 因为公司人员变动原因,导致了博主四个月没有动安卓,一直在做IOS开发,如今接近年前,终于可以花一定的时间放在安卓上了.好了,废话不多说,今天我们要带来的效果是苹果版本的QQ下拉刷新.首先看一下目标效果以及demo效果:      因为此效果实现的步骤较多,所以今天博主要实现以上效果的第一步——打造一个通用的下拉刷新控件,具体效果如下: GIF图片比较大,还希望读者能耐心等待一下下从效果图中可以看出,我们的下拉刷新的滑动还是很流畅的,可能大多数开发者用的是XListview或者PullTo

解决下拉刷新控件和ScrollVIew的滑动冲突问题。

最近项目要实现ScrollView中嵌套广告轮播图+RecyleView卡片布局,并且RecyleView按照header和内容的排列样式,因为RecyleView的可扩展性很强,所以我毫无疑问的选择了它,而且让RecyleView实现了可拖拽的效果, 最后我再加上了下拉刷新的效果(这里我用的下拉刷新控件是三方的SmartRefreshLayout).记得刚开始实现这个效果的时候还是十分的得心印手.可是当我测试的时候,发现RecyleView的子item的拖拽效果并不流畅,起初我以 为是由于Re