Add and customize a view of the Xamarin iOS tutorial

Xamarin iOS Tutorial Add and customize view Xamarin iOS user interface--view

In the iphone or ipad, the user sees the view. Views are an important component of the user interface. For example, when you want to enable a user to implement text input, you need to use the view of the input text, and the view that displays the image when you want the user to display the image. This chapter will give developers a detailed explanation of how to build a view.

Xamarin iOS View

In application development, the most common views are shown in table 2-1.

Table 2-1 Common views

Xamarin iOS Add and customize views

This section focuses on two ways to add views: one is to use interface Builder, and one is to use code. It also explains how to customize views and more.

Xamarin IOS uses interface Builder to add views

Adding a view using Interface Builder is a fairly simple task. The following example will explain to the developer how to add a view using Interface Builder.

"Example 2-1 the following will add a view using Interface Builder, as follows:

(1 Create a single View application type of project named 2-1.

(2 Open the Mainstoryboard.storyboard file, select the toolbar button on the far right of Xamarin studio to open the toolbar interface (view | pads| toolbar). Drag the View blank view object from the toolbar to the main display, as shown in 2.1.

Figure 2.1 Operation steps

Note: A blank view is added to the view at this point.

(3 ) Save the file (Command+s), click the "Run" button, and the iOS emulator will run with the results, as shown in 2.2.

Figure 2.2 Running effect

Because the default background color of the view blank view added with Interface Builder is white, the effect is not visible on the emulator. So how do you see the added view blank views on the emulator? The developer needs to go back to the Mainstoryboard.storyboard file and select the view blank view object that is added on the main page. Then, select the Properties button on the far right of the Xamarin studio to open the Properties interface (View | Pads| " Properties command). Set the view's Background property to ScrollView textured Background color,2.3 as shown.

Figure 2.3 Operation Step

Note: When you change the Background property, the color of the selected view object will also find a corresponding change. Run effect 2.4 as shown.

Figure 2.4 Running effect

At this point, you can see the added view on the iOS emulator. This example of ours has no effect. It just shows the developer how to add a view using Interface Builder.

Note: View blank views are the most frequently used by developers for the following reasons:

(1 Each visual View object is inherited from the UIView class.

(2 ) provides auto-sizing capabilities.

(3) UIView can manage content rendering.

(4 because it is a container, you can accept other views as its child views.

(5 ) can accept touch events for itself and its child views.

(6 Many of its properties can be animated.

Xamarin iOS uses code to add views

What if developers want to use code to add views to the main view? The following will solve this problem for developers. To add views to the main view using code, you need to implement 3 steps.

1. Materialized View objects

Each view is a specific class. In C #, it's often said that a class is an abstract concept, not a specific thing, so you instantiate the class. The specific syntax for instantiating a View object is as follows:

• View class object name =new view class ();

In the first view we contacted, for example, it instantiated the object as follows:

• UIView vv=new UIView ();

Where UIView is the class of a blank view, and VV is an object instantiated by the UIView class.

2. Set the location and size of the view

Each view is a region, so you need to set the location and size for this area. Set the position and size of the property as frame, which has the following grammatical form:

• The name of the object. Frame=new RectangleF (X, Y, width,height);

where x and y represent the position of the view in the main master, and width and height represent the size of the view. The following is an instantiated object VV set location and size:

• vv. Frame = new RectangleF (0, 0, 320, 580);

where 0 and 0 represent the position in the main view of the views, 320 and 580 represent the size of this view.

Note: Step 1 and Step 2 can also be merged. For example, the following code merges an instantiated object and a set location size for the UIView class:

• UIView vv = new UIView (new RectangleF (0, 0, 200, 200));

3. Add a view to the current view

Finally, the most critical step is to add the instantiated object to the main view. So that it can be displayed. You need to use the Addsubview () method at this point, which has the following syntax:

• This. View.addsubview (View object name);

The following adds the instantiated object vv to the current main view, the code is as follows:

• This. View.addsubview (VV);

Example 2-2 the following will use code to add a view blank view to the main page. The code is as follows:

• Using System;
• Using System.Drawing;
• Using Monotouch.foundation;
• Using Monotouch.uikit;
• Namespace Application
• {
• public partial class __2viewcontroller:uiviewcontroller
• {
• ...//This omits the construction method and the destructor method of the View controller (the basic function of the view controller is to handle the interaction with the view, which we will explain later)
• #region View Lifecycle
• public override void Viewdidload ()
• {
• Base. Viewdidload ();
• UIView vv = new UIView (); Instantiating an Object
• VV.                             Frame = new RectangleF (0, 0, 580); To set the size and position of a View object
• This .    View.addsubview (VV); //Add a View object to the current view
• }
• ...//This omits some methods before and after view loading and unloading
• #endregion
• }
• }

Run effect 2.5 as shown.

The added view is also not visible in this run effect. This is because the added view defaults to a white background, and if you want to see the view, you need to set its background. For example, the following code sets the background color to light gray:

• vv.                                                                          BackgroundColor = Uicolor.lightgray; Set the background to light gray

Run effect 2.6 as shown.

Figure 2.5 Run effect Figure 2.6 run effect

Xamarin iOS Delete view

With the addition of a view, there will be a delete of the view. If the developer does not need to add a view, it can be deleted using the Removefromsuperview () method, which has the following syntax:

• The name of the View object to delete. Removefromsuperview ();

Example 2-3 The following code adds two views in the main view, and then uses the Removefromsuperview () method to delete one of the views. The code is as follows:

• Using System;
• Using System.Drawing;
• Using Monotouch.foundation;
• Using Monotouch.uikit;
• Namespace Application
• {
• public partial class __15viewcontroller:uiviewcontroller
• {
• ...//This omits the construction method and the destructor method of the view controller.
• #region View Lifecycle
• public override void Viewdidload ()
• {
• Base. Viewdidload ();
• Perform any additional setup after loading the view, typically from a nib.
• Instantiate and set the View object Vv1
• UIView vv1 = new UIView ();
• Vv1. Frame = new RectangleF (0, 20, 320, 250);
• Vv1. BackgroundColor = Uicolor.cyan;
• This. View.addsubview (VV1);
• Instantiate and set the View object Vv2
• UIView vv2 = new UIView ();
• Vv2. Frame = new RectangleF (0, 300, 320, 250);
• Vv2. BackgroundColor = Uicolor.orange;
• This. View.addsubview (VV2);
• }
• ...//This omits some methods before and after view loading and unloading
• #endregion
• }
• }

Run effect 2.7 as shown.

Figure 2.7 Running effect

If you want to delete the View object VV1, you need to use the Removefromsuperview () method, the code is as follows:

• VV1.               Removefromsuperview (); //Delete View Object Vv1

Run effect 2.8 as shown.

Figure 2.8 Running effect

The location and size of the Xamarin iOS view

When a view is added to the main master using Interface Builder, its location and size can be set using drag, or it can be set using the layout in the properties, as shown in 2.9.

Note: By default, the origin of the coordinate system is in the upper-left corner and extends toward the bottom and right, as shown in 2.10.

Figure 2.9 Setting the position and size Figure 2.10 system coordinates

In addition to using the two methods above to change the position and size of the view, you can also programmatically change. However, it is important to note that the default coordinate system origin cannot be changed in the form of programming.

Xamarin iOS reposition View

Repositioning the view sets the size and position of the views again after the device rotates. This can improve the user experience. Repositioning the view requires the use of the Willrotate () method, which has the following syntax:

• public virtual void Willrotate (Uiinterfaceorientation tointerfaceorientation, double duration)

Where tointerfaceorientation is the interface direction, duration is the time of rotation.

"Example 2-4" The following will implement the relocation functionality of the view, with the following code:

• Using System;
• Using System.Drawing;
• Using Monotouch.foundation;
• Using Monotouch.uikit;
• Namespace Application
• {
• public partial class __31viewcontroller:uiviewcontroller
• {
• UIView vv = new UIView ();
• ...//This omits the construction method and the destructor method of the view controller.
• #region View Lifecycle
• public override void Viewdidload ()
• {
• Base. Viewdidload ();
• Perform any additional setup after loading the view, typically from a nib.
• VV.                             Frame = new RectangleF (0, 0, 320, 580); to set the size and position of a View object
• vv. Backgroundcolor=uicolor.brown;
• This. View.addsubview (VV);
• }
• ...//This omits some methods before and after view loading and unloading
• #endregion
• }
• }

When you run the program, you see the effect shown in 2.11.

Figure 2.11 Running effect

The view in Figure 2.11 does not implement the repositioning feature. The better program if not relocated after the device rotation, will reduce the user's experience, if you want to achieve the repositioning function, you need to use the Willrotate () method, the code is as follows:

• public override void Willrotate (Uiinterfaceorientation tointerfaceorientation, double duration)
• {
• Uiinterfaceorientation destorientation = tointerfaceorientation;
• if (destorientation = = uiinterfaceorientation.landscapeleft|destorientation== Uiinterfaceorientation.landscaperight) {
• vv. Frame = new RectangleF (0, 0, 568, 320);
• } else {
• vv. Frame = new RectangleF (0, 0, 320, 568);
• }
• }

When you run the program, you see the effect shown in 2.12.

Figure 2.12 Running effect

This article is selected from: Xamarin iOS Development Combat University PA Internal information, reproduced please indicate the source, respect the technology respect the IT person!

Add and customize a view of the Xamarin iOS tutorial