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

标签：ios工具视图开发   微信ios右侧弹出视图实现   微信工具栏实现   

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

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

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 {

    [super viewDidLoad];

//初始化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

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

标签：ios工具视图开发   微信ios右侧弹出视图实现   微信工具栏实现   

原文地址：http://blog.csdn.net/yangbingbinga/article/details/47088893