iOS 9應用開發教程之使用開關滑塊控件以及滾動部署視圖

時間 2019-11-06

標籤 ios 應用開發教程使用開關滑塊控件以及滾動部署視圖欄目 iOS 简体版

原文原文鏈接

iOS 9應用開發教程之使用開關滑塊控件以及滾動部署視圖

使用ios9中的開關、滑塊控件

開關和滑塊也是用於和用戶進行交互的控件。本節將主要講解這兩種控件。ios

ios9開關

開關控件經常使用來控制某個功能的開發狀態，如藍牙、GPS、WiFI信號等。如圖2.29所示就是一個在WiFI中的開關。開關控件通常使用UISwitch來實現。swift

圖2.29 開關ide

【示例2-10】如下將使用開發控件實現手電筒的功能。代碼以下：佈局

import UIKitspa
class ViewController: UIViewController {orm
var isOn:Bool=true對象
override func viewDidLoad() {教程
super.viewDidLoad()接口
// Do any additional setup after loading the view, typically from a nib.事件
//添加開關控件
let mySwitch=UISwitch(frame: CGRectMake(163, 318, 51, 318))
self.view.addSubview(mySwitch)
mySwitch.addTarget(self, action: "switchAction", forControlEvents: UIControlEvents.ValueChanged) //響應開發
self.view.backgroundColor=UIColor.blackColor()
}
func switchAction(){
//判斷開關的狀態
if (isOn) {
self.view.backgroundColor=UIColor.whiteColor() //設置背景顏色
isOn=false
} else {
self.view.backgroundColor=UIColor.blackColor() //設置背景顏色
isOn=true
}
}
……
}

此時運行程序，會看到如圖2.30所示的效果。當開發者將開關滑動到開的狀態後，就打開了燈光，即界面的背景顏色就變爲了白色，如圖2.31所示。

圖2.30 運行效果圖2.31 運行效果

ios9滑塊控件

滑塊控件能夠從一個連續的區間中選擇一個值。例如，能夠控制設備的當前音量、亮度等等。圖2.32中就顯示了兩個滑塊控件，其中一個控制設備的亮度，另外一個控制設備的音量。通常使用UISlider來實現滑塊控件。

圖2.32 滑塊

【示例2-11】如下經過滑塊控件實現調節屏幕亮度的功能。具體的操做步驟以下：

（1）建立一個Single View Application模板類型的項目，命名爲UISlider。

（2）打開Main.storyboard文件，在主視圖中添加一個空白視圖，空白視圖的位置爲(0, 0, 375, 614)。爲空白視圖聲明和關聯插座變量，變量名稱爲myView。

（3）打開ViewController.swift文件，編寫代碼。此代碼實現的功能是調節屏幕亮度。代碼以下：

import UIKit
class ViewController: UIViewController {
@IBOutlet weak var myView: UIView!
let mySlider=UISlider(frame: CGRectMake(0, 625, 376, 31))
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
self.view.addSubview(mySlider)
mySlider.value=0.5 //設置滑塊控件當前的值
myView.alpha=CGFloat(mySlider.value) //設置空白視圖的透明度
mySlider.addTarget(self, action: "sliderAction", forControlEvents: UIControlEvents.ValueChanged) //實現響應
}
func sliderAction(){
myView.alpha=CGFloat(mySlider.value) //設置空白視圖的透明度
}
……
}

此時運行程序，會看到如圖2.33所示的效果。當開發者滑動滑塊控件中的滑塊就能夠對屏幕的亮度進行調節了，如圖2.34所示。

圖2.33 運行效果圖2.24 運行效果

屏幕滾動視圖——ios9滾動視圖

因爲iPhone或者是iPad屏幕邊界的影響，使咱們添加的控件和界面元素受到限制。可是在iPhone或者iPad開發中，人們使用滾動視圖解決了這一受到限制的問題。滾動視圖由UIScrollView類的一個實例對象實現。

【示例2-12】如下將使用滾動視圖實現標籤的滾動。代碼以下：

import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
//添加滾動視圖
let myScroller=UIScrollView(frame: CGRectMake(0, 0, 375, 667))
myScroller.contentSize=CGSizeMake(375, 10000) //設置滾動範圍的大小
self.view.addSubview(myScroller)
var y: CGFloat = 10
var i=1
for (i;i<=100;i++) {
//添加標籤對象
let mylabel=UILabel()
mylabel.frame=CGRectMake(3, y, 375, 50)
mylabel.text="\(i)"
myScroller.addSubview(mylabel)
y+=100
}
}
……
}

此時運行程序，會看到如圖2.35所示的效果，當開發者滑動屏幕，會看到滾動視圖實現的滾動，如圖2.36所示。

圖2.35 運行效果圖2.36 運行效果

注意：滾動視圖中須要注意如下點

1.經常使用屬性

滾動視圖的屬性有不少，表2-7就總結了滾動視圖經常使用的一些屬性。

2-7 滾動視圖的屬性

2.滾動視圖經常使用事件

在滾動視圖中通常會使用到一些事件。這裏將經常使用到的一些事件作了總結，如表2-8所示。

表2-8 滾動視圖經常使用事件

iOS 9新增——部署視圖

同以往的iOS同樣，iOS 9爲開發者以及用戶帶來了不少的新特性。其中，比較特別的是部署視圖，它將從根本上改變開發者在iOS上建立用戶界面的方式。部署視圖提供了一個高效的接口，用於平鋪一行或一列的視圖組合。部署視圖通常使用UIStackView視圖。

【示例2-13】如下將實現相似淘寶上評分的效果。具體的操做步驟以下：

（1）建立一個Single View Application模板類型的項目，命名爲UIStackView。

（2）打開Main.storyboard文件，在主視圖中添加一個Vertical Stack View視圖和一個Horizontal Stack View視圖。

（3）爲Vertical Stack View視圖添加約束（約束描述了視圖間的幾何關係），即height=350，width=375。添加約束的具體步驟以下：

首先，選中要添加約束的視圖，即Vertical Stack View視圖。

而後，選擇pin圖標，如圖2.37所示。

圖2.37 選中pin圖標

彈出Add New Constraints對話框，如圖2.38所示。

圖2.38 Add New Constraints對話框

最後，在輸入框中輸入內容後，在對應項前面打對勾，按下回車後，約束就添加到了Horizontal Stack View視圖中。

（4）爲Horizontal Stack View視圖添加約束，即height=60，width=375。

（5）添加視圖對象到Vertical Stack View視圖和Horizontal Stack View視圖中，以及對主視圖中的視圖對象進行設置，如圖2.39所示。

圖2.39 主視圖效果

須要添加的視圖以及對它們的設置如表2-9所示。

表2-9 對視圖對象的設置

（6）打開ViewController.swift文件，編寫代碼，此代碼實現的功能是輕拍按鈕，改變按鈕的標題和顏色。代碼以下：

import UIKit
class ViewController: UIViewController {
@IBOutlet weak var button1: UIButton!
@IBOutlet weak var button2: UIButton!
@IBOutlet weak var button3: UIButton!
@IBOutlet weak var button4: UIButton!
@IBOutlet weak var button5: UIButton!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
}
//觸摸按鈕改變第一個按鈕的標題和顏色
@IBAction func action1(sender: AnyObject) {
self.addstar(button1)
}
//觸摸按鈕改變第一個按鈕和第二個按鈕的標題和顏色
@IBAction func action2(sender: AnyObject) {
self.addstar(button1)
self.addstar(button2)
}
//觸摸按鈕改變第一個按鈕、第二個按鈕和第三個按鈕的標題和顏色
@IBAction func action3(sender: AnyObject) {
self.addstar(button1)
self.addstar(button2)
self.addstar(button3)
}
//觸摸按鈕改變第一個按鈕、第二個按鈕、第三個按鈕和第四個按鈕的標題和顏色
@IBAction func action4(sender: AnyObject) {
self.addstar(button1)
self.addstar(button2)
self.addstar(button3)
self.addstar(button4)
}
//觸摸按鈕改變所有按鈕的標題和顏色
@IBAction func action5(sender: AnyObject) {
self.addstar(button1)
self.addstar(button2)
self.addstar(button3)
self.addstar(button4)
self.addstar(button5)
}
//改變按鈕的標題以及顏色
func addstar(button:UIButton){
button.setTitle("★", forState: UIControlState.Normal)
button.setTitleColor (UIColor.orangeColor(), forState: UIControlState.Normal)
}
……
}

此時運行程序，會看到如圖2.40所示的效果。當開發者觸摸按鈕後，會看到相似點亮星星的效果，如圖2.41所示。

圖2.40 運行效果圖2.41 運行效果

注意，在示例中Vertical Stack View視圖和Horizontal Stack View視圖都屬於佈局視圖，只是他們平鋪視圖的方式不一樣。Vertical Stack View視圖用於平鋪一列視圖組合；Horizontal Stack View視圖用於平鋪一行視圖組合。在使用這些視圖時，遇到的屬性如表2-10所示。

表2-10 Stack View視圖的屬性

本文選自：iOS 9應用開發基礎教程大學霸內部資料，轉載請註明出處，尊重技術尊重IT人！