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<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.借助软件
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 196,099评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,473评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,229评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,570评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,427评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,335评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,737评论 3 386
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,392评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,693评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,730评论 2 312
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,512评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,349评论 3 314
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,750评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,017评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,290评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,706评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,904评论 2 335

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,952评论 4 60
  • 1、禁止手机睡眠[UIApplication sharedApplication].idleTimerDisabl...
    DingGa阅读 1,109评论 1 6
  • 三个月前,刘卓佳这个三个字还是一个陌生的名字。三个月后,又是谁刻在我的心上。 “大家好,你们可以叫我妮妮,我是...
    雾音阅读 209评论 1 0
  • 文|秋馨 而立之年,趴下了锋芒,站起的是思想。 “三十而立”语出《论语·为政》,孔子所说的“立”不是指成家立业,而...
    言恰如心阅读 395评论 0 0