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表示拉伸的部位是以何种方式显示,有平铺和拉伸两种选择,分别为UIImageResizingModeTileUIImageResizingModeStretch,其中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

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

UIControl
UIButton
UITextField

使用较为常见的就是Button的内容显示模式,Button里面有ImageViewLabel两个子控件需要显示。
我们可以分别设置常用的ImageViewcontentMode(下面介绍这个属性):
LabeltextAligment但是要将他们作为一个整体来控制,就需要Button的属性contentHorizontalAlignmentcontentVerticalAlignment

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

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,019评论 4 62
  • 初学者经常纠结于各种控件的各种显示模式,居中还是居上靠左还是靠右? 在此彻底总结一下: textAligment:...
    王技术阅读 6,882评论 4 10
  • 项目中常常会遇到字数统计计算问题,多行文本限制最大长度问题。最常见的计算方法是:中文字符算两个字,英文字符算一个字...
    _二向箔_阅读 1,867评论 0 2
  • 无意中打开歌单,发现自己的曲库真是皱巴的可怜。仅有的十几首歌艰难的支撑着门面,可能你会说我无病呻吟,也可能会说我文...
    吴世升飞阅读 20,607评论 47 120
  • 挣扎了几分钟,本打算不写了,但想想自己当初立下的承诺,每天千字,差点到第七天因为房子的事情搞得愁肠满腹,但也还是要...
    Ivy0927阅读 267评论 0 0