iOS庫或DIY Etsy如類別控制？

Question

我正在嘗試爲Etsy在其iPhone應用程序中的滑動類別視圖查找庫或示例項目。

我談論重新創建「精心挑選，歷史和季節性」類別的應用程序的主視圖頂部滑動效果。

如果有人知道Github上的一個，或者是一個關於如何做這樣的事情的kickstart，那就太棒了！

Answer 1

如果您只想要類別而不是整個TableView，那麼您不需要第三方控件。一個UIScrollView是你所需要的。

這個想法是你創建一個帶有分頁功能的滾動視圖，並將其設置爲不剪切內容並將其居中在屏幕中。 現在因爲我們需要能夠捕捉甚至超出scrollView左邊緣的觸摸（當用戶已經滾動時），我們需要一個技巧來捕捉觸摸。這是通過使用UIView完成的，該UIView將以全屏寬度進行，並且會將截獲的觸摸傳遞給我們的scrollView。

有了那一套，這裏是代碼： 首先捕獲的觸摸視圖（我把它命名爲ExtendedScrollViewCaptureView）：

#import <UIKit/UIKit.h> 

@interface ExtendedScrollViewCaptureView : UIView { 

} 

@property (nonatomic,strong)UIScrollView *scrollView; 

@end 

下面是實現文件：

#import "ExtendedScrollViewCaptureView.h" 

@implementation ExtendedScrollViewCaptureView 

@synthesize scrollView; 

- (id)initWithFrame:(CGRect)frame 
{ 
    self = [super initWithFrame:frame]; 
    if (self) { 
     // Initialization code 
    } 
    return self; 
} 

- (UIView *) hitTest:(CGPoint) point withEvent:(UIEvent *)event { 
    if ([self pointInside:point withEvent:event]) { 
     return scrollView; 
    } 
    return nil; 
} 

@end 

現在，讓我們去主要的東西。在你的viewController頭文件中創建一個UIScrollView伊娃：

@property(nonatomic,strong)UIScrollView *scrollView; 

還添加2個監視可用的最大標題整型變量，並跟蹤所選選項卡：

@interface MyViewController : UIViewController<UIScrollViewDelegate> 
{ 
    int selectedIndex; 
    int maxIndex; 
} 

，並在您的實現文件：

- (void)viewDidLoad 
{ 
    [super viewDidLoad]; 
    ExtendedScrollViewCaptureView *extendedView = [[ExtendedScrollViewCaptureView alloc] initWithFrame:self.navigationBar.bounds]; 
    extendedView.backgroundColor = [UIColor clearColor]; 
    extendedView.clipsToBounds = YES; 

    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(labelTapped:)]; 
    [extendedView addGestureRecognizer:tap]; 

    self.scrollView = [[UIScrollView alloc] init]; 
    self.scrollView.frame = CGRectMake(0,0,320,36); 
    self.scrollView.pagingEnabled = YES; 
    self.scrollView.showsVerticalScrollIndicator = NO; 
    self.scrollView.showsHorizontalScrollIndicator = NO; 
    self.scrollView.bounces = YES; 
    self.scrollView.alwaysBounceHorizontal = YES; 
    self.scrollView.alwaysBounceVertical = NO; 
    self.scrollView.backgroundColor = [UIColor clearColor]; 
    self.scrollView.delegate = self; 
    self.scrollView.scrollsToTop = NO; 
    //add the scrollView inside the extendedView 
    [extendedView addSubview:self.scrollView]; 

    //get the pointer reference 
    extendedView.scrollView = self.scrollView; 

    //add the arrow inside the extendedView 
    UIImageView *arrow = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"arrow.png"]]; 
    arrow.frame = CGRectMake(154, 36, 11, 6); 
    [extendedView addSubview:arrow]; 

    //add the extendedSubView to the view 
    [self.view addSubview:extendedView]; 

    //init the scrollView with some entries: 
    [self setUpScrollView:[NSArray arrayWithObjects:@"LABEL 1",@"LABEL 2",@"LABEL 3",@"LABEL 4",@"LABEL 5",nil]]; 
} 

現在創建函數初始化與標題標籤的滾動型（標籤傳遞作爲一個NSArray）

- (void)setUpScrollView:(NSArray *)titleLabels { 

    int scrollSize = 320; 
    int i = 0; 
    int offsetX = 0; 
    int scrollViewWidth = 0; 
    maxIndex = titleLabels.count; 

    //if our scrollview has already the labels stop here 
    if ([self.scrollView subviews].count>0) { 
     self.scrollView.contentOffset = CGPointZero; 
     return; 
    } 
    //get the max width of the labels, which will define our label width 
    for (NSString *titleLabel in titleLabels) { 
     CGSize expectedLabelSize = [[titleLabel capitalizedString] sizeWithFont:[UIFont fontWithName:kFontFamily1 size:kFontFamily1Correction+13] constrainedToSize:CGSizeMake(320, 22)]; 
     scrollViewWidth = MAX(scrollViewWidth,expectedLabelSize.width); 
    } 

    //restrict max width for title items to 106 pixels (to fit 3 labels in the screen) 
    //this is optional and can adjusted or removed, but I suggest to make labels equal width 

    scrollViewWidth = MIN(scrollViewWidth, 106); 

    //now draw the labels 
    for (NSString *titleLabel in titleLabels) { 

     UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(offsetX, 5, scrollViewWidth, 34)]; 

     label.text = [titleLabel capitalizedString]; 
     label.adjustsFontSizeToFitWidth = NO; 
     label.numberOfLines = 2; 
     label.backgroundColor = [UIColor clearColor]; 
     label.font = [UIFont fontWithName:@"ArialMT" size:13]; 

     if (i==selectedItem) { 
      label.textColor = [UIColor redColor]; 
     } 
     else { 
      label.textColor = [UIColor whiteColor]; 
     } 

     label.textAlignment = UITextAlignmentCenter; 
     label.tag = 23000+i; 

     [self.scrollView addSubview:label]; 

     offsetX+=scrollViewWidth; 

     i++; 
    } 

    self.scrollView.frame = CGRectMake((320-scrollViewWidth)/2, 0, scrollViewWidth, 36); 
    self.scrollView.clipsToBounds = NO;   
    self.scrollView.contentSize = CGSizeMake(MAX(scrollSize,offsetX), 36); 
    self.scrollView.contentOffset = CGPointMake(scrollViewWidth*selectedItem, 0); 
} 

現在捕獲的UIScrollView滾動事件，從委託：

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

    //get the index of the label we scrolled into! 
    int visiblePageIndex = round(scrollView.contentOffset.x/scrollView.bounds.size.width); 
    //set page number.. 
    if (selectedIndex!=visiblePageIndex) { 

     //get the label and set it to red 
     UILabel *label = (UILabel*)[self.scrollView viewWithTag:23000+visiblePageIndex]; 
     label.textColor = [UIColor redColor]; 

     //get the previous Label and set it back to White 
     UILabel *oldLabel = (UILabel*)[self.scrollView viewWithTag:23000+selectedIndex]; 
     oldLabel.textColor = [UIColor whiteColor]; 

     //set the new index to the index holder 
     selectedIndex = visiblePageIndex; 
    } 

} 

最後，我們需要的功能，捕捉標題點擊事件：

- (void)labelTapped:(UITapGestureRecognizer*)gestureRecognizer { 
    CGPoint pressPoint = [gestureRecognizer locationInView:gestureRecognizer.view]; 

    if (pressPoint.x>(self.scrollView.frame.size.width+self.view.frame.size.width)/2) { 
     //move to next page if one is available... 
     if (selectedIndex+1<maxIndex) { 
      float currentOffset = self.scrollView.contentOffset.x+self.scrollView.frame.size.width; 
      [self.scrollView setContentOffset:CGPointMake(currentOffset, 0) animated:YES]; 
     }   
    } 
    else if (pressPoint.x<(self.view.frame.size.width-self.scrollView.frame.size.width)/2) { 
     //move to previous page if one is available 
     if (selectedIndex>0) { 
      float currentOffset = self.scrollView.contentOffset.x-self.scrollView.frame.size.width; 
      [self.scrollView setContentOffset:CGPointMake(currentOffset, 0) animated:YES]; 
     } 
    } 
} 

這就是它！

Answer 2

在github上有類似的控件在https://github.com/rs/SDSegmentedControl。他們使用UISegmentedControl子類來創建效果。 Cocoacontrols.com是你的朋友。 :)