004:基础控件

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 *animationImages;
@property (nullable, nonatomic, copy) NSArray *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.借助软件

你可能感兴趣的:(004:基础控件)