Trong bài viết này mình chia sẻ chút về sử dụng Content hugging priority và Content compression resistance priority trong autolayout. Mục đích sử dụng 2 cách autolayout ở trên để chúng ta tận dụng tối đa không gian hiển thị của view một cách linh động.
Tôi đã tham khảo một vài bài viết tương từ về điều này nhưng cách giải thích của họ về điều này khiến tôi khá mơ hồ cho nên tôi viết bài này để trình bày quan điểm cá nhân cũng như cách nhìn nhận của bản thân. Tôi sẽ đi vào từng ví dụ cụ thể để các bạn hiểu rõ hơn.
Khi nào sử dụng Content compression resistance priority?
Layout thông thường
Trường hợp này tôi có 2 label cùng hàng red và blue bị giới hạn trong không gian chiều rộng nhất định. Yêu cầu của bài toán label red sẽ được ưu tiên hơn là label blue cho nên tôi layout cố định chiều rộng của label red như hình bên dưới.
Label red sẽ được ưu tiên rộng hơn để hiển thị nội dung, còn label blue ưu tiên thấp nên sẽ hiển thị 3 chấm ở đằng sau.
Vì trong bài toán cụ thể thì text hiển thị sẽ phụ thuộc vào dữ liệu, vậy nếu trong trường hợp text của label red ngắn hơn thì sao?
Như hình ở bên dưới:
Trong trường này, mặc dù text của label red ngắn hơn nhưng nó vẫn chiếm một khoảng khôn gian như vậy, suy ra sẽ bị lãng phí một khoảng không gian mà label blue vẫn phải hiển thị dạng có 3 chấm ở sau, về mặt thẩm mỹ thì sẽ không đẹp.
Sử dụng Content compression resistance priority
Vì vậy Content compression resistance priority sẽ giúp ta giải quyết vấn đề này. Việc làm của chúng ta rất đơn giản:
- Bỏ autolayout chiều rộng của label red đi
- Cài đặt thuộc tính Horizontal của label red lên 751 (mặc định là 750) trong mục Content compression resistance priority, label blue thì vẫn giữ nguyên. Việc làm này muốn nói rằng nội dung label red được ưu tiên hơn và hiển thị một cách linh động.
Sau khi thực hiện các bước trên thì layout của chúng ta sẽ như hình ảnh minh họa bên dưới:
Khi nào nào sử dụng Content hugging priority?
Auto layout thông thường
Tương tự với Content compression resistance priority, lần này chúng ta sẽ autolayout cho 2 label red và blue nhưng là cùng cột bị giới không gian trong một chiều cao nhất định, như là hình bên dưới:
Trong trường hợp này tôi vẫn ưu tiên label red hơn label blue do vậy text của label red thì được hiển thị đầy đủ còn label blue hiển thị 3 chấm đằng sau.
Nếu trong trường hợp text của label red mà ngắn đi thì xảy ra trường hợp tương tư như ở bên trên là không gian sẽ bị lãng phí mà label blue vẫn phải hiển thị 3 chấm đằng sau.
Do vậy chúng ta sử dụng Content hugging priority
Sử dụng Content hugging priority
- Bỏ layout chiều cao của label red
- Cài đặt thuộc tính Vertical của label red là 252 (mặc định là 251) ở mục Content hugging priority. Điều này thể hiện rằng chúng ta ưu tiên hiển thị cho label red và hiển thị một cách linh động.
Sau khi làm xong các bước trên ta thu được kết quả như hình dưới:
Vẫn trong cùng một không gian nhưng chúng ta có thể hiển thị views linh động và đẹp hơn.
Cảm ơn bạn đã đọc bài viết.
coding69percent 