Scribd
Upload
47 views

Xcode Basic UI Element Note UCTI

IOS assignment

Uploaded by

RaabiahMukadam
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
47 views

Xcode Basic UI Element Note UCTI

IOS assignment

Uploaded by

RaabiahMukadam
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

To create a project

1. Launch Xcode
2. Create new project
a. Welcome to Xcode window - Select Create a new Xcode project
b. File > New > Project
3. Choose Single View Application template
4. Configure the project
a. Product name: Your project name
b. Device : Specifies the type of device you app going to run on.
c. Click next to specify the location to save your project.
To build the interface
1. Select the UI elements from the object library tab and drag it onto the
storyboard.
a. Adding a label
i. Drag and drop an label from the object library onto the scene
ii. Click the label and rename it or configure it under attribute inspector
iii. Configure (attribute inspector):
Text attribute (2 row) : rename the label
Alignment : To set the alignment
Line : number of maximum line
Font : format
Autoshrink : resize the font size to fit into the label
b. Adding a Text Field
i. Drag and drop an Text Field from the object library onto the scene
ii. Click the label and rename it or configure it under attribute inspector
iii. Configure (attribute inspector):
Text attribute (2 row) : content in the text field
Alignment : To set the alignment
Font : format
Min Font Size: minimum font size in the text field
Adjust to fit : Adjust the font to fit into the text field
Secure Text Entry : Hide the character => for password
View > Background: Background color for the text field
c. Adding a Button
i. Drag and drop an button from the object library onto the scene
ii. Click the button to label it or configure it under attribute inspector
iii. Configure (attribute inspector):
Type: button type
Title (2nd row) : label the button (name)
Font : format
Image : image as the button
background : adding image on to the button background
view > background : color the button

d. Adding Text Area


i. Drag and drop an Text View from the object library onto the scene
ii. Text view comes with default content. You can leave it or delete
the content, if you wish to.
iii. Configure (attribute inspector):
Text (2nd row) : content of the Text Area
Font : format
Alignment : Set the content alignment
Behaviour > editable: able to type insidethe text Area
Behaviour > Selectable : able to select the content in the text
area
e. Add imageView
i. Create an image set
Drag image from finder window onto the Xcassets > AppIcon, or
Right click > new image set, Drag image from finder into here, or
Drag image from finder into the project folder
ii. Drag and drop an image view from the object library onto the scene
iii. Attribute inspector > Image view select the image name from the
image drop down
f. Adding a Slider
i. Drag and drop an Slider from the object library onto the scene
ii. Attribute Configure:
Set the slider minimum value, current value and maximum value
Min / max image: set the image as max / min

Sample Coding in Viewcontroller.swift


Label
Label ( outlet)
@IBOutlet weak var lblmsg: UILabel!
InAction
lblmsg.textColor = UIColor.blackColor()
lblmsg.backgroundColor = UIColor.whiteColor()
lblmsg.text = txtmsg.text
lblmsg.font = lblmsg.font.fontWithSize(30)
Button
button (action)
@IBAction func btnact(sender: UIButton) {
deactivatebutton.enabled = true
activatebutton.enabled = false
lblmsg.textColor = UIColor.blackColor()
lblmsg.backgroundColor = UIColor.whiteColor()

}
outlet
@IBOutlet weak var deactivatebutton: UIButton!

TextField
TextField (outlet)
@IBOutlet weak var txtmsg: UITextField!
InAction
Lblmsg.text = tstmsg.text
txtmsg.text = xyz
txtname.backgroundColor = UIColor.redColor()
TextArea
Text Area (outlet)
@IBOutlet weak var textview: UITextView!
InAction
textview.text = "Part 3"
textview.textColor = UIColor.redColor()
textview.scrollEnabled = false
ImageView
imageView Outlet
@IBOutlet weak var UIIV1: UIImageView!
InAction
Through programming (not using attribute inspector to set the pic)
override func viewDidLoad() {
super.viewDidLoad()
let imageview = UIImageView(image: UIImage(named: "img1.png"))
UIIV1.frame = imageview.frame
UIIV1.addSubview(imageview)
}
To add more than 1 image and perform animation
To create an array
var imagelist : [UIImage] = [UIImage(named: "img1.png")!, UIImage(named:
"img2.png")!, UIImage(named: "img3.png")!]
or
var imagelist = [UIImage]()
for i in 1 ... 3

{
let imagename = "img\(i).png"
imagelist.append(UIImage(named: imagename)!)
}
To start and stop animation using button
@IBAction func Start(sender: UIButton) {
UIIV1.animationImages = imagelist
UIIV1.animationDuration = NSTimeInterval.abs(5)
UIIV1.startAnimating()
}
@IBAction func Stop(sender: UIButton) {
UIIV1.stopAnimating()
}
Slider
Slider Outlet
@IBOutlet weak var slider1: UISlider!
InAction
@IBAction func SliderAction(sender: UISlider) {
var cssize = "Current slider : "
cssize += String (Int (sender.value))
lblvalue.text = cssize
}
Stepper (+-)
Stepper Outlet
@IBOutlet weak var step1: UIStepper!
InAction
@IBAction func stepAction(sender: UIStepper) {
self. lblcurrentvalue = Float (sender.value)
}
Switch
InAction
@IBAction func Switch1(sender: UISwitch) {
if sender.on
{
//on coding
}else
{
//off coding
}
}

Segment
InAction
@IBAction func SelectionClick(sender: UISegmentedControl) {
if sender.selectedSegmentIndex == 0 {
//action on selecting first segment
}else if sender.selectedSegmentIndex == 1 {
//action on selecting second segment
}else if sender.selectedSegmentIndex == 2 {
//action on selecting third segment
}
}
Pop up an alertnotification
Alert message
var popupmsg = "Alert Message : "
popupmsg += txtmsg.text!
let notification = UIAlertController(title: "Notification", message: popupmsg,
preferredStyle: UIAlertControllerStyle.Alert) // alert
let notificationOk = UIAlertAction(title: "OK", style: UIAlertActionStyle.Default,
handler: nil)
notification.addAction(notificationOk)
self.presentViewController(notification, animated: true, completion: nil)
ActionSheet
Same as Alert Message just change the
let notification = UIAlertController(title: "Notification", message: popupmsg,
preferredStyle: UIAlertControllerStyle.ActionSheet)
Add the action for each button.
let notificationOk = UIAlertAction(title: "ok", style: UIAlertActionStyle.Default) {
(action) -> Void in
self.view.backgroundColor = UIColor.whiteColor()
}
Add Text field to the alertnotification
notification.addTextFieldWithConfigurationHandler(nil)
Get text field value from alertnotification
self.text1 = (notification.textFields!.first)!.text!

You might also like