ios - iOS 库或 DIY Etsy 之类的类别控制？

Question

我正在尝试为 Etsy 在其 iPhone 应用程序中的滑动类别视图找到一个库或示例项目。

我说的是在应用程序的主视图顶部重新创建“精选、历史和季节性”类别滑动效果。

如果有人知道 Github 上的一个，或者可能知道如何做这样的事情，那就太棒了！

Answer 1

如果您只想要类别而不是整个 TableView，那么您不需要 3rd 方控件。你只需要一个 UIScrollView。

这个想法是您创建一个启用分页的滚动视图，并将其设置为不剪辑内容并将其置于屏幕中心。现在因为我们需要能够捕获超出滚动视图左边缘的触摸（当用户已经滚动时），所以我们需要一个技巧来捕获触摸。这是通过使用一个全屏宽度的 UIView 来完成的，它会将截获的触摸传递给我们的滚动视图。

有了这个设置，下面是代码：首先是捕获触摸的视图（我将其命名为 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 iVar：

@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 传递）初始化您的 ScrollView

- (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

在https://github.com/rs/SDSegmentedControl的 github 上有一个类似的控件。他们使用 UISegmentedControl 子类来创建效果。Cocoacontrols.com 是您的朋友。:)