TTBaseUIImageView
CoreEnhanced 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
| Method | Returns | Description |
|---|---|---|
setActiveOnTouchHandle() | TTBaseUIImageView | Enable user interaction + tap gesture |
onTouchHandler | Closure? | Tap callback |
setImageByName(name:) | Void | Load image from asset catalog |
setImage(with:scale:) | TTBaseUIImageView | Set image + content mode (chainable) |
setIConImage(with:color:scale:size:) | TTBaseUIImageView | Set AwesomePro icon by string name |
setIConImage(with:color:scale:size:) | TTBaseUIImageView | Set AwesomePro icon by enum (type-safe) |
setIconStyle(with:iconColor:padding:) | Void | Set bg color + icon tint + padding at once |
setCorner(withCornerRadius:) | TTBaseUIImageView | Apply corner radius |
setBgColor(_:) | TTBaseUIImageView | Set background color |
setIconColor(_:) | TTBaseUIImageView | Tint image with color |
setIconPadding(_:) | TTBaseUIImageView | Add padding around image |
paddingContentImage | CGFloat | Alignment rect inset for content padding |
onAddSkeletonMark() | Void | Show shimmer skeleton loading overlay |
onRemoveSkeletonMark() | Void | Remove skeleton with fade animation |
setAnimalForSkeletonView() | Void | Save image + show placeholder (for scroll animation) |
setRollBackViewForSkeletonAnimal() | Void | Restore 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.