Circle Views
DisplayA family of circular container views for avatars, icons, and badges. All use CoreGraphics to clip to a perfect circle in layoutSubviews.
| Class | Content | Use Case |
|---|---|---|
TTBaseUICricleView | Plain view | Circle background/container (base class) |
TTBaseIconCircleView | AwesomePro icon | Circular icon button/avatar placeholder |
TTUIImageCircleView | UIImage | Circular photo avatar with optional border |
TTUIImageFontCircleView | AwesomePro icon (string) | Circle with icon font, colored background |
TTUIImageFontPaddingView | AwesomePro icon | Square view with padded icon (not circle) |
🚀 Usage
// Plain circle view (use as avatar container)
let circle = TTBaseUICricleView()
circle.backgroundColor = .systemBlue
circle.setWidthAnchor(constant: 56).setHeightAnchor(constant: 56)
// Circle with border
let bordered = TTBaseUICricleView(withBorder: 2, color: .systemGray4)
bordered.backgroundColor = .white
// Icon circle (person icon on primary bg)
let iconCircle = TTBaseIconCircleView(with: 0.6) // 60% icon multiplier
iconCircle.backgroundColor = TTView.buttonBgDef
iconCircle.setWidthAnchor(constant: 48).setHeightAnchor(constant: 48)
// Use a different icon
iconCircle.iconUIImage = TTBaseUIImageFontView(
withFontIconLightSize: .camera,
sizeIcon: CGSize(width: 60, height: 60),
colorIcon: .white,
contendMode: .scaleAspectFill
)
// Photo avatar from UIImage
let avatarView = TTUIImageCircleView()
avatarView.image = UIImage(named: "profile_photo")
avatarView.setWidthAnchor(constant: 56).setHeightAnchor(constant: 56)
// Avatar with white border
let avatarWithBorder = TTUIImageCircleView(withBorder: 2, color: .white)
avatarWithBorder.image = user.profileImage
// Circled font icon with colored bg
let iconView = TTUIImageFontCircleView(
with: AwesomePro.Light.heart.rawValue,
iconColor: .white,
bgColor: .systemRed,
paddingContent: 10
)
// Padded icon in square view
let paddedIcon = TTUIImageFontPaddingView(
with: .bell,
iconColor: TTView.iconColor,
bgColor: .systemGroupedBackground,
paddingContent: 8
)
📖 API Reference
| Method / Property | Class | Description |
|---|---|---|
setBorder(with:color:) | TTBaseUICricleView | Add colored circular border stroke |
iconUIImage | TTBaseIconCircleView | Swap the icon view freely |
imageCircleView | TTUIImageFontCircleView | Access the inner icon view |
imageView | TTUIImageFontPaddingView | Access the inner icon view |
Pro Tip: Always constrain
width == height for circle views — they clip in layoutSubviews using the actual frame, so non-square dimensions will create an oval instead of a circle.