Swift：屏幕顶部添加类UIPageViewController组件及无代码调整UITabBarController位置

Hey there! I get your challenge—rebuilding Twitter's UI using only Main.storyboard and default controls, no code allowed. Let's break down your two main problems with practical, no-code workarounds:

1. Top-Aligned Tabs (Instead of UITabBarController) #

You're right: Apple's UITabBarController locks the tab bar to the bottom by default, and you can't reposition it without code or custom classes. Instead, use a UISegmentedControl to mimic Twitter's top tab bar—this is a default control and works perfectly in Storyboard alone:

• Drag a UISegmentedControl to the top of your main view controller. Set its three segment titles to TOP, MENTIONS, and VERIFIED. Tweak the style (background color, tint color, font) in the Attributes Inspector to match Twitter's look.
• Add three Container Views to your main view controller. Each container will hold the content for one tab (e.g., your feed, mentions list, verified content). Size all containers to fill the screen below the segmented control, and stack them on top of each other.
• By default, set two of the containers to Hidden (check the box in the Attributes Inspector). Only leave the TOP container visible initially.
• To switch between tabs without code:
  1. Select the segmented control, open the Connections Inspector.
  2. Drag from the Value Changed event to each container view.
  3. Choose the Set Hidden action, then toggle the checkbox to show/hide the container based on the selected segment. For example, when MENTIONS is selected, hide the TOP and VERIFIED containers, and show the MENTIONS one.

2. Page-Like Component at the Top #

To create a swipeable, page-style component (like Twitter's top trending carousel) without code, use a UIScrollView paired with a UIPageControl—both are default controls and can be configured entirely in Storyboard:

• Drag a UIScrollView to the desired top area of your view. Enable Paging Enabled in the Attributes Inspector (this makes it snap to full-width pages).
• Calculate your screen width (you can use the size inspector to get the value, e.g., 393pt for iPhone 14). Set the scroll view's Content Size width to 3x screen width (for 3 pages) and height to match your desired component height.
• Add three UIView elements inside the scroll view. Set each view's width to your screen width, height to match the scroll view, and position them side-by-side (no gaps). Fill each view with your content (images, labels, etc.).
• Drag a UIPageControl below the scroll view. Set its Number of Pages to 3 in the Attributes Inspector.
• To link the page control to the scroll view (so it updates as you swipe):
  1. Select the scroll view, open the Connections Inspector.
  2. Drag from the Did End Dragging event to the page control.
  3. Choose the setCurrentPage: action. For simplicity, if you don't mind the page control not updating automatically, you can skip this step—users will still get the smooth page-snapping behavior.

Alternatively, for a more native page view feel, use a UIPageViewController in Storyboard:

• Drag a UIPageViewController into your storyboard. Set its Transition Style to Scroll and Navigation Orientation to Horizontal.
• Create three separate UIViewControllers for your pages. Connect each to the page view controller using a View Controller segue (set a unique identifier for each).
• Set the page view controller's initial view controller to your first page in the Attributes Inspector. Note: Without code, you won't get automatic swipe navigation between pages, but you can add button controls to trigger segues if needed.

内容的提问来源于stack exchange，提问作者Lara