TTBaseUIImageView

Core

Enhanced UIImageView subclass with configurable corner radius, skeleton loading animation, icon tint/padding support, AwesomePro font icon rendering, optional touch handler, and a fully chainable API. Defaults to .scaleAspectFill with clipsToBounds = true.


🏗 Initializers

// Empty (use setImage later)
let imgView = TTBaseUIImageView()

// With corner radius
let roundedImg = TTBaseUIImageView(withCornerRadius: 12)

// From asset name + content mode
let bannerImg = TTBaseUIImageView(imageName: "hero_banner", contentMode: .scaleAspectFill)

// From asset + corner + content mode
let avatarImg = TTBaseUIImageView(
    withCornerRadius: 40,       // Full circle if width==height
    imageName: "user_avatar",
    contentMode: .scaleAspectFill
)

// Icon view with AwesomePro + padding
let iconImg = TTBaseUIImageView(
    withIconView: "fa-bell",
    contendMode: .scaleAspectFit,
    corner: 8,
    padding: 4
)

🚀 Usage

Image from Asset / Name

let profileImage = TTBaseUIImageView(withCornerRadius: 50)
profileImage.setImageByName(name: "profile_placeholder")
profileImage.contentMode = .scaleAspectFill

// Chainable
let bannerImg = TTBaseUIImageView()
    .setImage(with: "hero_image", scale: .scaleAspectFill)
    .setCorner(withCornerRadius: 16)

AwesomePro Icon Image

// By string name
let bellIcon = TTBaseUIImageView()
bellIcon.setIConImage(
    with: "fa-bell",
    color: .systemBlue,
    scale: .scaleAspectFit,
    size: CGSize(width: 32, height: 32)
)

// By AwesomePro enum (type-safe)
let settingsIcon = TTBaseUIImageView()
settingsIcon.setIConImage(
    with: .gear,
    color: .systemGray,
    size: CGSize(width: 24, height: 24)
)

Icon Style (Background + Color + Padding)

// Quick icon style setup
let iconView = TTBaseUIImageView(withCornerRadius: 8)
iconView.setIconStyle(
    with: UIColor.systemBlue.withAlphaComponent(0.1),  // bg
    iconColor: .systemBlue,
    padding: 8
)

Skeleton Loading

let productImage = TTBaseUIImageView(withCornerRadius: 12)

// Show shimmer placeholder while loading
productImage.onAddSkeletonMark()

// Remove after image is loaded
URLSession.loadImage(url) { image in
    productImage.image = image
    productImage.onRemoveSkeletonMark()
}

// For TableView/CollectionView scroll animations
productImage.setAnimalForSkeletonView()      // save current image, show placeholder
productImage.setRollBackViewForSkeletonAnimal()  // restore saved image

Touch Handler

let thumbnailImg = TTBaseUIImageView(withCornerRadius: 8)
thumbnailImg.setImageByName(name: "video_thumb")
thumbnailImg.setActiveOnTouchHandle()
thumbnailImg.onTouchHandler = { imgView in
    // Open full screen viewer
    presentFullScreen(imgView.image)
}

📖 API Reference

MethodReturnsDescription
setActiveOnTouchHandle()TTBaseUIImageViewEnable user interaction + tap gesture
onTouchHandlerClosure?Tap callback
setImageByName(name:)VoidLoad image from asset catalog
setImage(with:scale:)TTBaseUIImageViewSet image + content mode (chainable)
setIConImage(with:color:scale:size:)TTBaseUIImageViewSet AwesomePro icon by string name
setIConImage(with:color:scale:size:)TTBaseUIImageViewSet AwesomePro icon by enum (type-safe)
setIconStyle(with:iconColor:padding:)VoidSet bg color + icon tint + padding at once
setCorner(withCornerRadius:)TTBaseUIImageViewApply corner radius
setBgColor(_:)TTBaseUIImageViewSet background color
setIconColor(_:)TTBaseUIImageViewTint image with color
setIconPadding(_:)TTBaseUIImageViewAdd padding around image
paddingContentImageCGFloatAlignment rect inset for content padding
onAddSkeletonMark()VoidShow shimmer skeleton loading overlay
onRemoveSkeletonMark()VoidRemove skeleton with fade animation
setAnimalForSkeletonView()VoidSave image + show placeholder (for scroll animation)
setRollBackViewForSkeletonAnimal()VoidRestore saved image

⚙️ Configuration

// Corner radius for images uses CORNER_IMAGE config
TTBaseUIKitConfig
    .withDefaultConfig()
    .withSizeConfig(
        TTBaseUIKitSizeConfig(CORNER_IMAGE: 8)
    )
    .start()

// Default icon color for setIConImage
TTBaseUIKitConfig
    .withDefaultConfig()
    .withViewConfig(
        TTBaseUIKitViewConfig(iconColor: .systemBlue)
    )
    .start()
Pro Tip: Chain setCorner(withCornerRadius: size/2) with a fixed-size constraint to create perfect circle avatars. Use paddingContentImage to add visual breathing room around icons without changing the frame.