Circle Views

Display

A family of circular container views for avatars, icons, and badges. All use CoreGraphics to clip to a perfect circle in layoutSubviews.

ClassContentUse Case
TTBaseUICricleViewPlain viewCircle background/container (base class)
TTBaseIconCircleViewAwesomePro iconCircular icon button/avatar placeholder
TTUIImageCircleViewUIImageCircular photo avatar with optional border
TTUIImageFontCircleViewAwesomePro icon (string)Circle with icon font, colored background
TTUIImageFontPaddingViewAwesomePro iconSquare 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 / PropertyClassDescription
setBorder(with:color:)TTBaseUICricleViewAdd colored circular border stroke
iconUIImageTTBaseIconCircleViewSwap the icon view freely
imageCircleViewTTUIImageFontCircleViewAccess the inner icon view
imageViewTTUIImageFontPaddingViewAccess 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.