今回の課題では、過去に香港の蝋人形館で撮影した有名人との写真を使用して完成させます。

インターフェースの設計

まず、StoryboardにUIImageViewを追加して写真を表示し、UILabelを追加して名前を表示し、UISegmentedControlを追加して異なる写真を選択し、UIPageControlを追加して現在のページの位置を指示します。

IBOutletとIBActionの作成

これらのUIコンポーネントをViewControllerに接続し、IBOutletとIBActionとして接続します。これにより、コード内でこれらのコンポーネントにアクセスして操作することができます。

@IBOutlet weak var imageShow: UIImageView!
@IBOutlet weak var nameSegament: UISegmentedControl!
@IBOutlet weak var picturePage: UIPageControl!
@IBOutlet weak var nameShow: UILabel!

UIの初期化と更新

ViewControllerのviewDidLoadメソッドでUIコンポーネントを初期化します。updateUIメソッドを作成して、画像、名前、選択コントロール、ページコントロールの現在の状態を更新します。

override func viewDidLoad() {
super.viewDidLoad()
}

func updateUI() {
imageShow.image = UIImage(named: name[index])
nameShow.text = name[index]
nameSegament.selectedSegmentIndex = index
picturePage.currentPage = index
}

ユーザーインタラクションの処理

selectPicture、changePageControll、pre、nextメソッドを実装してbuttonとスワイプのインタラクションを処理し、updateUIメソッドを呼び出してUIを更新します。

@IBAction func selectPicture(_ sender: Any) {
// indexを更新してupdateUIを呼び出す
}

@IBAction func changePageControll(_ sender: Any) {
// indexを更新してupdateUIを呼び出す
}

@IBAction func pre(_ sender: Any) {
// indexを更新してupdateUIを呼び出す
}

@IBAction func next(_ sender: Any) {
// indexを更新してupdateUIを呼び出す
}

成果：