iOS开发经验(12)-显示模式
目录
- contentMode-显示模式
- 背景图片的拉伸
- textAligment-显示模式
- lineBreakMode-显示模式
- 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,
};
总结所有显示模式的特点：
-
不带
Scale的是较为简单一些,按照这些显示模式来显示,图片会按照原大小来显示,不会被拉伸也不会被压缩，常用的是UIViewContentModeCenter； -
下面着重介绍带有
Scale字眼的模式(图片会被拉伸或者压缩)
带有Scale的三个模式中：
有一个是不带有Aspect字眼的UIViewContentModeScaleToFill
它在拉伸的时候不会按照比例(图片会变形)
然后非常单纯的把整个ImageView填满: -
另外两个带有
Aspect字眼
他们被拉伸的时候图片的比例不会改变(图片不变形)
UIViewContentModeScaleAspectFit,图片会完全显示,图片等比例缩小至宽等于ImageView的宽或者高等于ImageView的高为止。 -
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,
};
