1. Home
  2. Docs
  3. iOS
  4. UI Controls

UI Controls

In iOS development, UI controls are visual elements used to create interactive user interfaces. These controls allow users to interact with your app through touch, gestures, or input. Here’s a list of common UI controls available in UIKit and SwiftUI, along with their purposes:


Common UI Controls in UIKit

  1. Labels (UILabel)
    • Displays a static or dynamic text string.
    • Commonly used for headings, instructions, or descriptions.
  2. Buttons (UIButton)
    • Responds to user taps to trigger an action or event.
    • Customizable with text, images, and background colors.
  3. Text Fields (UITextField)
    • Allows users to input a single line of text.
    • Useful for forms, search bars, or login screens.
  4. Text Views (UITextView)
    • A scrollable, multi-line text input area.
    • Commonly used for long-form text entry or displaying large text content.
  5. Image Views (UIImageView)
    • Displays images within the app.
    • Supports static or animated images.
  6. Switches (UISwitch)
    • Represents an ON/OFF toggle state.
    • Commonly used for settings or preferences.
  7. Sliders (UISlider)
    • Allows users to select a value from a continuous range by sliding a knob.
    • Often used for volume or brightness controls.
  8. Steppers (UIStepper)
    • Provides increment and decrement buttons for adjusting a numeric value.
    • Useful for settings like quantity or zoom levels.
  9. Activity Indicators (UIActivityIndicatorView)
    • Displays a spinning wheel to indicate ongoing processes like loading or fetching data.
  10. Progress Views (UIProgressView)
    • Shows the progress of a task as a horizontal bar.
    • Commonly used for file uploads or downloads.
  11. Segmented Controls (UISegmentedControl)
    • Displays multiple segments (options) that users can select from.
    • Often used for filters or mode switches.
  12. Pickers (UIPickerView)
    • Allows users to select a value from a list, displayed as a spinning wheel.
    • Commonly used for selecting dates, times, or custom values.
  13. Date Pickers (UIDatePicker)
    • Specialized picker for selecting dates and times.
    • Supports multiple modes (date, time, countdown).
  14. Collection Views (UICollectionView)
    • Displays a grid or custom layout of items.
    • Flexible for creating photo galleries, dashboards, or custom lists.
  15. Table Views (UITableView)
    • Displays a list of items in a single column.
    • Useful for menus, settings, or lists.
  16. Stack Views (UIStackView)
    • Arranges views in a horizontal or vertical stack.
    • Simplifies the creation of adaptive and flexible layouts.
  17. Scroll Views (UIScrollView)
    • Enables scrolling for content that doesn’t fit within the visible screen area.
  18. Web Views (WKWebView)
    • Displays web content directly in your app.
    • Powered by WebKit.
  19. Toolbars (UIToolbar)
    • A horizontal bar of actionable buttons or controls.
    • Commonly used at the bottom of the screen.
  20. Navigation Bars (UINavigationBar)
    • Displays a bar at the top of the screen with a title and navigation buttons.
    • Essential for navigation-based apps.
  21. Tab Bars (UITabBar)
    • Provides a navigation interface with multiple tabs at the bottom of the screen.
  22. Alerts and Action Sheets (UIAlertController)
    • Displays pop-up messages to inform users or ask for input.
    • Supports buttons for user responses.

Common UI Controls in SwiftUI

SwiftUI simplifies UI creation with declarative syntax. Here are the equivalent and additional controls:

  1. Text
    • Displays a piece of text, similar to UILabel.
  2. Button
    • Represents a tappable button, similar to UIButton.
  3. TextField
    • Allows single-line text input, similar to UITextField.
  4. SecureField
    • A text field designed for secure password entry.
  5. Image
    • Displays images, similar to UIImageView.
  6. Toggle
    • A switch control for ON/OFF states, similar to UISwitch.
  7. Slider
    • A slider for selecting values, similar to UISlider.
  8. Stepper
    • Increments or decrements values, similar to UIStepper.
  9. ProgressView
    • Displays task progress, similar to UIProgressView.
  10. Picker
    • A customizable picker, replacing UIPickerView.
  11. DatePicker
    • A picker for dates and times, replacing UIDatePicker.
  12. ScrollView
    • Enables scrolling content, similar to UIScrollView.
  13. NavigationView
    • A container that manages navigation bars and hierarchical views, replacing UINavigationBar.
  14. TabView
    • Implements a tab bar interface, similar to UITabBar.
  15. List
    • Displays a scrollable list of items, similar to UITableView.
  16. Form
    • A grouped layout for collecting user inputs, commonly used in settings or forms.
  17. Alert
    • Displays alerts and action sheets.
  18. Spacer
    • Adds flexible space between UI elements.
  19. HStack, VStack, ZStack
    • Layout containers for arranging views horizontally, vertically, or stacked.
  20. GroupBox
    • Provides a visually distinct container for grouping content.

Conclusion

Both UIKit and SwiftUI offer a wide variety of controls to create intuitive and visually appealing user interfaces. For beginners, focus on simple controls like buttons, labels, and text fields. As you progress, explore more complex controls like TableViews, CollectionViews, and custom layouts.

Let me know if you’d like a deeper explanation of any specific control!

Articles