您的位置:首页 > 产品设计 > UI/UE

[IOS]UIKit控件使用总结

2016-06-28 17:47 435 查看

UIKit控件使用总结

从今天开始,我将会通过视频学习IOS各种组件并且把相应的实现方法及代码收录整理起来。这个过程并简单,但我愿意好好地系统学习一下IOS,为以后开发项目做准备。

Label

The UILabel class implements a read-only text view. You can use this class to draw one or multiple lines of static text, such as those you might use to identify other parts of your user interface. The base UILabel class provides support for both simple and complex styling of the label text. You can also control over aspects of appearance, such as whether the label uses a shadow or draws with a highlight. If needed, you can customize the appearance of your text further by subclassing.

Label
组件通常情况下只用来做静态显示,当然如果需要的话是可以进行自定义组件的。具体的功能见
reference


点击事件可以直接通过拖拽进编辑框,然后写入相应时间代码。每种点击的方式是不一样的,可以通过reference进行查找。

segmented Control

A UISegmentedControl object is a horizontal control made of multiple segments, each segment functioning as a discrete button. A segmented control affords a compact means to group together a number of controls.

segment
表示有多少个选项,每一个选项都可以分别被编辑,
selected
表示被选中,所有的选项中,只有一个能被选中。

@IBOutlet weak var Segment_1: UISegmentedControl!
@IBAction func Segment_Act(sender: AnyObject) {
NSLog("Click in the \(Segment_1.titleForSegmentAtIndex(Segment_1.selectedSegmentIndex)!)")
}


选中每一项所对应的操作

@IBAction func Segment_Act(sender: AnyObject) {
switch sender.selectedSegmentIndex {
case 0:
view.backgroundColor = UIColor.blackColor()
case 1:
view.backgroundColor = UIColor.blueColor()
default:
view.backgroundColor = UIColor.redColor()
}
}


增加和删除segment的选项

//  Already connected to the storyboard.
@IBOutlet weak var Segment_1: UISegmentedControl!
@IBOutlet weak var TextInfo: UITextField!

@IBAction func Segment_add(sender: AnyObject) {
let info = TextInfo.text
var i = 0
while i != Segment_1.numberOfSegments {
if info == Segment_1.titleForSegmentAtIndex(i) {
let Controller = UIAlertController(title: "Sorry", message: "This section has already existed", preferredStyle: UIAlertControllerStyle.Alert)
let CancelAction = UIAlertAction(title: "Try again!", style: UIAlertActionStyle.Cancel, handler: nil)
Controller.addAction(CancelAction)
self.presentViewController(Controller, animated: true, completion: nil)
return
}
i += 1
}
Segment_1.insertSegmentWithTitle(info, atIndex: Segment_1.numberOfSegments, animated: true)
}

@IBAction func Segment_Remove(sender: AnyObject) {
let info = TextInfo.text
var i = 0
while i <= Segment_1.numberOfSegments {
if info == Segment_1.titleForSegmentAtIndex(i) {
Segment_1.removeSegmentAtIndex(i, animated: true)
return
}
i += 1
}
let Controller = UIAlertController(title: "Sorry", message: "This section doesn't exist!", preferredStyle: .Alert)
let CancelAction = UIAlertAction(title: "Try Again", style: .Cancel, handler: nil)
Controller.addAction(CancelAction)
self.presentViewController(Controller, animated: true, completion: nil)
}


textField

可以设置是否出现
keyboard
,和他的
style
。编辑结束之后的自动隐藏键盘的代码实现:可以把view整个作为
uicontrol
, 然后对他进行事件响应。

@IBAction func FinishEdit(sender: AnyObject) {
TextInfo.resignFirstResponder()
}

@IBAction func TouchBackGround(sender: AnyObject) {
TextInfo.resignFirstResponder()
}


slider

追踪变化值

@IBOutlet weak var Image: UIImageView!
@IBOutlet weak var SliderValue: UISlider!
@IBAction func SliderButton(sender: UISlider) {
Image.alpha = CGFloat(sender.value)
}


设置状态下的图标

/**
You can set image for slider for some state.
*/
override func viewDidLoad() {
super.viewDidLoad()
SliderValue.setThumbImage(UIImage(named: "santa"), forState: UIControlState.Normal)
SliderValue.setMaximumTrackImage(UIImage(named: "snowflake-1"), forState: UIControlState.Normal)
SliderValue.setMinimumTrackImage(UIImage(named: "santa"), forState: UIControlState.Normal)
SliderValue.setThumbImage(UIImage(named: "deer"), forState: UIControlState.Normal)
SliderValue.setThumbImage(UIImage(named: "santa"), forState: UIControlState.Highlighted)
}


UIswitch

有一个最关键的属性是
on
是一个Bool值,并且他触发的事件为
ValueChange


Activity indicator view

Use an activity indicator to show that a task is
in progress
. An activity indicator appears as a “gear” that is either spinning or stopped.

一个作为等待的旋转控件。

@IBOutlet weak var Av: UIActivityIndicatorView!
Av.startAnimating()
Av.stopAnimating()


ProgressView

You use the UIProgressView class to depict the progress of a task over time. An example of a progress bar is the one shown at the bottom of the Mail application when it’s downloading messages.

progress
属性可以显示当前位置。

// According to the changing time, progress view will changed the value as time goes by.
@IBOutlet weak var Progress: UIProgressView!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
Progress.progress = 0
NSTimer.scheduledTimerWithTimeInterval(1, target: self, selector: #selector(ViewController.ProgressChanged(_:)), userInfo: nil, repeats: true)
}
func ProgressChanged(sender : NSTimer) {
Progress.progress += 0.1
if Progress.progress >= 1 {
Progress.progress = 0
}
}


解释一下
NSTimer.scheduledTimerWithTimeInterval
这个函数。

NSTimer.scheduledTimerWithTimeInterval(<#T##ti: NSTimeInterval##NSTimeInterval#>, target: <#T##AnyObject#>, selector: <#T##Selector#>, userInfo: <#T##AnyObject?#>, repeats: <#T##Bool#>)


NSTimeInterval : 时间间隔,为浮点数

target : 为目标,可以写为self

selector:相当于函数指针。这个函数类型为
void funcName(NSTimer * info)
相当于放入一个NSTimer的对象即可。如果要参数,就要加上
:
.

userInfo:信息,可以写为nil

repeats:是否可以重复。

Stepper

A stepper control provides a user interface for incrementing or decrementing a value. A stepper displays two buttons, one with a minus (“–”) symbol and one with a plus (“+”) symbol.

@IBOutlet weak var Stepper: UIStepper!
@IBAction func StepperWalk(sender: UIStepper) {
TextInfo.text = NSString(format: "%g", sender.value) as String
}


Image

A UIImageView object displays a single image or a sequence of animated images in your interface. Image views let you efficiently draw any image that can be specified using a UIImage object. For example, you can use this class to display the contents of many standard image files, such as JPEG and PNG files. You can configure image views programmatically or in your storyboard file and change the images they display at runtime. For animated images, you can also use the methods of this class to start and stop the animation and specify other animation parameters.

获取图片信息的方法有很多种,最简单的是直接放入工程项目,另外还有通过URL获取图片路径然后进行显示。

简单动画

UIImage提供了一些简单的动画如下:

public var image: UIImage? // default is nil
@available(iOS 3.0, *)
public var highlightedImage: UIImage? // default is nil
public var userInteractionEnabled: Bool // default is NO

@available(iOS 3.0, *)
public var highlighted: Bool // default is NO

// these allow a set of images to be animated. the array may contain multiple copies of the same

public var animationImages: [UIImage]? // The array must contain UIImages. Setting hides the single image. default is nil
@available(iOS 3.0, *)
public var highlightedAnimationImages: [UIImage]? // The array must contain UIImages. Setting hides the single image. default is nil

public var animationDuration: NSTimeInterval // for one cycle of images. default is number of images * 1/30th of a second (i.e. 30 fps)
public var animationRepeatCount: Int // 0 means infinite (default is 0)

// When tintColor is non-nil, any template images set on the image view will be colorized with that color.
// The tintColor is inherited through the superview hierarchy. See UIView for more information.
@available(iOS 7.0, *)
public var tintColor: UIColor!

public func startAnimating()
public func stopAnimating()
public func isAnimating() -> Bool


具体操作如下:

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
Progress.progress = 0
NSTimer.scheduledTimerWithTimeInterval(1, target: self, selector: #selector(ViewController.ProgressChanged(_:)), userInfo: nil, repeats: true)
Image.animationImages = [UIImage(named: "deer")!, UIImage(named:"santa")!, UIImage(named:"snowflake-1")!]
Image.animationDuration = 1
Image.animationRepeatCount = 100
Image.startAnimating()
}


AlterVIew

Alert views display a concise and informative alert message to the user. Alert views convey important information about an app or the device, interrupting the user and requiring them to stop what they’re doing to choose an action or dismiss the alert. For example, iOS uses alerts to warn the user that battery power is running low, so they can connect a power adapter before their work is interrupted. An alert view appears on top of app content, and must be manually dismissed by the user before he can resume interaction with the app.

Action sheets display a set of buttons representing several alternative choices to complete a task initiated by the user. For example, when the user taps the Share button in an app’s toolbar, an action sheet appears offering a list of choices, such as Email, Print, and so on.

Picker

@IBAction func DateTIme(sender: UIDatePicker) {
let format = NSDateFormatter()
var str = format.stringFromDate(sender.date)
}


TableView 使用说明

cell内容无法显示

当cell内容为static cell时,要把
tableView
中的
content
属性修改为
static cell
,这样才能正常的显示,同时要把相应的函数注释掉。

cell转换不同的view

override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
//  DetailView become corresponding View class.
let DetailView = self.storyboard?.instantiateViewControllerWithIdentifier("Detail") as! ViewController
//  and it can access the properties.
DetailView.Info = "This is \(indexPath.row)"
self.navigationController?.showViewController(DetailView, sender: nil)
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: