How to highlight a UIView, like Apple does

Question

When the user touches UIButton, it is a little colored. What does an apple do to get this effect? I need the same effect on my custom UIButton when it is highlighted.

-(void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context{
    AppDelegate* appDelegate=(AppDelegate*)[UIApplication sharedApplication].delegate;
    if ([keyPath isEqualToString:@"highlighted"]){
        UIButton *button = object;
        if (button.isHighlighted) {
            self.backgroundColor=[UIColor colorWithRed:36.0/255.0 green:153.0/255.0 blue:116.0/255.0 alpha:1];
        }else{
            self.backgroundColor=appDelegate.currentAppColor;
        }
    }
}

Im using this code, but changing the background color does not affect any subheadings. I need them to be gray too.

Answer 1

I do not think there is a simple or definitive answer to this.

DISCLAIMER: All of the code in this answer was written above, so please excuse the errors.

I would suggest doing something like this:

1: , ...

-(void)buttonTouched{

    for(UIView *subview in self.subviews){

        subview.alpha = 0.5;

    }

}

2 ( ): , - (: , , ):

-(void)buttonTouched{

    for(UIView *subview in self.subviews){

        if([subview respondsToSelector:@selector(setBackgroundColor:)]){ 
            //for generic views - changes UILabel backgroundColor too, though
            subview.backgroundColor = [UIColor grayColor];
        }

        if([subview respondsToSelector:@selector(setTextColor:)]){ 
            //reverse effect of upper if statement(if needed)
            subview.backgroundColor = [UIColor clearColor];
            subview.textColor = [UIColor grayColor];
        }

    }

}

, , , . , . touchesEnded:. , ...

3: ( )

-(void)buttonTouched{

    UIView *overlay = [[UIView alloc]initWithFrame:self.bounds];
    overlay.backgroundColor = [[UIColor grayColor]colorWithAlphaComponent:0.5];
    [self addSubview: overlay];

}

, , , .

4. - , , .

Apple, , . , -.

, .

Answer 2

, . - , , .

https://github.com/mta452/UIView-TouchHighlighting

:

viewDidLoad.

buttonView.touchHighlightingStyle = MTHighlightingStyleHollowDarkOverlay;

:

Answer 3

Swift 3:

touchesBegan touchesEnded UIView

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    self.layer.backgroundColor = UIColor.white.cgColor
}

override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
    self.layer.backgroundColor = UIColor.gray.cgColor
}

CardView, , https://github.com/aclissold/CardView

@IBDesignable
class CardView: UIView {

    @IBInspectable var cornerRadius: CGFloat = 5

    @IBInspectable var shadowOffsetWidth: Int = 0
    @IBInspectable var shadowOffsetHeight: Int = 1
    @IBInspectable var shadowColor: UIColor? = UIColor.black
    @IBInspectable var shadowOpacity: Float = 0.23

    override func layoutSubviews() {
        layer.cornerRadius = cornerRadius
        let shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius)

        layer.masksToBounds = false
        layer.shadowColor = shadowColor?.cgColor
        layer.shadowOffset = CGSize(width: shadowOffsetWidth, height: shadowOffsetHeight);
        layer.shadowOpacity = shadowOpacity
        layer.shadowPath = shadowPath.cgPath
    }

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        layer.shadowOffset = CGSize(width: shadowOffsetWidth, height: shadowOffsetHeight * 2);

    }

    override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
        layer.shadowOffset = CGSize(width: shadowOffsetWidth, height: 

    shadowOffsetHeight);
        }

    }

:

touchesCancelled UIView .

 override func touchesCancelled(_ touches: Set<UITouch>, with event: UIEvent?) {
        layer.shadowOffset = CGSize(width: shadowOffsetWidth, height: shadowOffsetHeight);
    } 

Answer 4

maskView=[[UIView alloc]initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height)];
maskView.backgroundColor=[[UIColor blackColor]colorWithAlphaComponent:0.5];

-(void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context{
        if ([keyPath isEqualToString:@"highlighted"]){
            UIButton *button = object;
            if (button.isHighlighted) {
                [self addSubview:maskView];
            }else{
                [maskView removeFromSuperview];
            }
        }
    }

Answer 5

:

1. , .

2. : Touch Down, Touch Up Touch Up

3. Touch Down Highlight State, Normal vale.

IBAction, , .

():

- (void)viewDidLoad {
    [super viewDidLoad];

    firstView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 300, 300)];
    firstView.backgroundColor = [UIColor blueColor];

    firstBtn = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 300, 300)];
    [firstBtn addTarget:self action:@selector(touchDownCollection) forControlEvents:UIControlEventTouchDown];
    [firstBtn addTarget:self action:@selector(touchUpInSideCollection) forControlEvents:UIControlEventTouchUpInside];
    [firstBtn addTarget:self action:@selector(touchUpOutSideCollection) forControlEvents:UIControlEventTouchUpOutside];

    [self.view addSubview:firstView];
    [self.view addSubview:firstBtn];

    //Need add: firstView.userInteractionEnabled = NO; if
    //[self.view addSubview:firstBtn];
    //[self.view addSubview:firstView];
}

- (void)touchDownCollection {
    // Highlight state value: alpha, background...
    firstView.alpha = 0.5;
}

- (void)touchUpInSideCollection {
    // Normal state value.
    firstView.alpha = 1.0;
}

- (void)touchUpOutSideCollection {
    // Normal state value.
    firstView.alpha = 1.0;
}

Answer 6

, , :

class HighlightView: UIView {

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        DispatchQueue.main.async {
            self.alpha = 1.0
            UIView.animate(withDuration: 0.4, delay: 0.0, options: .curveLinear, animations: {
                self.alpha = 0.5
            }, completion: nil)
        }
    }

    override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
        DispatchQueue.main.async {
            self.alpha = 0.5
            UIView.animate(withDuration: 0.4, delay: 0.0, options: .curveLinear, animations: {
                self.alpha = 1.0
            }, completion: nil)
        }
    }

    override func touchesCancelled(_ touches: Set<UITouch>, with event: UIEvent?) {
        DispatchQueue.main.async {
            self.alpha = 0.5
            UIView.animate(withDuration: 0.4, delay: 0.0, options: .curveLinear, animations: {
                self.alpha = 1.0
            }, completion: nil)
        }
    }
}

Then you can use it instead UIView, and whenever you click on it, it changes the value alpha, so it will look like a highlight.

Answer 7

• Create a binding gesture for your UIView

  UITapGestureRecognizer* buttonViewTapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(categoryButtonAction:)];
  

• Now add the definition below to your code. There will be some kind of similar effect to the view.

  -(void)touchGestureAction:(UIGestureRecognizer*)gesture
  {
      UIView * sender =  gesture.view;
  
      UIColor *color = sender.backgroundColor;
      sender.backgroundColor = [UIColor whiteColor];
      sender.alpha = 0.7;
  
      dispatch_time_t popTime = dispatch_time(DISPATCH_TIME_NOW, 0.1 * NSEC_PER_SEC);
  //  This will create flash effect
      dispatch_after(popTime, dispatch_get_main_queue(), ^(void){
          sender.backgroundColor = color;
          sender.alpha = 1.0;
      });
  }
  

This will create some effect, similar to the effect of clicking a button.