[iOS] Tạo ảnh profile bo tròn tương tự ứng dụng G+ trên iPhone/iPad.

Bạn đã từng thấy những ứng dụng mạng xã hội hay bo tròn ảnh cá nhân của người dùng bo tròn lại trông rất bắt mắt không?
Cách thiết kế đơn giản nhưng ấn tượng, phù hợp với phong cách "flat design" hiện nay chắc chắn sẽ có khá nhiều ấn tượng tốt với người sử dụng. Bạn nên áp dụng kiểu thiết kế này kèm với một số tông màu và font chữ đơn giản sẽ khiến ứng dụng của mình trở nên chuyên nghiệp hơn!

Để làm được điều này, trước tiên bạn cần có một View để hiển thị ảnh, đơn giản và thuật tiện nhất là UIImageView rồi :)
Bạn không cần phải mất thời gian cho việc tạo project, tìm ảnh và kết nối các View vào file header đâu! Mình đã chuẩn bị sẵn cho bạn rồi! Chỉ cần tải project mình làm sẵn về thôi :)

Sau khi tải về, bạn mở project ra sẽ thấy file .xib mình đã tạo sẵn 2 UIImageView, 1 UIImageView ảnh bìa có tên photoCover và một ảnh đại diện photoProfile.

Ảnh bìa và ảnh đại diện, mình đã set 2 ảnh cho nó rồi, lúc này bạn vào Navigation chọn đến file ViewController.m để xem implement. Các hàm trong file main không có gì thay đổi, vì mình chỉ tạo interface và bố trí các views trên file xib thôi. Bạn run thử project.

Bây giờ, mình muốn nhắc đến CALayer, bạn có thể chưa nghe nói về lớp này. Nhưng mình chắc rằng, bạn đã từng dùng nó để viết một hay nhiều ứng dụng nào đó rồi. Mỗi một view trong UIKit (chẳng hạn như UIView, UIImageView) đều được hỗ trợ từ một lớp thể hiện CALayer (ví dụ như đối tượng .layer). Đối tượng layer được thiết kể để quản lý bề mặt giao diện các view và handle các animation. Đối tượng layer cung cấp một số thuộc tính cho view, cụ thể là:

• Background color
• Border và border width
• Shadow color, width,...
• Opacity
• Corner radius

Thuộc tính Corner radius sẽ giúp bạn thực hiện bo tròn ảnh cũng như đây là mục đích của bài hướng dẫn này. Corner radius là một thuộc tính của lớp layer.

Trong hàm viewDidLoad, method đoạn sau cho đối tượng photoProfile:

[_photoProfile setClipsToBounds:YES];

[_photoProfile.layer setCornerRadius:_photoProfile.frame.size.width/2];

Với mỗi một view bạn tạo ra, đối tượng được tạo sẽ có vài thuộc tính được cài đặt sẵn giúp bạn hiển thị view một cách bình thường. Tuy nhiên, lúc này bạn cần phải thay đổi một vài thuộc tính và cần phải implement ra để thay đổi trị mặc định. Để cắt một ảnh theo hình tròn bao quanh, bạn cần lấy bán kính hình tròn bằng cách chia nữa độ rộng của UIImageView ra. Nói một cách thực tế là: nếu bức ảnh của bạn có độ rộng là 100 pixels thì bạn set bán kính cho nó là 50 pixels.

Tiếp theo, bạn cần dùng method clipsToBounds set cho nó là YES để lớp layer được thể hiện.

Lúc này, bạn run thử app:

Thật là đơn giản phải không?? Chỉ cần 2 dòng code, hình ảnh của bạn đã được cắt tròn lại! Trông đẹp mắt phải không nào!!!

Bạn có thể thử đặt lại giá trị cho cornerRadius thành '10.0f' xem có gì thay đổi không :)

Bây giờ, bạn lại tiếp tục dùng lớp Layer để tạo viền cho UIImageView nhé! Việc tạo viền cũng chỉ mất 2 dòng code thôi: set độ rộng cho viền và set màu sắc cho viền:

[_photoProfile.layer setBorderColor:[UIColor whiteColor].CGColor];

[_photoProfile.layer setBorderWidth:3.0f];

Sau khi set, bạn thử build ứng dụng xem thử thay đổi:

Bạn có thấy bài viết này hữu ích không? Mọi thắc mắc, hãy bình luận bên dưới nhé!