用UIToolBar实现简单毛玻璃效果新葡京8455

作者:澳门新葡京平台游戏

UIToolBar自带毛玻璃效果,实现起来非常简单。

contentMode属性

  • 带有scale单词的:图片有可能会拉伸

    • UIViewContentModeScaleToFill
      • 将图片拉伸至填充整个imageView
      • 图片显示的尺寸跟imageView的尺寸是一样的
    • 带有aspect单词的:保持图片原来的宽高比
      • UIViewContentModeScaleAspectFit
        • 保证刚好能看到图片的全部
      • UIViewContentModeScaleAspectFill
        • 拉伸至图片的宽度或者高度跟imageView一样
  • 没有scale单词的:图片绝对不会被拉伸,保持图片的原尺寸

    • UIViewContentModeCenter
    • UIViewContentModeTop
    • UIViewContentModeBottom
    • UIViewContentModeLeft
    • UIViewContentModeRight
    • UIViewContentModeTopLeft
    • UIViewContentModeTopRight
    • UIViewContentModeBottomLeft
    • UIViewContentModeBottomRight
  • 1 创建UIImageView对象

在View Controller中拖入一个UIImageView,并设置好图片。

小语法点

  • 不能直接修改:OC对象的结构体属性的成员
  • 下面的写法是错误的
imageView.frame.size = imageView.image.size;
  • 正确写法
CGRect tempFrame = imageView.frame;
tempFrame.size = imageView.image.size;
imageView.frame = tempFrame;

-设置imageView的尺寸与父容器的尺寸一致

imageView.frame = self.view.bounds

-利用UIToolBar设置毛玻璃效果

  • 创建UIToolBar对象
    UIToolbar *toolBar = [[UIToolbar alloc]init];
  • 设置toolBar的frame
    toolBar.frame = self.view.bounds;
  • 设置毛玻璃的样式
    toolBar.barStyle = UIBarStyleBlack;
    toolBar.alpha = 0.98;
  • 加到imageView中
    [imageView addSubview:toolBar];
UIImageView *imageView = [UIImageView alloc] init];

新葡京8455 1

initWithImage:方法

  • 利用这个方法创建出来的imageView的尺寸和传入的图片尺寸一样
  • 2 设置尺寸

接着我们准备在这个imageView上面加入一个UIToolBar,让这个toolBar变为这个imageView的子控件。

修改frame的3种方式

  • 直接使用CGRectMake函数
imageView.frame = CGRectMake(100, 100, 200, 200);
  • 利用临时结构体变量
CGRect tempFrame = imageView.frame;
tempFrame.origin.x = 100;
tempFrame.origin.y = 100;
tempFrame.size.width = 200;
tempFrame.size.height = 200;
imageView.frame = tempFrame;
  • 新葡京8455,使用大括号{}形式
imageView.frame = (CGRect){{100, 100}, {200, 200}};
  • 抽取重复代码

    • 将相同代码放到一个新的方法中
    • 不用的东西就变成方法的参数
  • 图片的加载方式

    • 有缓存
    UIImage *image = [UIImage imageNamed:@"图片名"];
    
      - 使用场合:图片比较小、使用频率较高
      - 建议把需要缓存的图片直接放到Images.xcassets
    
    • 无缓存
    NSString *file = [[NSBundle mainBundle] pathForResource:@"图片名" ofType:@"图片的扩展名"];
    UIImage *image = [UIImage imageWithContentsOfFile:@"图片文件的全路径"];
    
      - 使用场合:图片比较大、使用频率较小
      - 不需要缓存的图片不能放在Images.xcassets
    
    • 放在Images.xcassets里面的图片,只能通过图片名去加载图片
  • 延迟做一些事情

[abc performSelector:@selector(stand:) withObject:@"123" afterDelay:10];
// 10s后自动调用abc的stand:方法,并且传递@"123"参数
  • 音频文件的简单播放
// 创建一个音频文件的URL(URL就是文件路径对象)
NSURL *url = [[NSBundle mainBundle] URLForResource:@"音频文件名" withExtension:@"音频文件的扩展名"];
// 创建播放器
self.player = [AVPlayer playerWithURL:url];
// 播放
[self.player play];

但是这个操作是不能在Storyboard中完成的。因为在Storyboard中除了UIView,其他的控件都不能直接在上面加上子控件。如果想给这个UIImageView上面加上子控件,那么需要用代码来实现。

例子

在开始写代码的时候,一定要先分析清楚整个实现思路,把整个过程拆解成一步一步

1.动画核心代码

//1.遍历每一张图片
  //1.1加载所有图片
NSMutableArray<UIImage *>*imageArr = [NSMutableArray array];
for(int i=0;i<20;i  ){
  //1.2获取图片名称
NSString *imageName = [NSString stringWithFormat:@"%d",i  ];
  //1.3创建UIImage对象
UIImage *image = [UIImage imageNamed:imageName];
  //1.4把image对象加入数组
[imageArr addObeject:image];
//2.设置动画图片
self.imageView.animationImages = imageArr;
//3.设置动画图片的播放次数
self.imageView.animationRepeatCont = 0;
//4.设置播放时长
self.imageView.animationDuration = 1.0;
//5.开始动画
[self.imageView startAnimation];
}

2.拳皇动画

#import "ViewController.h"
@interface ViewController()
@propety(weak,nonatomic)IBOutlet UIImageView *imageView;
@propety(strong,nonatomic)NSArray *standImages;
@propety(strong,nonatomic)NSArray *smallImages;
@propety(strong,nonatomic)NSArray *bigImages;

@implementation ViewController
//把三类图片加载方式封装到loadAllImagesWithimagePrefix中,然后调用这个方法来加载这三类动画
-(void)viewDidLoad{
self.standImage = [self loadAllImagesWithimagePrefix:@"stand" count:10];
self.smallImage = [self loadAllImagesWithimagePrefix:@"stand" count:10];
self.bigImage = [self loadAllImagesWithimagePrefix:@"stand" count:10];
}
/* 
加载所有图片
imagePrefix 名称前缀
count 图片的总个数
*/
-(NSArray *)loadAllImagesWithPrefix:(NSString *)imagePrefix count:(int)count{
          NSMutableArray<UIImage *>images = [NSMutableArray array];
          for(int i=0;i<count;i  ){
          NSString *imageName = [NNString stringWithFormat:@"@_%d",imagePrefix:i 1];

          }
return images;
}
- (IBAction)stand {

    self.imageView.animationImages = self.standImages;

    self.imageView.animationRepeatCount = 0;

    self.imageView.animationDuration=0.6;

    [self.imageView startAnimating];

}

- (IBAction)smallZhao {
    self.imageView.animationImages = self.smallImages;

    self.imageView.animationRepeatCount = 2;

    self.imageView.animationDuration=1.5;

    [self.imageView startAnimating];

}
- (IBAction)bigZhao {
    self.imageView.animationImages = self.bigImages;

    self.imageView.animationRepeatCount = 1;

    self.imageView.animationDuration=2.5;

    [self.imageView startAnimating];
}

@end
imageView.frame = CGRectMake(CGFloat x, CGFloat y, CGFloat width, CGFloat height);

Control-Drag设置这个UIImageView的IBOutlet,名为imageView。并且创建一个UIToolBar名为toolBar。接着给imageView发送addSubview:消息,将toolBar加到imageView上。代码如下:

  • 3 设置背景颜色
@interface ViewController ()@property (weak, nonatomic) IBOutlet UIImageView *imageView;@end@implementation ViewController- viewDidLoad { [super viewDidLoad]; UIToolbar *toolBar = [[UIToolbar alloc] initWithFrame:self.imageView.bounds]; // toolBar的frame就是imageView的bounds。 [self.imageView addSubview:toolBar];}@end

效果如下:

imageView.backgroundColor = [UIColor redColor];

新葡京8455 2

  • 4 设置背景图片

另外,我们可以通过修改toolBar的barStyle属性来实现不同风格的毛玻璃效果:

- viewDidLoad { [super viewDidLoad]; UIToolbar *toolBar = [[UIToolbar alloc] initWithFrame:self.imageView.bounds]; toolBar.barStyle = UIBarStyleBlack; // 改变barStyle [self.imageView addSubview:toolBar];}
imageView.image = [UIImage imageNamed:@"picture"];:-> png格式不需要加后缀

新葡京8455 3

  • 5 设置图片内容模式
imageView.contentMode = UIViewContentModeScaleAspectFill;// 重新绘制 UIViewContentModeRedraw, //1.带有Scale,标明图片有可能被完全的拉伸或压缩 UIViewContentModeScaleToFill, //2.Aspect 比例,缩放是带有比例的 UIViewContentModeScaleAspectFit, // 宽高比不变 Fit 适应 UIViewContentModeScaleAspectFill, // 宽高比不变 Fill 填充//3.不带有Scale,标明图片不可能被拉伸或压缩UIViewContentModeCenter,UIViewContentModeTop, UIViewContentModeBottom,UIViewContentModeLeft,UIViewContentModeRight,UIViewContentModeTopLeft,UIViewContentModeTopRight,UIViewContentModeBottomLeft,UIViewContentModeBottomRight,

1 创建UIToolBar 对象

UIToolBar *toolBar = [[UIToolBar alloc] init];

2 设置toolBar的frame

toolBar.frame = imageView.bounds;

3 设置毛玻璃的样式

toolBar.barStyle = UIBarStyleBlack;toolBar.alpha = 0.95;

4 加载到父控制器(这里是imageView)中

[self.image addSubview:toolBar];
  • 1 创建UIImage对象
UIImage *image = [UIImage imageNamed:@"image_name"];
  • 2 获取image的尺寸
CGFloat imagWidth = image.size.width;CGFloat imageHeight = image.size.height;
  • 3 返回一张受保护而且拉伸的图片
  • 方式一
>>3.1UIImage *resizableImage = [image resizableImageWithCapInsets:UIEdgeInsetMake(imageHeight * 0.5, imageWidth * 0.5, imageHeight * 0.5 -1, imageWidth * 0.5 - 1)];>>3.2UIImage *resizableImage = [image resizableImageWithCapInsets:UIEdgeInsetsMake(imageHeight * 0.5, imageWidth * 0.5, imageHeight * 0.5 -1, imageWidth * 0.5 - 1) resizingMode:UIImageResizingModeTile];//UIImageResizingModeTile, 平铺//UIImageResizingModeStretch, 拉伸
  • 方式二
//右边需要保护的区域 = 图片的width - leftCapWidth - 1// bottom cap = height - topCapHeight - 1UIImage *resizableImage = [image stretchableImageWithLeftCapWidth:imageWidth * 0.5 topCapHeight:imageHeight * 0.5];
  • 1 方式一
self.imageView.image = [UIImage imageNamed:@"1"];
  • 2 方式二
NSString *path = [[NSBundle mainBundle] pathForResource:@"1" ofType:@"png"];self.imageView.image = [UIImage imageWithContentsOfFile:path];
  • 3 总结
加载图片有两种方式:

1.通过 imageNamed:来加载2.通过 imageWithContentsOfFile:来加载

3.1 放到Assets.xcassets这里面的图片:
1> 打包后变成Assets.car2> 拿不到路径3> 只能通过imageNamed:来加载图片4> 不能通过imageWithContentsOfFile:来加载图片
3.2 放到项目中的图片:
1> 可以拿到路径2> 能通过imageNamed:来加载图片3> 也能通过imageWithContentsOfFile:来加载图片
注意:

1>经常用的图片建议用imageNamed:2>不经常用的通过imageWithContentsOfFile:来加载图片

本文由新葡京8455发布,转载请注明来源

关键词: