Skip to main content

(Kinh nghiệm) Auto layout và Size classes trong iOS - Phần 2

Ở phần 1 mình đã hướng dẫn căn bản về Auto Layout và Size Classes, nếu bạn chưa biết gì về Auto Layout trên iOS xin hãy xem qua phần 1 tại đây. Phần 2 này mình xin đi chi tiết về cách dùng những constraint khi làm Auto Layout.

  • Tab thứ 1 (Align): Tab này giúp chúng ta canh chỉnh đối tượng này theo đối tượng kia, vì thế ta phải chọn từ 2 đối tượng này trở lên thì mình mới có thể sử dụng được. Lưu ý: Trước tên có icon để minh hoạ từng chức năng. 
- Leading Edges: Dùng để canh 2 đối tượng đó theo cạnh bên trái.
- Trailing Edges: Dùng để canh 2 đối tượng đó theo cạnh bên phải.
- Top Edges: Dùng để canh 2 đối tượng đó theo cạnh ở trên.
- Bottom Edges: Dùng để canh 2 đối tượng đó theo cạnh ở dưới.
- Horizontal Centers: Dùng để canh 2 đối tượng đó ở chính giữa theo chiều ngang.
- Vertical Centers: Dùng để canh 2 đối tượng đó ở chính giữa theo chiều dọc.
- Baselines: Dùng để canh 2 đối tượng đó theo đường cố định. Mình thường dùng cái này để canh chỉnh Label. Để xem thêm thông tin Baseline xin xem thêm tại đây.


Horizontal Centers in Container: Dùng để canh 1 hoặc 2 đối tượng đó ở chính giữa đối tượng cha chứa nó, theo chiều ngang.
Vertical Centers in Container: Dùng để canh 1 hoặc 2 đối tượng đó ở chính giữa đối tượng cha chứa nó, theo chiều dọc.

Khi nhấn vào checkbox của Update Frames sẽ ra màn hình như bên dưới: 
Chức năng này dùng để chúng ta update lại frame theo những thông số constraint mà mình sẽ tạo.
- None: Không cập nhật
- Items of New Constraints: Chỉ cập nhật những frame có liên quan đến đối tượng này và những đối tượng khác có liên quan đến đối tượng sắp được thêm vào.
- All Frames in Contrainer: Cập nhật tất cả những frame trong khung chứa này luôn.

  • Tab thứ 2 (Pin): Tab này giúp chúng ta cố định những đối tượng vào những đối tượng khác ( ví dụ như view cha, hoặc những đối tượng con nằm kế bên,...). Bạn nên ưu tiên pin đối tượng từ trên xuống dưới hay từ dưới lên trên.
- 4 ô textfields ở mỗi hướng chỉ vị trí hiện tại đang cách đối tượng gần nó bao nhiêu, nếu ta muốn khoảng cách bao nhiêu thì ta có thể nhập số vào từng ô tương ứng và chọn những hướng mình muốn pin nó vào (hiện tại chưa chọn nên màu nhạt).
- Constrain to margins: Checkbox này dùng để pin đối tượng này so với đường margin của đối tượng, mặc định đường margin này có giá trị là 16 ppi. Vì thế mặc dù mình đang cách bên trái là 20 ppi nhưng trên hình hiển thị chỉ có 4 ppi.
Lưu ý: Theo mình mọi người không nên dùng chức năng này để canh chỉnh vì có thể sẽ bị crash ứng dụng khi chạy trên iOS 7 và iOS 8, ngoài ra chúng ta sẽ dễ bị lẫn lộn khoảng cách padding giữa đối tượng hiện tại và cạnh margin hoặc cạnh của view cha. Có người giải thích không dùng UIView.layoutMargins và UIView.preservesSuperviewLayoutMargins  thì sẽ không bị crash ứng dụng, nguồn tại đây. Nếu ứng dụng của bạn viết từ iOS 8 trở lên thì bạn có thể dùng chức năng này, và bạn có thể dễ dàng thiết lập lại giá trị mặc định của margin.
- Width: sẽ cố định chiều rộng của đối tượng này theo giá trị trong ô.
- Height: sẽ cố định chiều cao của đối tượng này theo giá trị trong ô.

- Equal Widths: chỉ tác dụng khi bạn chọn từ 2 đối tượng trở lên, thuộc tính này quan trọng vì thế các bạn nên chú ý. Thuộc tính này sẽ cố định chiều rộng của 2 đối tượng theo tỷ lệ, mặc định tỷ lệ giữa 2 đối tượng là bằng nhau. Chúng ta có thể thay đổi tỷ lệ của 2 đối tượng đó như sau:
Ví dụ: Giả sử mình có Label A (W:100 ppi) có chiều rộng bằng một nửa chiều rộng của Label B (W:200 ppi) thì ban đầu mình chọn 2 đối tượng này và mình dùng thuộc tính 'Equal Widths' nó sẽ hiển thị như hình bên dưới:
Những báo hiệu màu cam của từng đối tượng là nó báo bạn đã config sai chiều rộng của 2 đối tượng này là 100 ppi, vì thế bạn chọn vào constraint của thuộc tính này nó sẽ hiển thị thông tin như trên tab Size Inspector. Trong đây bạn nên chú ý những thuộc tính như First Item, Relation, Second Item, và Multiplier. First Item của mình là Label A, và Second Item là Label B, vì thế mình sẽ chọn quan hệ (Relation) theo quan hệ nhỏ hơn hoặc bằng (Less Than or Equal) và tỷ lệ của nó là một nửa vì thế trong ô Multiplier mình sẽ đánh giá trị là 0.5. Sau khi mình config xong thì XCode sẽ không báo warning nữa và hình như sau:
Tuỳ theo First Item và Second Item là gì mình sẽ chỉnh những thông số thích hợp. Priority cũng rất quan trọng cho việc sắp xếp thứ tự ưu tiên giữa những constraint với nhau, bạn thiết lập sao cho uyển chuyển và làm chính xác giao diện mình mong muốn là được. Priority có 3 mức độ là 1000 là Required, 750 là High và 250 là Low.


Equal Heights: chỉ tác dụng khi bạn chọn từ 2 đối tượng trở lên, thuộc tính này quan trọng. Thuộc tính này sẽ cố định chiều cao của 2 đối tượng theo tỷ lệ, mặc định tỷ lệ giữa 2 đối tượng là bằng nhau.
- Aspect Ratio: thuộc tính này sẽ canh tỷ lệ giữa chiều cao và chiều rộng của 1 đối tượng hoặc chiều cao của đối tượng này với chiều rộng của đối tượng kia. Để khi kích thước đối tượng cha thay đổi thì sẽ tăng giảm theo tỷ lệ này.
- Align: giống như tab Align.
- Update Frame: tương tự trong tab Align.
  • Tab thứ 3 (Resolve Auto Layout Issues): Tab này giúp chúng ta sửa những lỗi trên layout. Tab này rất quan trọng, vì thế các bạn cũng nên chú ý những phím tắt để có thể thao tác chỉnh sửa cho nhanh.
Tại đây có 2 phần là 'Selected Views': chỉ tác động trên những view mình đang chọn. Và 'All Views in View Controller' sẽ tác động tất cả những view trong ViewController.
- Update Frames: khi bạn thay đổi giá trị Constaint của constraint thì bạn để ý XCode sẽ cảnh báo kích thước những đối tượng không đúng và sai bao nhiêu, bạn muốn chỉnh sửa những đối tượng đó chính xác theo những constraint bạn đã sửa lại thì bạn dùng chức năng này sẽ tự động canh chỉnh những đối tượng đó.
- Update Constraints: sẽ thay đổi lại giá trị Constaint theo vị trí hiện tại của đối tượng đó. Thuộc tính này ngược so với thuộc tính Update Frames.
- Add Missing Constraints: sẽ thêm những constraints còn thiếu để đảm bảo tính chính xác giữa những đối tượng và XCode sẽ không báo error hay warning về constraints.
- Resert to Suggested Constraints: sẽ xoá những constraints được thêm khi bạn dùng chức năng 'Add Missing Constraints'
- Clear Constraints: xoá tất cả những constraints hiện tại. Khi bạn muốn thiết lập lại toàn bộ thì nên dùng chức năng này để xoá cho nhanh.

Công cụ dùng để viết: XCode 6.3, iOS 8.3

Tài liệu tham khảo:
Cconstrain-to-margin-in-storyboard-in-xcode-6
- What's new in Interface Builder in WWDC 2014.

Comments

Popular posts from this blog

Phân biệt biến kiểu Property, Public, Protected, Private trong ngôn ngữ Objective C

- Theo kinh nghiệm làm việc của mình với các bạn trong nhóm khi lập trình Objective-C và cũng đọc qua code của những project cũ. Ít khi nào mọi người để ý và khai báo đúng với ý đồ của từng đối tượng, và vi phạm quy tắc tính đóng gói, tính bảo mật thông tin của đối tượng trong lập trình hướng đối tượng (Tham khảo lý thuyết Lập trình hướng đối tượng tại trang Wiki ). - Theo ngôn ngữ lập trình Java, người ta khuyến khích mỗi khi dùng biến kiểu public thì nên đặt 1 biến private và hỗ trợ những hàm getter/setter để truy suất biến private đó.     + Nguyên nhân họ nói là đảm bảo tính đóng gói, và nếu sau này có thay đổi gì trên biến đó bạn có thể sửa được dễ dàng, chi tiết về vấn đề này ở đây .     + Nói tóm tại thì nguyên nhân chính là có thể kiểm soát được truy xuất đến giá trị của 1 đối tượng từ bên ngoài, có thể dễ dàng mở rộng code bằng cách override lại những hàm getter/setter. - Các bạn có thể áp dụng nguyên tắc đó từ bên Java qua ngôn ngữ lập trình Object...

(Kinh nghiệm) Auto layout và Size classes trong iOS - Phần 1

Trước đây khi viết những ứng dụng chạy trên nhiều màn hình hoặc hỗ trợ màn hình xoay ngang, xoay dọc mọi người hay dùng code để có thể chỉnh được những vị trí cũng như kích thước của những đối tượng. Hoặc có thể dùng Autosizing để tự động canh chỉnh những đối tượng nhưng không tối ưu và tiện lợi cho lắm, hình minh hoạ ở dưới: Vì thế từ lúc Apple phát hành ra iPhone 5, iPhone 5s với kích thước màn hình là 4 inch, làm phát sinh thêm vấn đề " Làm thế nào ta có thể thiết kế giao diện có thể chạy được trên nhiều màn hình? " mà không làm thay đổi nhiều code để có thể dễ dàng bảo trì ứng dụng. Apple mới phát triển chức năng Auto Layout và Size Classes để thực hiện nhiệm vụ này. Nếu bạn đã quen dùng Autosizing để thiết kế giao diện thì bạn có thể vẫn sử dụng chúng. Nhưng tuỳ theo từng dự án mà khách hàng hay người PM hoặc leader của bạn muốn bạn dùng công nghệ mới Auto Layout và Size Classes   để làm layout trên iOS mà không cần dùng bất cứ đoạn code nào và chỉ viết trên 1 storyboard...

(Căn bản) Bài 1: Hướng dẫn tạo tài khoản Apple ID và iTune không cần thẻ Visa hoặc MasterCard

Nếu bạn muốn lập trình trên iOs hoặc trên MacOs thì bạn nên có tài khoản Apple ID và tài khoản iTune. Sẽ hữa ích cho bạn khi cài đặt và nân cấp chương trình XCode. Nhưng khó khăn ở chỗ nếu bạn không có thẻ Visa hoặc Master Card, mà vẫn muốn có tài khoản để có thể cài ứng dụng trên AppStore. Sau đây mình xin hướng dẫn cách tạo tài khoản mà không cần những thẻ đó và có thể tạo tài khoản trên những store ở các nước khác. Đầu tiên bạn mở chương trình iTune lên và vào tab "App Store", sau đó bạn kiếm chương trình nào Free và nhấn vào đó nó sẽ hiển thị ra màn hình như sau:    Khi đang ở màn hình này bạn nhấn vào chữ "Free" bên dưới hình sẽ hiển thị ô cho bạn nhập Apple ID và Password.Vì bạn chưa có nên hãy nhấn vào nút "Create Apple ID" để tạo tài khoản. Sau khi bạn nhấn vào nút "Create Apple ID" bạn sẽ qua màn hình như bên dưới. Tại đây bạn có thể chuyển AppStore của các nước (Vì có những chương trình chỉ cài được trên từng AppStore mỗi nước thôi) hi...