iOS开发中视图的下拉放大和上拉模糊的效果实现

把"秘密"的Cell效果整体视图都放到scrollView中,基本是和secret app 一模一样的效果了.
代码如下:(模糊效果的类就不写了,大家可以搜"UIImage+ImageEffects",还要导入Accelerate.framework)
1.MTSecretAppEffect.h

复制代码 代码如下:

#import <Foundation/Foundation.h> 
 
@interface MTSecretAppEffect : NSObject 
 
/**
 *  创建整体的scrollView,把headScrollView和tableView全部加载在上面,靠它来上下滑动,其余的滑动全部禁止
 *
 *  @return mainScrollView
 */ 
- (UIScrollView *)createMainScrollView; 
 
/**
 *  创建headScrollView
 *
 *  @return headScrollView
 */ 
- (UIScrollView *)createHeadScrollView; 
 
/**
 *  创建头部的模糊view
 *
 *  @param scrollview headScrollView
 *
 *  @return blurImageView
 */ 
- (UIImageView *)createBlurImageViewOfView:(UIScrollView *)scrollview; 
 
/**
 *  在- (void)scrollViewDidScroll:(UIScrollView *)scrollView 中调用的方法
 *
 *  @param scrollView
 *  @param mainScrollView
 *  @param tableView
 *  @param headScrollView
 *  @param blurImageView
 */ 
- (void)scrollDidScrollView:(UIScrollView *)scrollView withMainScrollView:(UIScrollView *)mainScrollView withTableView:(UITableView *)tableView withHeadScrollView:(UIScrollView *)headScrollView withBlurImageView:(UIImageView *)blurImageView; 
@end

2.MTSecretAppEffect.m

复制代码 代码如下:

#import "MTSecretAppEffect.h" 
#import "UIImage+ImageEffects.h" 
#import <QuartzCore/QuartzCore.h> 
 
#define HEADER_HEIGHT 200.0f 
#define HEADER_INIT_FRAME CGRectMake(0, 0, 320, HEADER_HEIGHT) 
 
const CGFloat kBarHeight = 50.0f; 
const CGFloat kBackgroundParallexFactor = 0.5f; 
const CGFloat kBlurFadeInFactor = 0.015f; 
 
 
@implementation MTSecretAppEffect 
 
// 欠缺:调用者设置代理 
- (UIScrollView *)createMainScrollView{ 
 
    // 和Self.view同大小的底部ScrollView 
    UIScrollView *mainScrollView = [[UIScrollView alloc] initWithFrame:[UIApplication sharedApplication].keyWindow.frame]; 
    mainScrollView.bounces = YES; 
    mainScrollView.alwaysBounceVertical = YES; 
    mainScrollView.contentSize = CGSizeZero; 
    mainScrollView.showsVerticalScrollIndicator = YES; 
    mainScrollView.scrollIndicatorInsets = UIEdgeInsetsMake(50.0f, 0, 0, 0); 
 
    return mainScrollView; 
     

 
- (UIScrollView *)createHeadScrollView{ 
 
    UIScrollView *headScrollView = [[UIScrollView alloc] initWithFrame:HEADER_INIT_FRAME]; 
    headScrollView.scrollEnabled = NO; 
    headScrollView.contentSize = CGSizeMake(320, 1000); 
     
    return headScrollView; 

 
- (UIImageView *)createBlurImageViewOfView:(UIScrollView *)scrollview{ 
 
    UIGraphicsBeginImageContextWithOptions(scrollview.bounds.size, scrollview.opaque, 0.0); 
    [scrollview.layer renderInContext:UIGraphicsGetCurrentContext()]; 
    UIImage *img = UIGraphicsGetImageFromCurrentImageContext(); 
    UIGraphicsEndImageContext(); 
    UIImageView *blurImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, HEADER_HEIGHT)]; 
    blurImageView.image = [img applyBlurWithRadius:12 tintColor:[UIColor colorWithWhite:0.8 alpha:0.4] saturationDeltaFactor:1.8 maskImage:nil]; 
    blurImageView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight; 
    blurImageView.alpha = 0; 
    blurImageView.backgroundColor = [UIColor clearColor]; 
     
    return blurImageView; 

 
- (void)scrollDidScrollView:(UIScrollView *)scrollView withMainScrollView:(UIScrollView *)mainScrollView withTableView:(UITableView *)tableView withHeadScrollView:(UIScrollView *)headScrollView withBlurImageView:(UIImageView *)blurImageView{ 
     
    CGFloat y = 0.0f; 
    CGRect rect = HEADER_INIT_FRAME;  
    if (scrollView.contentOffset.y < 0.0f) { 
        // 下拉变大效果 
        y = fabs(MIN(0.0f, mainScrollView.contentOffset.y)); 
        headScrollView.frame = CGRectMake(CGRectGetMinX(rect) - y / 2.0f, CGRectGetMinY(rect) - y, CGRectGetWidth(rect) + y, CGRectGetHeight(rect) + y); 
         
    } 
    else { 
         
        y = mainScrollView.contentOffset.y; 
        blurImageView.alpha = MIN(1 , y * kBlurFadeInFactor); 
        CGFloat backgroundScrollViewLimit = headScrollView.frame.size.height - kBarHeight; 
         
        if (y > backgroundScrollViewLimit) { 
            headScrollView.frame = (CGRect) {.origin = {0, y - headScrollView.frame.size.height + kBarHeight}, .size = {320, HEADER_HEIGHT}}; 
            tableView.frame = (CGRect){.origin = {0, CGRectGetMinY(headScrollView.frame) + CGRectGetHeight(headScrollView.frame)}, .size = tableView.frame.size }; 
            tableView.contentOffset = CGPointMake (0, y - backgroundScrollViewLimit); 
            CGFloat contentOffsetY = -backgroundScrollViewLimit * kBackgroundParallexFactor; 
            [headScrollView setContentOffset:(CGPoint){0,contentOffsetY} animated:NO]; 
        } 
        else { 
            headScrollView.frame = rect; 
            tableView.frame = (CGRect){.origin = {0, CGRectGetMinY(rect) + CGRectGetHeight(rect)}, .size = tableView.frame.size }; 
            [tableView setContentOffset:(CGPoint){0,0} animated:NO]; 
            [headScrollView setContentOffset:CGPointMake(0, -y * kBackgroundParallexFactor)animated:NO]; 
        } 
    } 
 

 
@end

3.main.m

复制代码 代码如下:

#import "RootViewController.h" 
#import "CommentCell.h" 
#import "MTSecretAppEffect.h" 
 
#define HEADER_HEIGHT 200.0f 
 
@interface RootViewController () <UIScrollViewDelegate, UITableViewDataSource, UITableViewDelegate> 
 
@property (nonatomic,strong) MTSecretAppEffect *secretEffect;     // secretApp 效果对象 
@property (nonatomic,strong) UIScrollView *mainScrollView;        // 与view相同大小的scrollView 
@property (nonatomic,strong) UIScrollView *headScrollView;        // 
@property (nonatomic,strong) UIImageView  *blurImageView;         // 
@property (nonatomic,strong) UITableView *tableView;              // 
 
@end 
 
@implementation RootViewController 
 
- (void)viewDidLoad 

    [super viewDidLoad]; 
     
     
    // 0.创建SecretApp effect 效果对象 
    self.secretEffect = [[MTSecretAppEffect alloc] init]; 
    // 1.主底部scrollView 
    self.mainScrollView = [self.secretEffect createMainScrollView]; 
    self.mainScrollView.delegate = self; 
    self.view = self.mainScrollView; 
    // 2.head背景View 
    self.headScrollView = [self.secretEffect createHeadScrollView]; 
    // 3.背景图片视图 
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, HEADER_HEIGHT)]; 
    imageView.image = [UIImage imageNamed:@"secret.png"]; 
    imageView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight; 
    [self.headScrollView  addSubview:imageView]; 
    // 4.模糊视图 
    _blurImageView = [self.secretEffect createBlurImageViewOfView:self.headScrollView]; 
    [self.headScrollView addSubview:_blurImageView]; 
    // 5.tableView 
    self.tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, HEADER_HEIGHT, CGRectGetWidth(self.view.frame), CGRectGetHeight(self.view.frame) - 50 ) style:UITableViewStylePlain]; 
    self.tableView.scrollEnabled = NO; 
    self.tableView.delegate = self; 
    self.tableView.dataSource = self; 
    self.tableView.tableFooterView = [[UIView alloc] initWithFrame:CGRectZero]; 
    self.tableView.separatorColor = [UIColor clearColor]; 
    // 6.添加视图 
    [self.view addSubview:self.headScrollView]; 
    [self.view addSubview:self.tableView]; 
    // 7.设置一下 
    self.mainScrollView.contentSize = CGSizeMake(320, self.tableView.contentSize.height + CGRectGetHeight(self.headScrollView.frame)); 
 

 
- (void)scrollViewDidScroll:(UIScrollView *)scrollView { 
     
    // 8.调用方法 
    [self.secretEffect scrollDidScrollView:scrollView withMainScrollView:self.mainScrollView withTableView:self.tableView withHeadScrollView:self.headScrollView withBlurImageView:self.blurImageView]; 

 
 
#pragma mark - 隐藏状态栏 
- (BOOL)prefersStatusBarHidden { 
    return YES; 

 
 
#pragma mark - UITableView dataSource 
 
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { 
    return 1; 

 
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { 
    return 20; 

 
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { 
     
    return 40; 

 
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { 
     
    CommentCell *cell = [tableView dequeueReusableCellWithIdentifier:[NSString stringWithFormat:@"Cell %ld", indexPath.row]]; 
    if (!cell) { 
        cell = [[CommentCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:[NSString stringWithFormat:@"Cell %ld", indexPath.row]]; 
    } 
    cell.textLabel.text = [NSString stringWithFormat:@"section = %ld row = %ld",indexPath.section,indexPath.row]; 
 
    return cell; 

 
- (void)didReceiveMemoryWarning 

    [super didReceiveMemoryWarning]; 
    // Dispose of any resources that can be recreated. 

 
@end

效果图:
PPPPPPPPPPPPPPPPPPPPPP1
它主要效果:下拉头部视图放大,上拉视图模糊而且到一定位置固定不动,其他Cell可以继续上移.
封装的主要效果类:MTHeadEffect.m(.h文件省略,很简单的)

复制代码 代码如下:

#import "MTHeadEffect.h" 
#import <QuartzCore/QuartzCore.h> 
#import <Accelerate/Accelerate.h> 
 
// 屏幕的物理宽度 
#define ScreenWidth  [UIScreen mainScreen].bounds.size.width 
#define HeadViewH  40 
 
CGFloat const kImageOriginHight = 200.f; 
 
@implementation MTHeadEffect 
 
+ (void)viewDidScroll:(UIScrollView *)tableView withHeadView:(UIImageView *)headView withBlur:(CGFloat)blur{ 
 
    NSLog(@"y = %f",tableView.contentOffset.y); 
    if (tableView.contentOffset.y > kImageOriginHight - HeadViewH) { 
         
        headView.frame = CGRectMake(0, -(kImageOriginHight - HeadViewH), ScreenWidth, kImageOriginHight); 
        [[UIApplication sharedApplication].keyWindow addSubview:headView]; 
         
    }else if ((tableView.contentOffset.y < kImageOriginHight - HeadViewH) && tableView.contentOffset.y > 0){ 
         
        blur = (tableView.contentOffset.y) / 500.0 + 0.45; 
        headView.image = [[UIImage imageNamed:@"2"] boxblurImageWithBlur:blur]; 
        headView.frame = CGRectMake(0, 0, ScreenWidth, kImageOriginHight); 
        [tableView addSubview:headView]; 
         
    }else if (tableView.contentOffset.y <= 0){ 
         
        // 放大效果---x,y坐标的增量和宽度,高度的增量保持一致 
        CGFloat offset  = -tableView.contentOffset.y; 
        headView.frame = CGRectMake(-offset,-offset, ScreenWidth+ offset * 2, kImageOriginHight + offset); 
        headView.image = [[UIImage imageNamed:@"2"] boxblurImageWithBlur:0.01]; 
    } 
     

 
@end 
 
@implementation UIImage (BlurEffect) 
 
// 为高斯模糊效果封装的一个类目 
-(UIImage *)boxblurImageWithBlur:(CGFloat)blur { 
     
    NSData *imageData = UIImageJPEGRepresentation(self, 1); // convert to jpeg 
    UIImage* destImage = [UIImage imageWithData:imageData]; 
     
     
    if (blur < 0.f || blur > 1.f) { 
        blur = 0.5f; 
    } 
    int boxSize = (int)(blur * 40); 
    boxSize = boxSize - (boxSize % 2) + 1; 
     
    CGImageRef img = destImage.CGImage; 
     
    vImage_Buffer inBuffer, outBuffer; 
     
    vImage_Error error; 
     
    voidvoid *pixelBuffer; 
     
     
    //create vImage_Buffer with data from CGImageRef 
     
    CGDataProviderRef inProvider = CGImageGetDataProvider(img); 
    CFDataRef inBitmapData = CGDataProviderCopyData(inProvider); 
     
     
    inBuffer.width = CGImageGetWidth(img); 
    inBuffer.height = CGImageGetHeight(img); 
    inBuffer.rowBytes = CGImageGetBytesPerRow(img); 
     
    inBuffer.data = (void*)CFDataGetBytePtr(inBitmapData); 
     
    //create vImage_Buffer for output 
     
    pixelBuffer = malloc(CGImageGetBytesPerRow(img) * CGImageGetHeight(img)); 
     
    if(pixelBuffer == NULL) 
        NSLog(@"No pixelbuffer"); 
     
    outBuffer.data = pixelBuffer; 
    outBuffer.width = CGImageGetWidth(img); 
    outBuffer.height = CGImageGetHeight(img); 
    outBuffer.rowBytes = CGImageGetBytesPerRow(img); 
     
    // Create a third buffer for intermediate processing 
    voidvoid *pixelBuffer2 = malloc(CGImageGetBytesPerRow(img) * CGImageGetHeight(img)); 
    vImage_Buffer outBuffer2; 
    outBuffer2.data = pixelBuffer2; 
    outBuffer2.width = CGImageGetWidth(img); 
    outBuffer2.height = CGImageGetHeight(img); 
    outBuffer2.rowBytes = CGImageGetBytesPerRow(img); 
     
    //perform convolution 
    error = vImageBoxConvolve_ARGB8888(&inBuffer, &outBuffer2, NULL, 0, 0, boxSize, boxSize, NULL, kvImageEdgeExtend); 
    if (error) { 
        NSLog(@"error from convolution %ld", error); 
    } 
    error = vImageBoxConvolve_ARGB8888(&outBuffer2, &inBuffer, NULL, 0, 0, boxSize, boxSize, NULL, kvImageEdgeExtend); 
    if (error) { 
        NSLog(@"error from convolution %ld", error); 
    } 
    error = vImageBoxConvolve_ARGB8888(&inBuffer, &outBuffer, NULL, 0, 0, boxSize, boxSize, NULL, kvImageEdgeExtend); 
    if (error) { 
        NSLog(@"error from convolution %ld", error); 
    } 
     
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB(); 
    CGContextRef ctx = CGBitmapContextCreate(outBuffer.data, 
                                             outBuffer.width, 
                                             outBuffer.height, 
                                             8, 
                                             outBuffer.rowBytes, 
                                             colorSpace, 
                                             (CGBitmapInfo)kCGImageAlphaNoneSkipLast); 
    CGImageRef imageRef = CGBitmapContextCreateImage (ctx); 
    UIImage *returnImage = [UIImage imageWithCGImage:imageRef]; 
     
    //clean up 
    CGContextRelease(ctx); 
    CGColorSpaceRelease(colorSpace); 
     
    free(pixelBuffer); 
    free(pixelBuffer2); 
    CFRelease(inBitmapData); 
     
    CGImageRelease(imageRef); 
     
    return returnImage; 

 
 
@end

@main.m

复制代码 代码如下:

- (void)viewDidLoad 

    [super viewDidLoad]; 
    // Do any additional setup after loading the view. 
    // tableView 
    self.testTableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, 320, 568) style:UITableViewStylePlain]; 
    self.testTableView.delegate = self; 
    self.testTableView.dataSource = self; 
    [self.view addSubview:_testTableView]; 
     
    /**
     *  隐藏状态栏效果
     *  1.系统提供了2种动画,一种是偏移,一种是渐隐
     *  2.在plist文件中将”View controller-based status bar appearance” 设置为 “No”
     */ 
    [[UIApplication sharedApplication] setStatusBarHidden:YES withAnimation:UIStatusBarAnimationNone]; 
     
    // headView不作为tableHeadView,而是覆盖在第一个Cell上 
    self.headView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, 200)]; 
    self.headView.image = [[UIImage imageNamed:@"2"] boxblurImageWithBlur:0.01]; 
    self.headView.contentMode = UIViewContentModeScaleAspectFill;  //  图片展示全高度 
    self.headView.clipsToBounds = YES; 
    [self.testTableView addSubview:self.headView]; 
     

 
#pragma mark - scroll delegate 头部视图效果方法 
-(void)scrollViewDidScroll:(UIScrollView *)scrollView 

     
    [MTHeadEffect viewDidScroll:scrollView withHeadView:self.headView withBlur:0.01]; 

 
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{ 
 
    return 1; 

 
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{ 
 
    return 25; 

 
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{ 
 
    if (indexPath.row == 0) { 
        return 200; 
    } 
    return 40; 
 

 
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ 
     
    static NSString *cellIdentf = @"cell"; 
    UITableViewCell *cell = [tableView dequeueReusableHeaderFooterViewWithIdentifier:cellIdentf]; 
    if (!cell) { 
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentf]; 
    } 
    cell.textLabel.text = [NSString stringWithFormat:@"section = %ld row = %ld",indexPath.section,indexPath.row]; 
    return cell; 
 
}

效果图:额,不会制作gif动图,所以不太好演示,反正关键代码已经给出,大家可以自己去尝试.
第三方FXBlurView做法的关键代码:

复制代码 代码如下:

- (void)createBlurView{ 
 
    self.blurView = [[FXBlurView alloc] initWithFrame:CGRectMake(0, 0, ScreenWidth, kOriginHight)]; 
    self.blurView.tintColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:1]; 
    self.blurView.blurRadius = 1.0; 
    self.blurView.dynamic = YES; 
    self.blurView.alpha = 0.0; 
    self.blurView.contentMode = UIViewContentModeBottom; 
 

 
#pragma mark - scroll delegate 头部视图效果方法 
-(void)scrollViewDidScroll:(UIScrollView *)scrollView 

     
    if (scrollView.contentOffset.y > 0) { 
        
        self.blurView.alpha = 1.0; 
        self.blurView.blurRadius = scrollView.contentOffset.y / 4.0; 
    } 
    if (scrollView.contentOffset.y == 0) { 
        self.blurView.alpha = 0.0; 
    } 
    if (scrollView.contentOffset.y < 0) { 
         
        CGFloat offset = - scrollView.contentOffset.y; 
        self.blurView.alpha = 0.0; 
        NSArray *indexPathArray = [self.testTableView indexPathsForVisibleRows]; 
        HMTBlurTableViewCell *blurCell = (HMTBlurTableViewCell *)[self.testTableView cellForRowAtIndexPath:[indexPathArray objectAtIndex:0]]; 
        blurCell.blurImageView.frame = CGRectMake(-offset, -offset, ScreenWidth + offset * 2, kOriginHight + offset); 
 
    } 
}

时间: 2015-09-12

浅析iOS多视图滑动点击切换的集成

前言 多视图滑动点击切换这个视图在很多App都有用到,我对这个View进行了封装,外界只需要调用一个接口,就能实现这个效果,使用方法和系统的tabbarController很相似. 外界只需要调用下面这个接口即可集成. /** * 添加一个子控制器 */ - (void)addSubItemWithViewController:(UIViewController *)viewController; HYTabbarView效果图如下 HYTabbarView可灵活配置一屏宽显示多少个标题,以及标

iOS实现裁剪框和图片剪裁功能

图片处理中经常用的图片剪裁,就是通过剪裁框确定图片剪裁的区域,然后剪去该区域的图片,今天实现了一下,其实图片剪裁本身不难,主要剪裁框封装发了点时间,主要功能可以拖动四个角缩放,但不能超出父视图,拖动四个边单方向缩放,不能超出父视图,拖动中间部分单单移动,不改变大小,不能超出父视图.下面列举一些主要代码. 四个角的处理代码: -(void)btnPanGesture:(UIPanGestureRecognizer*)panGesture { UIView *vw = panGesture.view

比较IOS开发中常用视图的四种切换方式

在iOS开发中,比较常用的切换视图的方式主要有以下几种: 1. push.pop 使用举例(ViewController假设为需要跳转的控制器): [self.navigationController pushViewController:ViewController animated:YES]; //入栈,跳转到指定控制器视图 [self.navigationController popViewControllerAnimated:YES]; //弹栈,返回到前一个视图 [self.navig

iOS开发中实现显示gif图片的方法

我们知道Gif是由一阵阵画面组成的,而且每一帧画面播放的时常可能会不相等,观察上面两个例子,发现他们都没有对Gif中每一帧的显示时常做处理,这样的结果就是整个Gif中每一帧画面都是以固定的速度向前播放,很显然这并不总会符合需求.   于是自己写一个解析Gif的工具类,解决每一帧画面并遵循每一帧所对应的显示时间进行播放.   程序的思路如下:   1.首先使用ImageIO库中的CGImageSource家在Gif文件.   2.通过CGImageSource获取到Gif文件中的总的帧数,以及每一

iOS中常见的视图和图片处理示例详解

前言 众所周知在开发中不可避免的会遇到一些图片和视图的处理,我这里总结的这些只是我遇到的一些,以供下次使用查看.下面话不多说了,来一起看看详细的介绍吧. 图片的旋转 是UIImage的扩展类,直接使用UIImage的对象调用即可 UIImage #import <QuartzCore/QuartzCore.h> #import <Accelerate/Accelerate.h> @implementation UIImage (ImageRotate) -(UIImage *)im

iOS毛玻璃效果的实现及图片模糊效果的三种方法

App设计时往往会用到一些模糊效果或者毛玻璃效果,iOS目前已提供一些模糊API可以让我们方便是使用. 话说苹果在iOS7.0之后,很多系统界面都使用了毛玻璃效果,增加了界面的美观性,比如下图的通知中心界面; 但是其iOS7.0的SDK并没有提供给开发者实现毛玻璃效果的API,所以很多人都是通过一些别人封装的框架来实现,后面我也会讲到一个; 其实在iOS7.0(包括)之前还是有系统的类可以实现毛玻璃效果的, 就是 UIToolbar这个类,并且使用相当简单,几行代码就可以搞定. 下面是代码实现:

详解IOS图片压缩处理

前言  1.确图片的压缩的概念: "压" 是指文件体积变小,但是像素数不变,长宽尺寸不变,那么质量可能下降. "缩" 是指文件的尺寸变小,也就是像素数减少,而长宽尺寸变小,文件体积同样会减小.  2.图片压的处理 对于"压"的功能,我们可以使用UIImageJPEGRepresentation或UIImagePNGRepresentation方法实现, 如代码: //图片压 - (void)_imageCompression{ UIImage *

IOS给图片添加水印(两种方式)

为了防止自己辛苦做的项目被别人盗走,采取图片添加水印,在此表示图片的独一无二.加水印不是在上面添加几个Label,而是我们把字画到图片上成为一个整体,下面小编给大家分享IOS给图片添加水印(两种方式). 提供一个方法,此方法只需要传递一个要加水印的图片和水印的内容就达到效果. 第一种方式: -(UIImage *)watermarkImage:(UIImage *)img withName:(NSString *)name { NSString* mark = name; int w = img

iOS实现列表与网格两种视图的相互切换

下图为京东商城的截图 很多人看到这个,第一眼想到的是用TableView和CollectionView来做切换,笔者刚开始也是认为这么做,后来发现还有一个非常的简单方法,就可以实现这个功能. 实现代码 1.首先创建一个CollectionView. - (UICollectionView *)collectionView { if (!_collectionView) { UICollectionViewFlowLayout *flowlayout = [[UICollectionViewFlo

IOS中实现图片点击全屏预览

如果你感觉累,那就对了那是因为你在走上坡路..这句话似乎有点道理的样子,时常提醒自己无论走到哪都不要忘记自己当初为什么出发.有时想想感觉有的东西可以记录一下,就把它记录下来吧,这次想写一下关于单张图片点击全屏预览的问题,网上查了一些大神写的有的功能确实很强大但自己暂时想要的只是简单的功能就好,还有些方法自己也没弄出想要的效果,最后写了一个比较简单的点击单张图片的全屏预览和双指捏合缩小放大,可能有时要对图片做一些处理,这里放大后只是显示同一张图片并未做处理,下面直接贴出代码 // // ViewC

Android仿微信图片点击全屏效果

废话不多说,先看下效果: 先是微信的 再是模仿的 先说下实现原理,再一步步分析 这里总共有2个Activity一个就是主页,一个就是显示我们图片效果的页面,参数通过Intent传送,素材内容均来自网络,(感谢聪明的蘑菇) 图片都是Glide异步下的,下的,下的重要的事情说三次,然后就是用动画做放大操作然后显示出来了(并没有做下载原图的实现,反正也是一样 下载下来Set上去而且动画都不需要更简便). OK,我们来看分析下 obj,目录下分别创建了2个对象,一个用来使用来处理显示页面的图片尺寸信息以

关于微信上网页图片点击全屏放大效果

实现微信上网页的图片点击后全屏还可以可以缩放,这个功能是别人做的,可是捏点击后屏幕直接黑屏了,图片没有显示出来.这个代码在网上搜一下,挺多类似的. 先上代码. function arrayToJson(o) { var r = []; if (typeof o == "string") return "\"" + o.replace(/([\'\"\\])/g, "\\$1").replace(/(\n)/g, "\

JS实现全屏预览F11功能的示例代码

老是不通过,没办法,只能是重新发布了,反正我就是杠上了,大大小小写过很多前端特效,当然也经常在网上copy或者修改人家的代码,我觉得也挺好的,为什么?!因为我想这样,你能怎么办,打我? 少废话,直接上代码, JS代码 function fullScreen(el) { var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,

使用Vue-cli 中为单独页面设置背景图片铺满全屏

啥也不说了,大家还是直接看代码吧~ <template> <div id="logo"> </div> </template> <script> import meadiaurl from '../../api/mediaurl' export default { name: "logo" </script> <style scoped> #logo{ background: url

IOS 中UIImageView响应点击事件

IOS 中UIImageView响应点击事件 有时候会遇到点击一张图片,然后让这张图片触发一个事件,或者是跳转视图,想到的第一个方法就是用UIButton,将Button的背景图片属性设置为该图片,效果达到了,但不是最好的方法,直接触发方法 定义Image的对象 UIImageView *imgView =[[UIImageView alloc] initWithFrame:CGRectMake(0, 0,320,100)]; imgView.backgroundColor = [UIColor

JS解决IOS中拍照图片预览旋转90度BUG的问题

上篇文章[Js利用Canvas实现图片压缩功能]中做了图片压缩上传,但是在IOS真机测试的时候,发现图片预览的时候自动逆时针旋转了90度.对于这个bug,我完全不知道问题出在哪里,接下来就是面向百度编程了.通过度娘找到了相关资料,解决方法记录在此.这个问题的具体因素其实我还是不清楚是为何导致的,只有IOS和部分三星手机会出现此bug. 绝大部分的安卓机并无此问题. 解决此问题需要引入一个第三方 JS 库: exif.js 下载地址:https://github.com/exif-js/exif-

Android 中使用EditText 点击全选再次点击取消全选功能

最近在开发浏览器碰到这么一个需求:点击地址栏的时候,需要全选并调出键盘,再次点击就取消全选显示光标.点击屏幕除地址栏其他位置时,键盘隐藏,隐藏光标. 大部分浏览器都是这样的逻辑,这样可以提高用户体验,减少操作. 代码很简单,这里我简化了逻辑,页面只有一个EditText. 布局文件如下:里面有两个属性需要注意 android:focusable="true" android:selectAllOnFocus="true" 完整布局文件 <?xml versio

JS中利用FileReader实现上传图片前本地预览功能

引子 平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去,成功之后拿到URL再渲染到页面上,这样做在图片比较小的时候没什么问题,大一点的话就会比较慢才能看到预览了,而且还产生了垃圾文件,所以比较好的是上传之前先在本地预览一下. 之前做项找插件的时候就知道纯前端可以实现图片本地预览,可今天面试的时候被问到时竟然一脸懵逼,然后竟然无意中就在电脑桌面发现了实现的demo,然后根据demo查了一下API,稍微总结下: 首先得拿到File对象 当用input标签上传图片时event对象中会包含

分离与继承的思想实现图片上传后的预览功能:ImageUploadView

本文要介绍的是网页中常见的图片上传后直接在页面生成小图预览的实现思路,考虑到该功能有一定的适用性,于是把相关的逻辑封装成了一个ImageUploadView组件,实际使用效果可查看下一段的git效果图.在实现这个组件的过程中,有用到前面几篇博客介绍的相关内容,比如继承库class.js,任意组件的事件管理库eventBase.js,同时包含进了自己对职责分离,表现与行为分离这两方面的一些思考,欢迎阅读与交流. 演示效果: 注:由于演示的代码都是静态的,所以文件上传的组件是用setTimeout模