ios - iOSライブラリまたはDIYEtsyのようなカテゴリコントロール？

Question

EtsyがiPhoneアプリに持っているスライディングカテゴリービューのライブラリまたはサンプルプロジェクトを見つけようとしています。

ここに画像の説明を入力してください

アプリのメインビューの上部にある「厳選、履歴、季節」カテゴリのスワイプ効果を再作成することについて話しています。

誰かがGithubで知っている人、またはこのようなことを行う方法のキックスタートを知っているなら、それは素晴らしいことです！

score 2 · Accepted Answer

TableView全体ではなくカテゴリのみが必要な場合は、サードパーティのコントロールは必要ありません。必要なのはUIScrollViewだけです。

アイデアは、ページングを有効にしてスクロールビューを作成し、コンテンツをクリップして画面の中央に配置しないように設定することです。ここで、scrollViewの左端を超えてもタッチをキャプチャできる必要があるため（ユーザーがすでにスクロールしている場合）、タッチをキャプチャするためのトリックが必要です。これは、全画面幅になり、scrollViewにインターセプトされた長いタッチを渡す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ヘッダーファイルにUIScrollViewiVarを作成します。

@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];
        }
    }
}

それでおしまい！

score 1 · Accepted Answer

https://github.com/rs/SDSegmentedControlのgithubにも同様のコントロールがあります。UISegmentedControlサブクラスを使用してエフェクトを作成します。Cocoacontrols.comはあなたの友達です。:)

ios - iOSライブラリまたはDIYEtsyのようなカテゴリコントロール？

2 に答える 2

Related

Reference