Introduction to iOS Development Series 1.7 - Button

In this section we are going to take a look at the attributes of button. Similarly, create a project named as Intro6.

Change Button Appearance

Place a button on the storyboard at the center as shown below.

While the button is selected, we can examine the attributes at the attribute inspector.

As usual, we can change the text of the button, including the font size and font color. Furthermore, we can also changed the background color.

First we change the name to "Press Here". Change the font size to 20, style to heavy  and font color to red. The changed attribute should be similar to the screenshot below.

Finally, change the background color to yellow.

The resulting button show be as shown below

Button Attributes

Now let's examine the button attributes. We will be only going through with the important or commonly used attributes.

Button Type

The first attributes reflect the type of button. System type is the default as shown in our earlier exercise.

We can select other types, they are:

1. System
2. Detail Disclosure
3. Info Light
4. Info Dark
5. Add Contact
6. Custom

Details Disclosure, Info Light and Info Dark shows the same type of image as shown below:

We will not explore the differences since it is seldom used.

Add Contact type provide different icon image as below

The frequently used types are the system and custom type.

State Config

State Config allow us to set the attribution for when the button is in different state.

The button control have the following state:

• Default - status when program start
• Highlighted - when user is tapping the button
• Selected - when user has tapped the button
• Focused - this happen when there is more than one view. Focused state is enabled when the view is in focused.
• Disabled - self explanatory

However state config only allow us to change settings in default, highlighted, selected and disabled state. Please also note that we are only able to change the text of the button and the text color for different state.

Button Text

This is where we put the text of the button. Please note that we can define different text for different button state.

Font

This is where we set the font, style and size.

Text Color

This is where we change the color of the button text. Please note that we  can define different text color for different button state.

Image and Background

The next section is image.  This section allow us to add an image and we can use such image as button.

In fact, once we add an image to the button, the button type will change to custom instead of system.

Control Section

The control section allow us to set the alignment of the button.

The state section shows that the button is at enabled state. We can set the button to selected state or highlighted state  at the beginning but usually we let user interact with the button.

View Section

Content Mode

If we use custom image as button, sometime the aspect ratio of the image does not match button size, we use scale to fill or scale to fit to adjust the image.

Interaction

Make sure "User Interaction Enabled" is checked, otherwise, there will be no response when user pressed the button.

The rest of the attributes are pretty standard. We will make use of such attribute when necessary.

Changing State

Now we can experiment with different state. Please note that only button text and text color is effective. Remove the background color.

First confirm that the default state is as follows:

Next we set highlighted state as follows:

For selected state:

Now we change the effect by checking and unchecking the state

First at default and enabled state, the button is as follows:

Uncheck enabled. At disabled state, this is what happen to the button

Now we checked enabled and highlighted.

Please note that the text will only appear at the moment we tapped the button.

For enabled and selected state

Please note that while running an app, only default and highlighted state will toggle the change. For selected state, we must enabled them programmatically when user tapped the button.

Customize Button

In this section, we will demonstrate the use of customize button with custom image.

First, we need an image. We have chosen the star image.

Similar image can be found from google images.

On the same project, select the asset folder as shown below

At the lower right corner, click on the + button.

Select New Image Set

Once new image set is selected. The following folder will appear. We rename the folder to buttonImage.

Next, we drag and drop our image to the 2x box.

On the same project, we place another button on the storyboard.

At the attribute page, click on the image attribute. On the drop down list box you should see the label buttonImage. Select buttonImage.

The button will become the image and the type will automatically set to custom.

We almost complete series 1. In the last section, we will combined our basic knowledge and create a working app.

***

Introduction to iOS Development Series 1.6 - Label

Now, we have the basic knowledge of using xcode, storyboard and placing and linking visual object. We will focus on each label and button.

This session, we will focus on label.  The visual object Label belongs to part of the class UILabel. Class is the template of the master code that are design for label. When we create a visual object, we copy the code template from the class (UILabel) so that we do not need to write the same label function again. Once the code template is copied, we can modify certain attribute to suit our need.

Let's create a new projects named as Intro5 details as shown below.

Once we have created the project, place a label on the storyboard.

We can check the size and the position at the size inspector as follows:

Label Attributes

Next, we explore the attributes inspector.

Listed below are some of the attribute that maybe useful to us.

• The most important is the second entry. This is where we put our text label.
• Color - We can change the color of the font. Click on the black box to make changes,
• Font - We can also change the font of the label.
• Alignment - We can set the text of the label to the left justified or centered.
• Lines - This is where we decide how many lines this label can take.
• Line Break - If the text is more than the label can fit. It will truncate. Truncate tail will show 3 dot at the end of text.
• Autoshrink - The default is fixed font size. However, you can set it to scalable so that if the text cannot fit into the label. It will scale down the font. We also have additional check box for us if we want to tighten the letter spacing

If we scroll down, we have additional option which we seldom use. Most of the settings are related to the visual attribute of the label, The only attribute we can try is the background color.

Change Label Attributes

Now let's change the text of label to "Hello World"

Next we change the font color to Red as shown below

The attribute inspector will look like this

We can change the font type of the label. In our case, we just change the font style to Heavy

We also change the font size to 20

We can also change the alignment to center.

Finally, we change the background color to yellow as shown below:

The resulting label is as follows:

Multiline Label

Now. we shift the first label to the top as shown below

Next, drag another label to the center of the storyboard. Drag out the label just fit the width with some offset

Next we set the lines to 3

Next we copy a bunch of text to the attribute

The bunch of text is here:

Lorem ipsum dolor sit er elit lamet, consectetaur cillium adipisicing pecu, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation

Now let's check the label.

It seems that we label only contain 2 lines of text. We need to drag out the vertical of the label. After dragging out, we have 3 lines of text.

No matter how far we drag out, it will still contain 3 lines because this is what we have set.

Now, lets adjust back the label and justify it. Please note that we may need to reposition the label to the center.

If you notice, if the text are more than the number of lines we have stipulate, the label will end with 3 dots. This is known as truncate tail. We can change the behavior to truncate middle

The resulting text is shown below:

Please note that Line Break only work on the last line for multiline label.

What happen if we want to show all text, we can ask the system to shrink the text to fit all. This can be done using autoshrink.

Let change autoshink as shown below:

In this autoshrink setting, we ask the system to shrink the text until size 10. If there are still more text, then it will truncate middle again.

Alternatively, we can use scaling and decide the lowest scaling.

The effect should be similar. Below is the effect of autoshrink

That's all for now in label attributes. There are many advance techniques which is not commonly used. We will explore these additional attributes and advance techniques as and when required.

***