TTBaseUIView

Core

The fundamental building block. All UIKit views in TTBaseUIKit extend from TTBaseUIView, which itself extends UIView and conforms to ViewDrawer. Provides programmatic-only layout, touch/swipe gesture support, auto keyboard dismiss, skeleton animation hooks, and a clean chainable API.

📋 Declaration

open class TTBaseUIView: UIView, ViewDrawer {
    var viewDefBgColor: UIColor = TTBaseUIKitConfig.getViewConfig().viewDefColor
    var viewDefCornerRadius: CGFloat = TTBaseUIKitConfig.getSizeConfig().CORNER_RADIUS

    open func updateBaseUIView() { }
    public var onTouchHandler: ((_ view: TTBaseUIView) -> Void)?
}

🔄 Lifecycle

init() — Creates a zero-frame view, sets corner radius to 0, calls setupUI() → updateBaseUIView()
init(withCornerRadius:) — Convenience init with custom corner radius
updateBaseUIView() — Override this to customize after init (add subviews, constraints, styling)

Programmatic Only: XIB/Storyboard initializers are marked @available(*, unavailable) — this framework uses programmatic UI exclusively.

🚀 Usage

Basic View with Constraints

let myView = TTBaseUIView()
self.view.addSubview(myView)
myView.setLeadingAnchor(constant: 16)
    .setTrailingAnchor(constant: 16)
    .setTopAnchor(constant: 100)
    .setHeightAnchor(constant: 200)
    .done()

With Corner Radius

let roundedView = TTBaseUIView(withCornerRadius: 12)
roundedView.setBgColor(.systemBlue)

Touch Handling

let tappableView = TTBaseUIView()
tappableView.setTouchHandler()
tappableView.onTouchHandler = { view in
    print("View tapped!")
}

Swipe Gesture

let swipeView = TTBaseUIView()
swipeView.setSwipeHandler(with: .left)
swipeView.onTouchHandler = { view in
    print("Swiped left!")
}

Custom Subclass Pattern

class ProfileCardView: TTBaseUIView {
    let nameLabel = TTBaseUILabel(withType: .TITLE)
    let avatarView = TTBaseUIImageView()

    override func updateBaseUIView() {
        self.setBgColor(.white)
        self.setCorner(withCornerRadius: 16)

        self.addSubview(self.avatarView)
        self.addSubview(self.nameLabel)

        self.avatarView
            .setLeadingAnchor(constant: 16)
            .setTopAnchor(constant: 16)
            .setWidthAnchor(constant: 48)
            .setHeightAnchor(constant: 48)
            .done()

        self.nameLabel
            .setLeadingAnchorWithTargetView(nextToView: self.avatarView, constant: 12)
            .setTrailingAnchor(constant: 16)
            .setCenterYAnchorWithView(ofView: self.avatarView)
            .done()
    }
}

Skeleton Loading

let cardView = TTBaseUIView()

// Show skeleton placeholder
cardView.onAddSkeletonMark()

// After data arrives, remove skeleton
cardView.onRemoveSkeletonMark()

📖 API Reference

Method	Returns	Description
`setTouchHandler()`	`TTBaseUIView`	Enables tap gesture, fires `onTouchHandler`
`setSwipeHandler(with:)`	`TTBaseUIView`	Enables swipe gesture in specified direction
`setCorner(withCornerRadius:)`	`Void`	Sets corner radius and redraws
`setBgColor(_:)`	`TTBaseUIView`	Sets background color (chainable)
`setBorder(withColor:width:)`	`TTBaseUIView`	Adds a visible border
`setShadow(withColor:opacity:radius:offset:)`	`TTBaseUIView`	Applies shadow to view
`setHidden()`	`TTBaseUIView`	Hides view (chainable)
`setNonHidden()`	`TTBaseUIView`	Shows view (chainable)
`onAddSkeletonMark()`	`Void`	Shows skeleton shimmer placeholder
`onRemoveSkeletonMark()`	`Void`	Fades out and removes skeleton
`updateBaseUIView()`	`Void`	Override to customize after init

📐 Constraint Helpers

All TTBaseUIView subclasses inherit the ViewDrawer constraint chainable API:

Method	Description
`setLeadingAnchor(constant:)`	Pin left edge to superview
`setTrailingAnchor(constant:)`	Pin right edge to superview
`setTopAnchor(constant:)`	Pin top edge to superview
`setBottomAnchor(constant:)`	Pin bottom edge to superview
`setTopAnchorWithAboveView(nextToView:constant:)`	Pin top to another view's bottom
`setLeadingAnchorWithTargetView(nextToView:constant:)`	Pin leading to another view's trailing
`setCenterAnchor()`	Center horizontally and vertically in superview
`setCenterXAnchor()`	Center horizontally only
`setCenterYAnchorWithView(ofView:)`	Center Y axis aligned to another view
`setWidthAnchor(constant:)`	Set fixed width
`setHeightAnchor(constant:)`	Set fixed height
`setFullContraints(constant:)`	Pin all 4 edges to superview
`done()`	Ends the constraint chain, sets `translatesAutoresizingMaskIntoConstraints = false`

✨ Key Features

Auto keyboard dismiss — Touches automatically dismiss keyboard (configurable via StyleConfig.isDismissKeyboardByTouchAnyBaseUIView)
Shake animation — Built-in shakeAnimation() on touch for tactile feedback
Programmatic only — XIB init is disabled for consistency and speed
Chainable API — All setters return self for method chaining
Skeleton support — Native onAddSkeletonMark() / onRemoveSkeletonMark()
Used in production — Powers the UI of 12Bay, AiHealth, TMS Mobile and more

Best Practice: Always override updateBaseUIView() to add subviews and constraints. Access self.contentView in ViewControllers, not self.view.

← All UIKit Components TTBaseUILabel →