iOS开发经验(12)-显示模式

目录

1. contentMode-显示模式
2. 背景图片的拉伸
3. textAligment-显示模式
4. lineBreakMode-显示模式
5. contentHorizontalAlignment\contentVerticalAlignment-显示模式

1.contentMode : 内容模式(控制内容的对齐方式), 一般对UIImageView很有用

typedef NS_ENUM(NSInteger, UIViewContentMode) {
//图片拉伸填充至整个UIImageView(图片可能会变形),这也是默认的属性,如果什么都不设置就是它在起作用
    UIViewContentModeScaleToFill,
//图片拉伸至完全显示在UIImageView里面为止(图片不会变形)
    UIViewContentModeScaleAspectFit,
//图片拉伸至图片的的宽度或者高度等于UIImageView的宽度或者高度为止.看图片的宽高哪一边最接近UIImageView的宽高,一个属性相等后另一个就停止拉伸.
    UIViewContentModeScaleAspectFill,
//调用setNeedsDisplay 方法时,就会重新渲染图片

//下面的属性都是不会拉伸图片的
这样设置图片不会拉伸或者压缩，就是按照imageView的frame和图片的大小来居中显示的
这里有两种情况：
图片比view的区域更大。这个时候会截取图片的中间部位显示在frame区域里面。
图片比view的区域更小。这个时候图片会完整的显示在frame的中间位置。
    UIViewContentModeRedraw,
//中间模式
    UIViewContentModeCenter, 
//顶部
    UIViewContentModeTop,
//底部
    UIViewContentModeBottom,
//左边
    UIViewContentModeLeft,
//右边
    UIViewContentModeRight,
//左上
    UIViewContentModeTopLeft,
//右上
    UIViewContentModeTopRight,
//左下
    UIViewContentModeBottomLeft,
//右下
    UIViewContentModeBottomRight,
};

总结所有显示模式的特点：

1. 不带Scale的是较为简单一些,按照这些显示模式来显示,图片会按照原大小来显示,不会被拉伸也不会被压缩，常用的是UIViewContentModeCenter；

2. 下面着重介绍带有Scale字眼的模式(图片会被拉伸或者压缩)
   带有Scale的三个模式中：
   有一个是不带有Aspect字眼的UIViewContentModeScaleToFill
   它在拉伸的时候不会按照比例(图片会变形)
   然后非常单纯的把整个ImageView填满:

3. 另外两个带有Aspect字眼
   他们被拉伸的时候图片的比例不会改变(图片不变形)
   UIViewContentModeScaleAspectFit,图片会完全显示,图片等比例缩小至宽等于ImageView的宽或者高等于ImageView的高为止。

4. UIViewContentModeScaleAspectFill
   图片也会完全显示(超出控件部分也会显示)
   图片等比例拉伸至宽等于ImageView的宽
   或者高等于imageview的高为止

由此可以得出枚举最前面三个属性是会拉伸(缩放)图片的,其余的属性是不会拉伸图片.同时可以总结出两点:
1.凡是带有scale单词的属性,图片都会被拉伸;
2.凡是带有Ascept单词属性,图片会保持原来的宽高比,即图片不会变形.
最后如果想让图片占满整个父容器,并且不变形,可以采用一种折中的方式:

self.leftImageView.contentMode =UIViewContentModeScaleAspectFill;
//超出容器范围的切除掉
self.leftImageView.clipsToBounds = YES; 

2. 背景图片的拉伸

这里给介绍2种拉伸图片的方法:

方法一:
resizableImageWithCapInsets: resizingMode:
是UIImage实例调用的方法,返回拉伸后的image。
capInsets参数表示图片上下左右分别要保护的宽度或者高度(保持不变的边距),没被保护的地方会进行拉伸。
resizingMode表示拉伸的部位是以何种方式显示,有平铺和拉伸两种选择，分别为UIImageResizingModeTile和 UIImageResizingModeStretch，其中UIImageResizingModeTile表示平铺，而UIImageResizingModeStretch表示拉伸。
结合图片来说，它是一个上(top)、左(left)、下(bottom)、右(right)的逆时针结构，即顶部保护图片高度的一半，左边保护图片宽度的一半，下面保护图片高度的一半再减去1个像素，右边保护图片宽度的一半再减去一个像素:

UIEdgeInsets insets =UIEdgeInsetsMake(imageHeight * 0.5, imageWidth * 0.5, imageHeight * 0.5 -1, imageWidth * 0.5 - 1);
//指定为拉伸模式，伸缩后重新赋值
UIImage * image = [image1 resizableImageWithCapInsets:insets resizingMode:UIImageResizingModeStretch];

方法二:
stretchableImageWithLeftCapWidth: topCapHeight:
也是UIImage实例调用的方法,返回拉伸后的image。
两个参数分别表示要左边和上边被保护起来(不会变形)的宽度和高度。
使用这个方法只会拉伸一个像素点,设置左边和上边的包括宽高后,右边和下边的保护宽高分别是:

right = width - left - 1,
bottom = height - top - 1,

所以其实拉伸的只有中间一个像素点。

UIImage *bumble = [UIImage imageNamed:@"SenderImageNodeMask"];
imageview.image = [bumble stretchableImageWithLeftCapWidth:floorf(bumble.size.width/2) topCapHeight:floorf(bumble.size.height/2+10)];

区别：
方法一拉伸的是一块区域，其中有个被保护的不被拉伸的区域；方法二拉伸的是一个像素点，其余区域不被拉伸。

3. textAligment:文字显示模式

拥有textAligment属性的控件(能够显示文字的一般都有):
UITextField,UILabel,UITextView

NSTextAlignmentLeft      = 0,    // 左对齐
NSTextAlignmentCenter    = 1, // 居中对齐
NSTextAlignmentRight    = 2,   // 右对齐
NSTextAlignmentJustified = 3, // 充满view来显示

4. lineBreakMode

label.lineBreakMode = NSLineBreakByCharWrapping; 
//以字符为显示单位显示，后面部分省略不显示。
label.lineBreakMode = NSLineBreakByClipping; 
//剪切与文本宽度相同的内容长度，后半部分被删除。
label.lineBreakMode = NSLineBreakByTruncatingHead; 
//前面部分文字以……方式省略，显示尾部文字内容。
label.lineBreakMode = NSLineBreakByTruncatingMiddle; 
//中间的内容以……方式省略，显示头尾的文字内容。
label.lineBreakMode = NSLineBreakByTruncatingTail;
 //结尾部分的内容以……方式省略，显示头的文字内容。
label.lineBreakMode = NSLineBreakByWordWrapping; 
//以单词为显示单位显示，后面部分省略不显示。

5. contentHorizontalAlignment\contentVerticalAlignment

contentHorizontalAlignment 、contentVerticalAlignment:内容的水平垂直显示模式。
拥有contentHorizontalAlignment、contentVerticalAlignment属性的控件(继承自UIControl的控件或者UIControl本身):

UIControl
UIButton
UITextField

使用较为常见的就是Button的内容显示模式，Button里面有ImageView和Label两个子控件需要显示。
我们可以分别设置常用的ImageView的contentMode(下面介绍这个属性)：
Label的textAligment但是要将他们作为一个整体来控制,就需要Button的属性contentHorizontalAlignment、contentVerticalAlignment

typedef NS_ENUM(NSInteger, UIControlContentVerticalAlignment) {
//垂直方向
UIControlContentVerticalAlignmentCenter = 0, 
UIControlContentVerticalAlignmentTop = 1, 
UIControlContentVerticalAlignmentBottom = 2, 
UIControlContentVerticalAlignmentFill = 3,
};
typedef NS_ENUM(NSInteger, UIControlContentHorizontalAlignment) {
//水平方向 
UIControlContentHorizontalAlignmentCenter = 0, 
UIControlContentHorizontalAlignmentLeft = 1, 
UIControlContentHorizontalAlignmentRight = 2, 
UIControlContentHorizontalAlignmentFill = 3,
};