IOS 利用UIScrollview实现滑动筛选

在ios中经常会用到滑动筛选的功能，如下:

利用UIScrollview控件可以实现上述功能，思路大致是：创建一个UIView，宽度为屏幕宽度320，高度为以上图的背景图高度，在UIView上添加一个 UIScrollView宽度为一个类型的宽度，设置UIscrollView自动停止滚动，设置两边被遮盖的区域可见，將类型添加到UIScrollview中，并设置他们的位置，这样效果是有了，但是这个时候只能在UISCrollview上滑动，即上图中间一块区域，要实现两边都可以滑动，需要重写UIView 的hitTest，將UIView两边的滑动事件交给UIScrollview即可。当然这样也可以实现类似Safari浏览器的多试图切换的效果。下面直接上示例代码：

 

 

TopscrollView.h的代码如下：

 

#import <UIKit/UIKit.h>

 

@protocol TopScrollViewDelegate;

 

@interface TopScrollView : UIView<UIScrollViewDelegate>{

 

    UIScrollView *scrollview;

 

    id <TopScrollViewDelegate> _delegate;

}

 

@property(retain,nonatomic)UIScrollView *scrollview;

 

@property(retain,nonatomic)id <TopScrollViewDelegate> delegate;

 

@end

 

@protocol TopScrollViewDelegate <NSObject>

 

@required

 

//UIScrollView 滑动结束事件代理

- (void)TopScrollView:(TopScrollView *)foodTopView pageIndex:(NSInteger)pageIndex;

 

@end

 

 

TopscrollView.m 代码

 

#import "TopScrollView.h"

 

const CGFloat topScrollObjHeight = 38.0;

const CGFloat topScrollObjWidth = 101.0;

const NSUInteger topNumImages = 6;

 

 

@implementation TopScrollView

 

@synthesize scrollview;

@synthesize delegate=_delegate;

 

 

//设置UIScrollview子试图的frame和可滚动区域

- (void)layoutTopScrollImages

{

UIImageView *view = nil;

NSArray *subviews = [scrollview subviews];

 

CGFloat curXLoc = 0;

for (view in subviews)

{

if ([view isKindOfClass:[UIImageView class]] && view.tag > 0)

{

CGRect frame = view.frame;

frame.origin = CGPointMake(curXLoc, 0);

view.frame = frame;

curXLoc += (topScrollObjWidth);

}

 

 

}

    [scrollview setContentSize:CGSizeMake((topNumImages * topScrollObjWidth), [scrollview bounds].size.height)];

 

 

}

 

 

 

- (id)initWithFrame:(CGRect)frame

{

    self = [super initWithFrame:frame];

    if (self) {

 

        scrollview=[[UIScrollView alloc]initWithFrame:CGRectMake(110, 0, 101, 39)];

        [scrollview setCanCancelContentTouches:NO];

        scrollview.indicatorStyle = UIScrollViewIndicatorStyleWhite;

        scrollview.clipsToBounds = NO; //是否溢出

        scrollview.scrollEnabled = YES;

        scrollview.pagingEnabled = YES;     //是否自动停止

        scrollview.showsHorizontalScrollIndicator=NO;  //是否显示水平滚动条

        scrollview.delegate=self;

 

        NSMutableArray *title=[[NSMutableArray alloc]initWithObjects:@"开胃菜",@"主餐类",@"主食",@"火锅",@"甜点",@"茶饮", nil];

 

        NSUInteger i;

 

        for (i = 1; i <= topNumImages; i++)

        {

            NSString *imageName = [NSString stringWithFormat:@"food_top_sigle_bg.png"];

            UIImage *image = [UIImage imageNamed:imageName];

            UIImageView *imageView = [[UIImageView alloc] initWithImage:image];

 

            CGRect rect = imageView.frame;

            rect.size.height = topScrollObjHeight;

            rect.size.width = topScrollObjWidth;

            imageView.frame = rect;

            imageView.tag = i;

 

            UILabel *lable=[[UILabel alloc]initWithFrame:CGRectMake(0, 0, 101, 39)];

            lable.text=[title objectAtIndex:(i-1)];

            lable.textColor=[UIColor colorWithRed:131/255.0 green:147/255.0 blue:89/255.0 alpha:1];

            lable.font=[UIFont fontWithName:@"Helvetica" size:17];

            lable.backgroundColor=[UIColor clearColor];

            lable.textAlignment=UITextAlignmentCenter;

            [imageView addSubview:lable];

 

            [scrollview addSubview:imageView];

            [imageView release];

        }

 

        [self addSubview:scrollview];

        [scrollview release];

        [title release];

 

        [self layoutTopScrollImages];

 

 

    }

    return self;

}

 

//这里將整个UIView区域的事件都交给UIScrillView

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {

    if (CGRectContainsPoint(CGRectMake(0,0,320,39), point)) {

 

        return scrollview;

    }

    return [super hitTest:point withEvent:event];

}

 

- (void)dealloc

{

    [scrollview release];

    [super dealloc];

}

 

//滑动结束，即类型切换时更新内容

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {

 

    int index=self.scrollview.contentOffset.x/topScrollObjWidth+1;

 

    if ([_delegate respondsToSelector:@selector(FoodTopScrollView:pageIndex:)]) {

 

[_delegate FoodTopScrollView:self pageIndex:index];

}

}

 

@end

评论

1 楼 f5528710 2016-05-19