UILabel
什么是UILabel:如果只显示文字那么就选择它,它可以纯洁的显示文字,并对文字进行各种各样的设置和排列
UILabel继承关系
UILabel继承自UIView,拥有其所有的属性方法
UILabel常见的设置
property(nonatomic,copy) NSString *text;
• 显示的文字
@property(nonatomic,retain) UIFont *font;
• 字体
@property(nonatomic,retain) UIColor *textColor;
• 文字颜色
@property(nonatomic) NSTextAlignment textAlignment;
对齐模式(比如左对齐、居中对齐、右对齐)
UIFont代表字体,常见创建方法有以下几个:
• + (UIFont *)systemFontOfSize:(CGFloat)fontSize; 系统默认字体
• + (UIFont *)boldSystemFontOfSize:(CGFloat)fontSize; 粗体
• + (UIFont *)italicSystemFontOfSize:(CGFloat)fontSize; 斜体
@property(nonatomic) NSLineBreakMode lineBreakMode;// 换行模式
NSLineBreakByWordWrapping = 0, // 单词包裹,换行的时候会以一个单词换行
NSLineBreakByCharWrapping, // 字符包裹换行,换行的时候会以一个字符换行
NSLineBreakByClipping, // 裁剪超出的内容
NSLineBreakByTruncatingHead, // 一行中头部省略(注意:numberOfLines要为1): "...wxyz"
NSLineBreakByTruncatingTail, // 一行中尾部省略: "abcd..."
NSLineBreakByTruncatingMiddle // 一行中中间部省略: "ab...yz"
UIFont
- UIFont:UIFont代表字体
- 常见的设置
+ (UIFont *)systemFontOfSize:(CGFloat)fontSize; //系统默认字体
+ (UIFont *)boldSystemFontOfSize:(CGFloat)fontSize; //粗体
+ (UIFont *)italicSystemFontOfSize:(CGFloat)fontSize; //斜体
UIImage
- 什么是UIImage
- UIImage:一个UIImage对象就是一张图片
- UIImage的继承关系
- UIImage继承自NSObject属于基础类,作用是放图片,也就是图片对象并且对图片进行处理
- UIImage常用的设置
加载图片的方式:
1. imageNamed:
2. imageWithContentsOfFile:
1. 加载Assets.xcassets这里面的图片:
1> 打包后变成Assets.car
2> 拿不到路径
3> 只能通过imageNamed:来加载图片
4> 不能通过imageWithContentsOfFile:来加载图片
2. 放到项目中的图片:
1> 可以拿到路径
2> 能通过imageNamed:来加载图片
3> 也能通过imageWithContentsOfFile:来加载图片
图片的两种加载方式内存资源的消耗:
1> imageNamed:
a. 就算指向它的指针被销毁,该资源也不会被从内存中干掉
b. 放到Assets.xcassets的图片,默认就有缓存
c. 图片经常被使用
2> imageWithContentsOfFile:
a. 指向它的指针被销毁,该资源会被从内存中干掉
b. 放到项目中的图片就不由缓存
c. 不经常用,大批量的图片
UIImageView
- UIImageView的作用是提供一个装图片的容器拉显示图片
- UIImageView的继承关系
- UIImageView继承自UIView,拥有其所有的属性和方法
- UIImageView常见的设置
// 这个初始化方法其实把图片的frame设置给了UIImageView的frame,所以不用单独的给UIImageView设置frame
- (instancetype)initWithImage:(nullable UIImage *)image;
- (instancetype)initWithImage:(nullable UIImage *)image highlightedImage:(nullable UIImage *)highlightedImage
// 默认是nil
@property (nullable, nonatomic, strong) UIImage *image;
@property (nullable, nonatomic, strong) UIImage *highlightedImage
@property (nonatomic, getter=isUserInteractionEnabled) BOOL userInteractionEnabled;
@property (nonatomic, getter=isHighlighted) BOOL highlighted NS_AVAILABLE_IOS(3_0);
//下面两个属性是存放动画图片的数组
@property (nullable, nonatomic, copy) NSArray<UIImage *> *animationImages;
@property (nullable, nonatomic, copy) NSArray<UIImage *> *highlightedAnimationImages NS_AVAILABLE_IOS(3_0); // The array must contain UIImages. Setting hides the single image. default is nil
// 播放时间
@property (nonatomic) NSTimeInterval animationDuration;
// 播放次数 0是一直播放
@property (nonatomic) NSInteger animationRepeatCount;
@property (null_resettable, nonatomic, strong) UIColor *tintColor NS_AVAILABLE_IOS(7_0);
// 开始播放
- (void)startAnimating;
// 停止播放
- (void)stopAnimating;
// 是否正在执行动画
- (BOOL)isAnimating;
// 动画状态
@property(nonatomic, readonly, getter=isAnimating) BOOL animating;
// 内容设置模式(继承自UIView)
UIViewContentModeRedraw, // 重新绘制 (核心绘图) drawRact
//带有Scale,标明图片有可能被拉伸或压缩
UIViewContentModeScaleToFill, // 完全的压缩或拉伸
// Aspect 比例,缩放是带有比例的
UIViewContentModeScaleAspectFit, // 宽高比不变 Fit 适应
UIViewContentModeScaleAspectFill, // 宽高比不变 Fill 填充
//不带有Scale,标明图片不可能被拉伸或压缩
UIViewContentModeCenter,
UIViewContentModeTop,
UIViewContentModeBottom,
UIViewContentModeLeft,
UIViewContentModeRight,
UIViewContentModeTopLeft,
UIViewContentModeTopRight,
UIViewContentModeBottomLeft,
UIViewContentModeBottomRight,
什么是UIButton?
- UIButton:称为“按钮”,界面上表现为可点击和用户进行交互,点击以后能够触发某个事件,按钮可以显示图片和文字。
- 继承关系
- UIButton继承自UIControl,拥有其所有方法和属性,最直接的体现为继承过来的两个方法:
// 给按钮添加事件
- (void)addTarget:(nullable id)target action:(SEL)action forControlEvents:(UIControlEvents)controlEvents;
// 删除添加的事件
- (void)removeTarget:(nullable id)target action:(nullable SEL)action forControlEvents:(UIControlEvents)controlEvents;
按钮的常见的设置
- 按钮的不同样式
typedef NS_ENUM(NSInteger, UIButtonType) {
UIButtonTypeCustom = 0, // 没有状态,自定义
UIButtonTypeSystem NS_ENUM_AVAILABLE_IOS(7_0), // standard system button
UIButtonTypeDetailDisclosure,
UIButtonTypeInfoLight,
UIButtonTypeInfoDark,
UIButtonTypeContactAdd,
UIButtonTypeRoundedRect = UIButtonTypeSystem, // Deprecated, use UIButtonTypeSystem instead
};
- 按钮的不同状态(继承自UIControl的状态)
typedef NS_OPTIONS(NSUInteger, UIControlState) {
// 普通状态
UIControlStateNormal = 0,
// 高亮状态,按下按钮没有松开的时候
UIControlStateHighlighted = 1 << 0, // used when UIControl isHighlighted is set
// 失效状态,按钮不可用的状态,enable属性设置为NO就是此状态
UIControlStateDisabled = 1 << 1,
UIControlStateSelected = 1 << 2, // flag usable by app (see below)
UIControlStateFocused NS_ENUM_AVAILABLE_IOS(9_0) = 1 << 3, // Applicable only when the screen supports focus
UIControlStateApplication = 0x00FF0000, // additional flags available for application use
UIControlStateReserved = 0xFF000000 // flags reserved for internal framework use
};
- 常用方法
- (void)setTitle:(NSString *)title forState:(UIControlState)state;
设置按钮的文字
• - (void)setTitleColor:(UIColor *)color forState:(UIControlState)state;
• 设置按钮的文字颜色
• - (void)setImage:(UIImage *)image forState:(UIControlState)state;
• 设置按钮内部的小图片
• - (void)setBackgroundImage:(UIImage *)image forState:(UIControlState)state;
设置按钮的背景图片
• 设置按钮的文字字体(需要拿到按钮内部的label来设置)
• btn.titleLabel.font = [UIFont systemFontOfSize:13];
• - (NSString *)titleForState:(UIControlState)state;
• 获得按钮的文字
• - (UIColor *)titleColorForState:(UIControlState)state;
• 获得按钮的文字颜色
• - (UIImage *)imageForState:(UIControlState)state;
• 获得按钮内部的小图片
• - (UIImage *)backgroundImageForState:(UIControlState)state;
获得按钮的背景图片
- UIButton,UIlabel,UIimage的选择
- 特点:
- UIButton:
- 既能显示文字又能显示图片(内容图片和背景图片两种)
- 普通和高亮状态下显示不同的文字
- 直接通过addTarget添加监听点击
- UIImageView
- 只能显示图片,不能直接监听点击
- UILabel
- 只能显示文字,不能直接监听点击
- 选择:
- 显示数据,不需要点击建议选择UIImageView和UILabel
- 不显示数据,需要监听点击,用UIButton,UIImageView和UILabel也可以通过手势识别器来监听点击,但是操作教为繁琐
- 长安控件变换不同内容,选择UIButton(按钮两种状态)
- 同时显示两张图片,用UIButton
常用颜色
- 每一种颜色都是由N个颜色通道组成
- 常见的颜色通道(ARGB)
- A: alpha 透明度
- R: red 红色
- G: green 绿色
- B: blue 蓝色
- 常见颜色
- 白色:全部通道满值
- 黑色:全部通道都是0(透明度除外)
- 灰色:RGB通道的值一样
32位颜色
颜色的组成
由ARGB四个颜色通道组成
每一个颜色通道都占据8bit
每一个颜色通道的取值范围是
二进制: [0b00000000, 0b11111111] 注意:0b代表2进制
十进制: [0, 255] 注意:(0-28-1)
十六进制:[0x00, 0xff] 注意:0x代表16进制注意
十六进制取值: 0-9 A-F
十进制取值: 0-9
二进制取值: 0-1
颜色的表示形式
HEX格式 (ARGB)
绿色 #ff00ff00
黄色 #ffffff00
黑色 #ff000000
白色 #ffffffff
ARGB格式
绿色 255,0,255,0
黄色 255,255,255,0
黑色 255,0,0,0
白色 255,255,255,255
24位颜色
颜色的组成
由RGB四个颜色通道组成
每一个颜色通道都占据8bit
每一个颜色通道的取值范围是
二进制: [0b00000000, 0b11111111] 注意:0b代表2进制
十进制: [0, 255] 注意:(0-(28-1))
十六进制:[0x00, 0xff] 注意:0x代表16进制
颜色的表示形式
HEX格式 (RGB)
绿色 #00ff00
黄色 #ffff00
黑色 #000000
白色 #ffffff
RGB格式
绿色 0,255,0
黄色 255,255,0
黑色 0,0,0
白色 255,255,255
12位颜色
颜色的组成
由RGB四个颜色通道组成
每一个颜色通道都占据4bit
每一个颜色通道的取值范围是
二进制: [0b0000, 0b1111] 注意:0b代表2进制
十进制: [0, 15] 注意:(0-(24-1))
十六进制:[0x00, 0xff] 注意:0x代表16进制
颜色的表示形式
HEX格式 (RGB)
绿色 #0f0
黄色 #ff0
黑色 #000
白色 #fff
RGB格式
绿色 0,15,0
黄色 15,15,0
黑色 0,0,0
白色 15,15,15
总结
- 颜色的通道越多,质量就越高,占用尺寸就越大,图像就越清晰
- PNG格式和JPG格式区别:一个有损,一个无损 (压缩了某些通道)
- 开发技巧:适用于OC和HTML5
- 纯色的可以使用12bit
- 需要设置透明的可以使用24bit或者32bit
- (图片的压缩技术->文件的压缩技术)
- 注意:HEX格式和RGB格式互转
- 1.自己计算
- 2.借助软件