成長するiOSボタンを作成するにはどうすればよいですか？

Question

私の友人は私にiOSボタンの次のデザインを教えてくれました。これを実装する最良の方法はわかりません。

再利用可能なボタンをObjective-Cで作成する必要があります。

私が試した：

• がボタンをサブクラスが、私shouldn't do that
• は（サブクラス化中）の境界線をアニメーションが、国境だけ内側に行くことを読んで、私がする必要があるようにそれはそうフレームをアニメーション化する

これはどうやってアプローチしますか？私はボタン（構図）だけでなく、内側と外側の円のビューを持つCustomButtonViewクラスを作ると仮定していますか？どのように私はそれを成長させるためにアニメーション化するでしょうか？フレームの変更をアニメーション化する必要がありますか、またはインセットを使用できますか？

このコードを作成する最も簡単なコードは何ですか？ありがとう！ここで

Answer 1

私はこの作成にかかったアプローチです：のために...

使用UITapGestureRecognizerまたはtouchesBegan、touchesEndedをカスタムボタンを作成する

1. サブクラスUIViewのは、あなたの交流
2. 2つを追加CALayerあなたの前景色と背景層のための年代

3. があなたのアイコン層を追加（これはUIImageViewや画像を表示する他の方法することができます）

   - (id)initWithIcon:(UIImage *)icon backgroundColor:(UIColor *)backgroundColor foregroundColor:(UIColor *)foregroundColor { 
   
       if (self = [super init]) { 
        // Background Layer Setup 
        _backgroundLayer = [CALayer new]; 
        [_backgroundLayer setBackgroundColor:backgroundColor.CGColor]; 
        [self.layer addSublayer:_backgroundLayer]; 
   
        // Foreground Layer Setup 
        _foregroundLayer = [CALayer new]; 
        [_foregroundLayer setBackgroundColor:foregroundColor.CGColor]; 
        [self.layer addSublayer:_foregroundLayer]; 
   
        // Icon Setup 
        _icon = [[UIImageView alloc] initWithImage:icon]; 
        [_icon setContentMode:UIViewContentModeCenter]; 
        [self addSubview:_icon]; 
   
        UIGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(buttonTapped:)]; 
        [self addGestureRecognizer:tapGesture]; 
       } 
       return self; 
   } 
   
   - (void)setFrame:(CGRect)frame { 
   
       // Make sure super is called 
       [super setFrame:frame]; 
   
       // Build the layout of backgroundLayer 
       [self.backgroundLayer setFrame:CGRectMake(frame.size.width*0.1, frame.size.width*0.1, frame.size.width*0.8, frame.size.width*0.8)]; 
       [self.backgroundLayer setCornerRadius:frame.size.width*0.8/2]; 
   
       // Build the layout of forgroundLayer 
       [self.foregroundLayer setFrame:CGRectMake(frame.size.width*0.05, frame.size.width*0.05, frame.size.width*0.9, frame.size.width*0.9)]; 
       [self.foregroundLayer setCornerRadius:frame.size.width*0.9/2]; 
   
       // Build the frame of your icon 
       [self.icon setFrame:CGRectMake(0, 0, frame.size.width, frame.size.width)]; 
   } 
   
   - (void)buttonTapped:(UIGestureRecognizer*)gesture { 
   
       // Animate the foreground getting smaller 
       CABasicAnimation *foregroundFrameChange = [CABasicAnimation animationWithKeyPath:@"frame"]; 
       foregroundFrameChange.fromValue = [NSValue valueWithCGRect:_foregroundLayer.frame]; 
       foregroundFrameChange.toValue = [NSValue valueWithCGRect:CGRectMake(self.frame.size.width*0.1,self.frame.size.width*0.1, self.frame.size.width*0.8, self.frame.size.width*0.8)]; 
       self.foregroundLayer.frame = CGRectMake(self.frame.size.width*0.1,self.frame.size.width*0.1, self.frame.size.width*0.8, self.frame.size.width*0.8); 
   
       // Animate the forground cornerRadius to stay rounded 
       CABasicAnimation *foregroundRadiusChange = [CABasicAnimation animationWithKeyPath:@"cornerRadius"]; 
       foregroundRadiusChange.fromValue = [NSNumber numberWithDouble:self.foregroundLayer.cornerRadius]; 
       foregroundRadiusChange.toValue = [NSNumber numberWithDouble:self.frame.size.width*0.8/2]; 
       [self.foregroundLayer setCornerRadius:self.frame.size.width*0.8/2]; 
   
       // Animate the background getting larger 
       CABasicAnimation *backgroundFrameChange = [CABasicAnimation animationWithKeyPath:@"frame"]; 
       backgroundFrameChange.fromValue = [NSValue valueWithCGRect:self.backgroundLayer.frame]; 
       backgroundFrameChange.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.width)]; 
       self.backgroundLayer.frame = CGRectMake(0, 0, self.frame.size.width, self.frame.size.width); 
   
       // Animate the background cornerRadius to stay rounded 
       CABasicAnimation *backgroundRadiusChange = [CABasicAnimation animationWithKeyPath:@"cornerRadius"]; 
       backgroundRadiusChange.fromValue = [NSNumber numberWithDouble:self.backgroundLayer.cornerRadius]; 
       backgroundRadiusChange.toValue = [NSNumber numberWithDouble:self.frame.size.width/2]; 
       [self.backgroundLayer setCornerRadius:self.frame.size.width/2]; 
   
       // Group all the animations to run simultaneously 
       CAAnimationGroup *allAnimations = [CAAnimationGroup animation]; 
       allAnimations.duration = 2; 
       allAnimations.animations = @[foregroundFrameChange, foregroundRadiusChange, backgroundFrameChange, backgroundRadiusChange]; 
       allAnimations.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; 
       [self.layer addAnimation:allAnimations forKey:@"animate"]; 
   
       // Create your button action callback here 
   } 
   

   これは、迅速なモックアップではなく、完全なソリューションでしたそれはあなたに遊ぶものを与えるでしょう。