iOS AutoLayout進階(四)Content Hugging Priority和Content Compression Resistance Priority綜合運用

前言

前面兩個章節(jié)給大家詳細介紹了Content Hugging Priority(抗拉伸優(yōu)先級)和Content Compression Resistance Priority(抗壓縮優(yōu)先級),
本文將綜合運用這兩個屬性,來處理一個項目中的實際需求.

一. 要點回顧:

1.Content Hugging Priority

視圖抗拉伸優(yōu)先級,
值越小,視圖越容易被拉伸,

2. Content Compression Resistance Priority:

視圖抗壓縮優(yōu)先級,
值越小,視圖越容易被壓縮,

二.實際運用

我先來看下下面這個效果,在不計算文字寬度和不修改約束的前提下,怎么通過設(shè)置Content Hugging Priority和Content Compression Resistance Priority屬性來實現(xiàn):

Demo.gif

效果描述:

  • 這個是社區(qū)評論頁面里,用戶信息的一部分
  • 最左邊是:用戶圖像
  • 黃色Label:用戶昵稱(昵稱長度不確定)
  • 藍色Label:評論發(fā)表時間(時間長度不確定)

兩點要求:

  • 1.黃色abel(顯示昵稱),其寬度由用戶昵稱長度決定,
    藍色label(顯示時間),其寬度由時間長度決定,
  • 2.當(dāng)用戶昵稱長度變長時,藍色label自動右移,移到屏幕邊緣時,用戶昵稱繼續(xù)增加,昵稱將縮略顯示
    3.當(dāng)用戶昵稱變短時,藍色label自動左移.

三.代碼示例

新建工程,在頁面添加一個view,并添加約束固定位置和大小,
在這個view上添加三個視圖,分別為:

1.imageView,用來顯示用戶圖像
2.黃色label,用來顯示用戶昵稱
3.藍色label,用來顯示時間

并添加如下約束:

imageView:上0,左0,下0,長寬比1:1
黃色label:上0,左0,下0,
藍色label:上0,左0,下0,右0

黃色label和藍色label都不添加寬度約束,其寬度有文字長度決定

添加完約束后,會報下面錯誤:

Demo.png

此錯誤的意思是:

  • 黃色label,和藍色label都是動態(tài)寬度(沒添加寬度約束),
  • 當(dāng)二者寬度之和,大于右側(cè)區(qū)域總寬度時,AutoLayout不知道先壓縮哪個label,
  • 當(dāng)二者寬度之和,小于右側(cè)區(qū)域總寬度時,AutoLayout不知道先拉伸哪個label,
  • 讓我們?yōu)槎咛砑覥ontent Hugging Priority和Content Compression Resistance Priority約束,

下面來添加這兩個約束:

  • 1.很顯然,當(dāng)用戶昵稱過長時,我們希望過長的部分省略顯示(即昵稱過長時,黃色label優(yōu)先被壓縮,其橫向抗壓縮優(yōu)先級要低)
  • 2.當(dāng)用戶昵稱太短時,我們希望藍色label向左側(cè)靠過來.(即昵稱太短時,藍色label向左靠,要被拉長,其橫向抗拉伸優(yōu)先級要低)

下面我們來為黃色label的Content Compression Resistance Priority(抗壓縮優(yōu)先級)橫向優(yōu)先級為749,如下:

黃色label.png

修改藍色label的Content Hugging Priority(抗拉伸優(yōu)先級)橫向優(yōu)先級為250,如下:

藍色label.png

添加完畢后,我們右鍵拖線兩個label生成變量,
并起一個定時器,
依次設(shè)置黃色label文字為:

長昵稱這是一個很長的昵稱
長昵稱這是一個很長的昵
長昵稱這是一個很長的
長昵稱這是一個很長
長昵稱這是一個很
長昵稱這是一個
長昵稱這是一
長昵稱這是
長昵稱這
長昵稱
長昵稱這
長昵稱這是
長昵稱這是一
長昵稱這是一個
長昵稱這是一個很
長昵稱這是一個很長
長昵稱這是一個很長的
長昵稱這是一個很長的昵
長昵稱這是一個很長的昵稱

不需要計算文字寬度,不需要修改約束,就達到上圖效果.

代碼如下:


#import "ViewController.h"

static NSString *const NameText = @"長昵稱這是一個很長的昵稱";
static NSInteger changeLength = -1;//記錄單次變化長度

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UILabel *nameLab;
@property (weak, nonatomic) IBOutlet UILabel *timeLab;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    _nameLab.text = NameText;//初始值
    _timeLab.text = @"一周以前";//初始值

    [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(action) userInfo:nil repeats:YES];
}

-(void)action{
     /** 當(dāng)前昵稱 */
    NSString *name = [NameText substringToIndex:_nameLab.text.length+changeLength];
    NSLog(@"當(dāng)前昵稱:\n%@",name);
    
    _nameLab.text = name;//設(shè)置昵稱
    
    if(_nameLab.text.length<=3){//最小寬度
        changeLength = 1;//加長
    }else if(_nameLab.text.length==NameText.length){//最大寬度
        changeLength = -1;//減短
    }
}


- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

三.小結(jié):

Content Hugging Priority 視圖抗拉伸優(yōu)先級
值越小,越先被拉伸

Content Compression Resistance 抗壓縮優(yōu)先級
值越小,越先被壓縮,

這兩個屬性,在UITableViewCell 自動高度上有著廣泛運用,下一章節(jié)將重點來講,復(fù)雜TableViewCell,在不計算子文字高度情況下,不用第三方TableViewCell自動計算高度框架情況下,怎么實現(xiàn)自動高度.


代碼地址:https://github.com/CoderZhuXH/AutoLayout

相關(guān)閱讀

iOS AutoLayout進階(一)Aspect Ratio
iOS AutoLayout進階(二)Content Hugging Priority
iOS AutoLayout進階(三)Content Compression Resistance Priority
iOS AutoLayout進階(五)UITableViewCell自動高度

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容