004:基础控件

作者: 韩旭杰 | 来源:发表于2016-12-26 22:58 被阅读18次

    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.借助软件

    相关文章

      网友评论

        本文标题:004:基础控件

        本文链接:https://www.haomeiwen.com/subject/evrsvttx.html