您的位置:首页 > 产品设计 > UI/UE

iOS开-UI基础(基础控件UILabel,UIImageIVew,UIButton)

2018-03-05 14:31 513 查看
一.Label[objc] view placopy// 1.1 创建UILabel对象  
  UILabel *label = [[UILabel alloc] init];  
    
  // 1.2 设置frame  
  label.frame = CGRectMake(100, 100, 202, 175);  
    
  // 1.3 设置背景颜色  
  label.backgroundColor = [UIColor redColor];  
    
  // 1.4 设置文字  
  label.text = @"da shen 11期最牛逼!!!!da shen da shen da shen da shen da shen ";  
    
  // 1.5 居中  
  label.textAlignment = NSTextAlignmentCenter;  
    
  // 1.6 设置字体大小  
  label.font = [UIFont systemFontOfSize:20.f];  
  label.font = [UIFont boldSystemFontOfSize:25.f];  
  label.font = [UIFont italicSystemFontOfSize:20.f];  
    
  // 1.7 设置文字的颜色  
  label.textColor = [UIColor whiteColor];  
    
  // 1.8 设置阴影(默认是有值)  
  label.shadowColor = [UIColor blackColor];  
  label.shadowOffset = CGSizeMake(-2, 1);  
    
  // 1.9 设置行数(0:自动换行)  
  label.numberOfLines = 1;  
    
  // 1.10 显示模式  
  label.lineBreakMode =  NSLineBreakByTruncatingHead;  
    
  /* 
   NSLineBreakByWordWrapping = 0,  // 单词包裹,换行的时候会以一个单词换行 
   NSLineBreakByCharWrapping,       // 字符包裹换行,换行的时候会以一个字符换行 
   NSLineBreakByClipping,       // 裁剪超出的内容 
   NSLineBreakByTruncatingHead, // 一行中头部省略(注意:numberOfLines要为1): "...wxyz" 
   NSLineBreakByTruncatingTail, // 一行中尾部省略: "abcd..." 
   NSLineBreakByTruncatingMiddle    // 一行中中间部省略:  "ab...yz" 
   */  
    
  // 2.0 添加到控制器的view中  
  [self.view addSubview:label];  
二.UIImageView// 1.创建UIImageView对象
UIImageView *imageView = [[UIImageView alloc] init];

// 2. 设置尺寸
// imageView.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height);
imageView.frame = self.view.bounds;

// 3. 设置背景颜色
imageView.backgroundColor = [UIColor redColor];

// 4. 设置背景图片 (png不需要后缀)
imageView.image = [UIImage imageNamed:@"1"];

// 5.设置图片的内容模式
imageView.contentMode = UIViewContentModeScaleAspectFill;
// 裁剪多余的部分
imageView.clipsToBounds = YES;
// 6.加毛玻璃
// 6.1 创建UIToolBar对象
UIToolbar *toolBar = [[UIToolbar alloc] init];
// 6.2 设置toolBar的frame
toolBar.frame = imageView.bounds;
// 6.3 设置毛玻璃的样式
toolBar.barStyle = UIBarStyleBlack; toolBar.alpha = 0.98;
// 6.4 加到imageView中
[imageView addSubview:toolBar];
//加到控制器的view中
[self.view addSubview:imageView];

拓展:
typedefNS_ENUM(NSInteger, UIViewContentMode) {
UIViewContentModeScaleToFill,
UIViewContentModeScaleAspectFit, // contents scaled to fit with fixed aspect. remainder is transparent
UIViewContentModeScaleAspectFill, // contents scaled to fill with fixed aspect. some portion of content may be clipped.
UIViewContentModeRedraw, // redraw on bounds change (calls -setNeedsDisplay)
UIViewContentModeCenter, // contents remain same size. positioned adjusted。居中显示
UIViewContentModeTop,
UIViewContentModeBottom,
UIViewContentModeLeft,
UIViewContentModeRight,
UIViewContentModeTopLeft,
UIViewContentModeTopRight,
UIViewContentModeBottomLeft,
UIViewContentModeBottomRight,
};
注意:
UIViewContentModeScaleToFill :缩放图片,使图片充满容器,属性会导致图片变形。
UIViewContentModeScaleAspectFit:会保证图片比例不变,而且全部显示在ImageView中,这意味着ImageView会有部分空白,不会填充整个区域。
UIViewContentModeScaleAspectFill:也会证图片比例不变,但是是填充整个ImageView的,可能只有部分图片显示出来。
Top,Left,Right等等就是将突破放在View中的位置进行调整。
内容模式有利于重复使用view的内容,如果你想自定义视图并在缩放和计算操作期间重绘它们,可以使用UIViewContentModeRedraw值,设置该值将使系统调用drawRect:方法来响应视图的几何结构的改变,一般情况下,应该尽量避免使用该值。

补充1:ImageView的帧动画 用ImageView的帧动画可以做拳皇的大招小招等
#pragma mark - 开始动画
- (IBAction)startAnimation {
// 1.1 加载所有的图片
NSMutableArray<UIImage *> *imageArr = [NSMutableArray array];
for (int i=0; i<20; i++) {
// 获取图片的名称
NSString *imageName = [NSString stringWithFormat:@"%d", i+1];
// 创建UIImage对象
UIImage *image = [UIImage imageNamed:imageName];
// 加入数组
[imageArr addObject:image];
}
// 设置动画图片
self.imageView.animationImages = imageArr;

// 设置动画的播放次数
self.imageView.animationRepeatCount = 0;

// 设置播放时长
// 1秒30帧, 一张图片的时间 = 1/30 = 0.03333 20 * 0.0333
self.imageView.animationDuration = 1.0;

// 开始动画
[self.imageView startAnimating];

//动画放完1秒后清除内存
CGFloat delay = self.tom.animationDuration + 1.0;
[self.tom performSelector:@selector(setAnimationImages:) withObject:nil afterDelay:delay];

}

- (IBAction)overAnimation {
[self.imageView stopAnimating];
}

补充2.加载图片的方式
/**
加载图片的方式:
1. imageNamed:
2. imageWithContentsOfFile:

1. Assets.xcassets这里面的图片:
打包后变成Assets.car所以拿不到路径只能通过imageNamed加载
2. 放到项目中的图片: 可以拿到路径,能通过imageNamed:来加载图片,也能通过imageWithContentsOfFile:来加载图片
/**
图片的两种加载方式:
1> imageNamed:
a. 就算指向它的指针被销毁,该资源也不会被从内存中干掉
b. 放到Assets.xcassets的图片,默认就有缓存
c. 图片经常被使用

2> imageWithContentsOfFile:
a. 指向它的指针被销毁,该资源会被从内存中干掉
b. 放到项目中的图片就没有缓存
c. 不经常用,大批量的图片
*/
补充3.返回一张受保护的图片

// 1.1 创建UIImage对象
// UIImage *image = [UIImage resizableImageWithLocalImageName:@"chat_send_nor"];

UIImage *image = [UIImage imageNamed:@"chat_send_nor"];

// 1.2 拿到image的尺寸
/*
CGFloat imageWidth = image.size.width;
CGFloat imageHeight = image.size.height;
*/

// 1.3 返回一张受保护而且拉伸的图片 --->CapInsets:哪些地方要保护

// 方式一
UIImage *resizableImage = [image resizableImageWithCapInsets:UIEdgeInsetsMake(imageHeight * 0.5, imageWidth * 0.5, imageHeight * 0.5 -1, imageWidth * 0.5 - 1)];

UIImageResizingModeTile, 平铺
UIImageResizingModeStretch, 拉伸(伸缩)
UIImage *resizableImage = [image resizableImageWithCapInsets:UIEdgeInsetsMake(imageHeight * 0.5, imageWidth * 0.5, imageHeight * 0.5 -1, imageWidth * 0.5 - 1) resizingMode:UIImageResizingModeTile];

// 方式二
// 右边需要保护的区域 = 图片的width - leftCapWidth - 1
// bottom cap = height - topCapHeight - 1
UIImage *resizableImage = [image stretchableImageWithLeftCapWidth:imageWidth * 0.5 topCapHeight:imageHeight * 0.5];三.UIButton// 创建按钮对象
// UIButton *button = [[UIButton alloc] init];
// 注意:设置按钮的类型只能在初始化的时候设置 -> UIButtonTypeCustom
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.enabled = YES; //设置button是否可用
// 设置按钮的类型
// button.buttonType = UIButtonTypeInfoDark;

// 设置frame
button.frame = CGRectMake(100, 100, 170, 60);

// 设置背景颜色
button.backgroundColor = [UIColor redColor];
[button setBackgroundColor:[UIColor redColor]];

// 设置文字
// 分状态的:
// button.titleLabel.text = @"普通文字";
[button setTitle:@"普通按钮" forState:UIControlStateNormal];
[button setTitle:@"高亮按钮" forState:UIControlStateHighlighted];

// 设置文字的颜色
[button setTitleColor:[UIColor greenColor] forState:UIControlStateNormal];
[button setTitleColor:[UIColor yellowColor] forState:UIControlStateHighlighted];

// 设置文字的阴影颜色
[button setTitleShadowColor:[UIColor blackColor] forState:UIControlStateNormal];
[button setTitleShadowColor:[UIColor whiteColor] forState:UIControlStateHighlighted];

button.titleLabel.shadowOffset = CGSizeMake(3, 2);

// 设置内容图片
[button setImage:[UIImage imageNamed:@"player_btn_pause_normal"] forState:UIControlStateNormal];
[button setImage:[UIImage imageNamed:@"player_btn_pause_highlight"] forState:UIControlStateHighlighted];

// 自定义view继承UIButton改变内部按钮的位置可以实现自定义button
button.imageView.backgroundColor = [UIColor yellowColor];
button.titleLabel.backgroundColor = [UIColor blueColor];
// 注意: 在按钮外面改的尺寸,按钮的内部都会覆盖掉
/*
button.titleLabel.frame = CGRectMake(0, 0, 100, 70);
button.imageView.frame = CGRectMake(100, 0, 70, 70);
*/

[button titleRectForContentRect:CGRectMake(0, 0, 100, 70)];
[button imageRectForContentRect:CGRectMake(100, 0, 70, 70)];

// 设置按钮的内边距
//1.设置内容
// self.button.contentEdgeInsets = UIEdgeInsetsMake(-20, 0, 0, 0);
// 2.设置图片
self.button.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 0);
// 3.设置标题
self.button.titleEdgeInsets = UIEdgeInsetsMake(0, 0, 0, -10);

// 设置背景图片
[button setBackgroundImage:[UIImage imageNamed:@"buttongreen"] forState:UIControlStateNormal];
[button setBackgroundImage:[UIImage imageNamed:@"buttongreen_highlighted"] forState:UIControlStateHighlighted];

// 加到控制器的view中
[self.view addSubview:button];
// 非常重要 /** * 监听按钮的点击 * Target: 目标 (让谁做事情) * action: 方法 (做什么事情-->方法) * Events: 事件 *///
SEL sel = @selector(clickButton:);
[button addTarget:self action:@selector(demo:) forControlEvents:UIControlEventTouchUpInside];

// 2.向左旋转45°
// 45 180
// 角度是正数:顺时针, 角度是负数:逆时针
// head.transform = CGAffineTransformMakeRotation(-M_PI_4);
button.transform = CGAffineTransformRotate(button.transform, M_PI_4);
// 2.每次向上移动100的距离
// head.transform = CGAffineTransformMakeTranslation(0, -100);
button.transform = CGAffineTransformTranslate(button.transform, 0, -100);
// 2.增大
// head.transform = CGAffineTransformMakeScale(1.5, 1.5);
button.transform = CGAffineTransformScale(button.transform, 1.5, 1.5);
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: