在标签栏 xcode 中创建展示案例视图

Posted 2023-03-13

【中文标题】在标签栏 xcode 中创建展示案例视图

【英文标题】：Create show Case view In Tabbar xcode

【发布时间】：2016-10-24 12:41:19

【问题描述】：

我正在尝试创建自己的自定义展示案例视图，其中我有左键、右键和标签栏视图。

我想用圆环突出显示按钮。 我可以通过子类 UIView 在我的按钮周围创建一个圆圈 但是我这样做是因为用户从左向右滑动它会将圆圈更改为右按钮并隐藏左按钮。 这是我的 UIView 的子类

//--------.h 类

#import <UIKit/UIKit.h>

@interface IntroView : UIView
- (void)drawRect:(CGRect)rect withBtnRect:(CGRect)btnrect ;

@end

//------。米类

#import "IntroView.h"

@implementation IntroView

- (id)initWithFrame:(CGRect)frame

    self = [super initWithFrame:frame];
    if (self) 
        // Initialization code
    


   self.backgroundColor=   [[UIColor blackColor] colorWithAlphaComponent:0.3];

     return self;




- (void)drawRect:(CGRect)rect  


   CGRect   maskRect= CGRectMake(5, 5, 100, 100);//set and pass this maskRect


    CGRect rBounds = self.bounds;
    CGContextRef context = UIGraphicsGetCurrentContext();

    // Fill background with 40% gray
    CGContextSetFillColorWithColor(context, [[[UIColor grayColor] colorWithAlphaComponent:0.4] CGColor]);
    CGContextFillRect(context, rBounds);

    // Draw the window 'frame'
    CGContextSetStrokeColorWithColor(context, [[UIColor whiteColor] CGColor]);
    CGContextSetLineWidth(context,2);
    CGContextStrokeEllipseInRect(context, maskRect);

    // make the window transparent
    CGContextSetBlendMode(context, kCGBlendModeClear);
    CGContextFillEllipseInRect (context, maskRect);

  




/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect

    // Drawing code

*/

@end

在我的标签栏第一个视图中我调用使用

#import "IntroView.h"

然后

- (void)viewDidLoad

    IntroView *vw_intro=[[IntroView alloc]initWithFrame:CGRectMake(0, 0, 320, 480)];
    vw_intro.tag=1000;     
     [self.view addSubview:vw_intro];
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

这是我的输出

从右到左滑动的预期输出，等等或反向（就像我们在 showcase android library 中所做的那样）

【参考方案1】：

在 IntroView.h 中

#import <UIKit/UIKit.h>

@interface IntroView : UIView
- (id)initWithFrame:(CGRect)frame introElements:(NSArray *)iElements;
- (void)showIntro;
@end

在 IntroView.m 中

#import "IntroView.h"

@implementation IntroView

    CAShapeLayer *mask;
    NSArray *introElements;
    NSUInteger currentIndex;


- (id)initWithFrame:(CGRect)frame introElements:(NSArray *)iElements

    self = [super initWithFrame:frame];
    if (self) 

        // Initialization code

        introElements = iElements;

        mask = [CAShapeLayer layer];
        [mask setFillColor:[[UIColor grayColor] colorWithAlphaComponent:0.8f].CGColor];
        [mask setFillRule:kCAFillRuleEvenOdd];
        [self.layer addSublayer:mask];

        UISwipeGestureRecognizer *swipeGestureRecognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(userDidSwipe)];
        swipeGestureRecognizer.direction = UISwipeGestureRecognizerDirectionRight;
        [self addGestureRecognizer:swipeGestureRecognizer];
    

    return self;


- (void)userDidSwipe

    [self showIntroAtIndex:currentIndex+1];


- (void)showIntro

    //Initial index by default
    [self showIntroAtIndex:0];


- (void)showIntroAtIndex:(NSUInteger)index

    currentIndex = index;

    CGRect rect = [[introElements objectAtIndex:index] CGRectValue];

    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRect:self.bounds];
    UIBezierPath *elementPath = [UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:3.0f];
    [maskPath appendPath:elementPath];

    // Animate
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"];
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    animation.duration = 0.3f;
    animation.fromValue = (__bridge id)(mask.path);
    animation.toValue = (__bridge id)(maskPath.CGPath);
    [mask addAnimation:animation forKey:@"path"];
    mask.path = maskPath.CGPath;

在视图控制器中

- (void)viewDidLoad 
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    NSArray *viewElements = [NSArray arrayWithObjects:[NSValue valueWithCGRect:button1.frame],[NSValue valueWithCGRect:button2.frame], nil];

    IntroView *introView = [[IntroView alloc]initWithFrame:self.view.bounds introElements:viewElements];
    [self.view addSubview:introView];
    [introView showIntro];

注意：我对 UIControl 框架做了一个高亮，如果你需要一个圆形高亮，更新 CGRect 中的更改。

【讨论】：

感谢一个漂亮而快速的回答，我会尽快将其转换为圈子并发布