Implementation of IOS development imitating wechat right pop-up view

Time:2021-5-2

Implementation of IOS development imitating wechat right pop-up view

The + number of wechat home page will pop up a more view after clicking. How can this view be realized?

To achieve this effect, the following technical points may be required:

1. Image stretching, by stretching a small area in the middle of the image to keep the shape on the edge of the image

2. Affine transformation, using affine transformation of zoom, pan and merge, view animation

3. Style setting of NavigationBar

The results are as follows:

This demo image comes from the image extracted from wechat installation package

Implementation code:

// 
// ViewController.m 
//Appxx - wechat more toolbar 
// 
// Created by MRBean on 15/7/27. 
//Copyright (c) 2015 Yangbin. All rights reserved 
// 
 
#import "ViewController.h" 
#define kScreenWidth self.view.bounds.size.width 
@interface ViewController () 
@property(strong,nonatomic)UIImageView *imageView; 
@end 


@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];
  
//Initialize ImageView 
  UIImage *image = [UIImage imageNamed:@"More"]; 
  NSLog(@"%f ,%f",image.size.width,image.size.height); 
  UIImage *stretchImage = [image resizableImageWithCapI nsets:UIEdgeInsetsMake (31, 36, 30, 33)];// Stretch picture 
  _imageView = [[UIImageView alloc]init]; 
  _imageView.frame = CGRectMake(kScreenWidth-100, 64, 100, 150); 
  _imageView.image = stretchImage; 
//Affine transformation, matrix transformation 
 CGAffineTransform smaller = CGAffineTransformMakeScale(0.01, 0.01);// Scaling 
 CGAffineTransform rightUpMove = CGAffineTransformMakeTranslation(_ imageView.frame.size.width/2, -_ imageView.frame.size.height/2);// translation 
 CGAffineTransform cat = CGAffineTransformConcat(smaller, rightUpMove);// Merging two matrix transformations 
 _ imageView.transform = cat;// Settings_ Affine transformation of ImageView 
_ imageView.alpha = 0;// transparency 
[self.view addSubview:_imageView]; 
_imageView.hidden = YES; 
self.navigationController.navigationBar.barStyle = UIBarStyleBlack;// Style the NavigationBar 
self.navigationController.navigationBar.tintColor = [UIColor whiteColor];// Set the navigation bar font or the color of the cutout 

}
//Click the button on the right
- (IBAction)tapAdd:(UIBarButtonItem *)sender 
{ 
  if (_imageView.hidden) 
  { 
    CGAffineTransform larger = CGAffineTransformMakeScale(1, 1);// enlarge 
    _ imageView.hidden = NO;// Display view 
    [UIView animateWithDuration:0.2 animations:^{ 
      _imageView.transform = larger; 
      _imageView.alpha = 1; 
       
    }]; 
  } 
  else 
  { 
    CGAffineTransform smaller = CGAffineTransformMakeScale(0.01, 0.01);// narrow 
    CGAffineTransform rightUpMove = CGAffineTransformMakeTranslation(_ imageView.frame.size.width/2, -_ imageView.frame.size.height/2);// move 
    CGAffineTransform cat = CGAffineTransformConcat(smaller, rightUpMove);// Merge transform 
    [UIView animateWithDuration:0.2 animations:^{ 
      _imageView.transform = cat; 
      } completion:^(BOOL finished) { 
      _imageView.hidden = YES; 
      _imageView.alpha = 0; 
       
    }]; 
  } 
 } 

- (void)didReceiveMemoryWarning { 
  [super didReceiveMemoryWarning]; 
  // Dispose of any resources that can be recreated. 
} 
@end

If you have any questions, please leave a message or go to our community to exchange and discuss, thank you for reading, hope to help you, thank you for your support!