iOS开发-微信右侧弹出视图实现

来源：互联网发布：java filereader 指针编辑：程序博客网时间：2024/06/07 02:25

微信首页的+号,点击之后会弹出一个更多的视图,这个视图如何实现呢?

实现该效果可能需要以下技术要点:

1.图片拉伸,通过拉伸图片的中间的较小区域来保持图片的边上的形状

2.仿射变换,用到仿射变换的缩放,平移和合并,视图动画

3.navigationBar的样式设置

实现效果,如下:

本Demo图片来源微信安装包解压得到的图片

实现代码:

////  ViewController.m//  appXX-微信更多工具栏////  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 {

[superviewDidLoad];

//初始化ImageView    UIImage *image = [UIImage imageNamed:@"More"];    NSLog(@"%f ,%f",image.size.width,image.size.height);    UIImage *stretchImage = [image resizableImageWithCapInsets:UIEdgeInsetsMake(31, 36, 30, 33)];//拉伸图片    _imageView = [[UIImageView alloc]init];    _imageView.frame = CGRectMake(kScreenWidth-100, 64, 100, 150);    _imageView.image = stretchImage;

   //仿射变换,矩阵变换    CGAffineTransform smaller = CGAffineTransformMakeScale(0.01, 0.01);//比例缩放    CGAffineTransform rightUpMove = CGAffineTransformMakeTranslation(_imageView.frame.size.width/2, -_imageView.frame.size.height/2);//平移    CGAffineTransform cat = CGAffineTransformConcat(smaller, rightUpMove);//合并两个矩阵变换    _imageView.transform = cat;//设置_imageView的仿射变换

    _imageView.alpha = 0;//透明度    [self.view addSubview:_imageView];    _imageView.hidden = YES;

    self.navigationController.navigationBar.barStyle = UIBarStyleBlack;//设置navigationBar的样式    self.navigationController.navigationBar.tintColor = [UIColor whiteColor];//设置navigationBar字体或者镂空图的颜色

}

//点击右侧的按钮

- (IBAction)tapAdd:(UIBarButtonItem *)sender{    if (_imageView.hidden)    {        CGAffineTransform larger = CGAffineTransformMakeScale(1, 1);//放大        _imageView.hidden = NO;//显示视图        [UIView animateWithDuration:0.2 animations:^{            _imageView.transform = larger;            _imageView.alpha = 1;                    }];    }    else    {        CGAffineTransform smaller = CGAffineTransformMakeScale(0.01, 0.01);//缩小        CGAffineTransform rightUpMove = CGAffineTransformMakeTranslation(_imageView.frame.size.width/2, -_imageView.frame.size.height/2);//移动        CGAffineTransform cat = CGAffineTransformConcat(smaller, rightUpMove);//合并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

更多文章:http://blog.csdn.net/yangbingbinga

0 0