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
