在Tabbar xcode中创建show Case视图

时间:2016-10-24 12:41:19

标签: ios objective-c xcode uiview

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

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

// --------。h class

#import <UIKit/UIKit.h>

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

@end

// ------。 m班

#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.
}

这是我的输出

enter image description here

预期输出从右向左滑动,反之亦然(如我们在showcase android library中所做的那样)

enter image description here

1 个答案:

答案 0 :(得分:1)

在IntroView.h中

PROC SQL

在IntroView.m

#import <UIKit/UIKit.h>

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

在ViewController中

#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;
}

注意:我对UIControl帧进行了突出显示,如果需要圆形突出显示,请更新CGRect中的更改。