iOS Development-ui from getting started to mastering (i)
Source: Internet
Author: User
<span id="Label3"></p><p><p><span style="font-size: 18px;">first, UI Overview</span></p></p><p><p>(1) UI (user Interface), The user can see a variety of page elements;</p></p><p><p>(2) IOS App = a variety of UI controls + business logic and algorithms;</p></p><p><p>(3) to develop a beautiful application, you need to master the use of a variety of UI Controls.</p></p><p><p><span style="font-size: 18px;">second, UIWindow</span></p></p><p><p> <span style="font-size: 16px;">1. What is window?</span></p></p><p><p>(1) widow is a window, each app needs to display the content to the user through window;</p></p><p><p>(2) in ios, use the UIWindow class to represent a window, typically an application that creates only one UIWindow object;</p></p><p><p>(3) Window's main function is to present the content to the user, we do not do too much to the WINDOW.</p></p><p><p> <span style="font-size: 16px;">2. How to create window?</span></p></p><p><p>(1) when creating a window, you need to specify the size of the WINDOW.</p></p><p><p>(2) the size of the window (frame) is usually the same size as the screen (uiscreen).</p></p><p><p>Example Code: Self.window = [[uiwindow alloc] initwithframe:[[uiscreen mainscreen] bounds]];</p></p><p><p> <span style="font-size: 16px;">3. Add one thing: create a project process</span> :</p></p><p><p>(1) COMMAND + SHIFT + N->ios under the Application->empty Application. Click Next.</p></p><p><p>(2) loss? Product Name, Click Next.</p></p><p><p>(3) Select the project save path and click Create.</p></p><p><p> <span style="font-size: 16px;">4. How does window render content? Below we will introduce uiview;</span></p></p><p><p><span style="font-size: 18px;">third, UIView</span></p></p><p><p> <span style="font-size: 16px;">1. What is view?</span></p></p><p><p>(1) View: represents a rectangular area on the Screen. Use UIView to represent views in iOS</p></p><p><p>(2) It is popular to say that all kinds of UI controls belong to VIEW.</p></p><p><p>(3) different controls represent different kinds of view. All the things you can see in iOS are view or its subclasses.</p></p><p><p> <span style="font-size: 16px;">2. How do I create a view?</span></p></p><p><p>(1) the steps to create the view are as Follows:</p></p><p><p>① opens up space and initializes the view (gives view position and size when initialized)</p></p><p><p>② Some settings on the view (for example, background Color)</p></p><p><p>③ Adding a view to a window for display</p></p><p><p>④ releasing a View object</p></p><p><p>(2) View Creation Code:</p></p><p><p>UIView *blueview = [[UIView alloc]initwithframe:cgrectmake (100, 100, 120, 100)];</p></p><p><p>Blueview.backgroundcolor = [uicolor bluecolor];</p></p><p><p>[self.window addsubview:blueview];</p></p><p><p>[blueview release];</p></p><p><p> <span style="font-size: 16px;">3. What is frame?</span></p></p><p><p>(1) frame is an important attribute of view, which is the key to the layout of views, which determines the size and position of the VIEW.</p></p><p><p> <span style="font-size: 16px;">4, How to fully control the size and location of the view? Below we will introduce the iOS coordinate system;</span></p></p><p><p> <span style="font-size: 16px;">5. iOS Coordinate system:</span></p></p><p><p>(1) iOS provides a planar coordinate system for LAYOUT. The Upper-left corner is the origin of the coordinate system.</p></p><p><p>(2) horizontal Right: The positive direction of X.</p></p><p><p>(3) vertical Downward: The positive direction of Y.</p></p><p><p>(4) the coordinate system is not based on pixels, but on "point".</p></p><p><p><span style="font-size: 16px;">6. What does frame contain?</span></p></p><p><p>(1) frame is a structure that contains 2 parts: origin and Size.</p></p><p><p>(2) origin is also a structure that contains 2 parts: x and Y.</p></p><p><p>(3) size is also a struct, containing 2 sections: width and height.</p></p><p><p>(4) the origin and size of frame are relative to the parent view.</p></p><p><p>(5) the CGRectMake () function can help us construct a CGRect variable quickly.</p></p><p><p> <span style="font-size: 16px;">7. What is center?</span></p></p><p><p>(1) Center (central Point) is also an important attribute of VIEW.</p></p><p><p>(2) Center is a structure that contains 2 parts: x and Y.</p></p><p><p>(3) Center and Frame have a close connection.</p></p><p><p>(4) center.x = frame.origin.x + frame.size.width/2;</p></p><p><p>CENTER.Y = frame.origin.y + frame.size.height/2;</p></p><p><p> <span style="font-size: 18px;">8. What is bounds?</span></p></p><p><p>(1) bounds (boundary) is also an important attribute of view that defines its own boundaries.</p></p><p><p>(2) It is a cgrect struct variable like Frame.</p></p><p><p>(3) When a view is set to bounds, it treats itself as a container, defining its own boundary size and the initial coordinates of the Upper-left corner.</p></p><p><p>(4) When a child view is added to this view, the frame is calculated based on the origin point (0,0) specified by bounds, not the Upper-left corner.</p></p><p><p> <span style="font-size: 16px;">9, bounds and frame and center have a subtle connection (see):</span></p></p><p><p> </p></p><p><p> </p></p><p><p> </p></p><p><p> <span style="font-size: 16px;">10. Add a View</span></p></p><p><p>(1) UIView Addsubview: method You can add a child view, for all sub-views of the same view, the added child view will be covered BELOW.</p></p><p><p>(2) UIView provides additional methods for adding views (see the table below);</p></p><p><p> </p></p><p><p> <span style="font-size: 16px;">11. Manage the View hierarchy</span></p></p><p><p>(1) In addition to providing methods for adding views, UIView provides a way to manage the view hierarchy (see the table below).</p></p><p><p> </p></p><p><p> <span style="font-size: 16px;">12. View Important Attributes</span></p></p><p><p>(1) uiview, as a baseclass for other UI controls, provides a number of properties (see the following table):</p></p><p><p> </p></p><p><p><span style="font-size: 18px;">Iv. UILabel</span></p></p><p><p> <span style="font-size: 16px;">1. What is uilabel?</span></p></p><p><p>(1) UILabel (label): is a control that displays Text. Uilabel is the most frequently occurring control in the app.</p></p><p><p>(2) Uilabel is UIView subclass, as subclasses are generally to extend the function of the parent class, Uilabel expands the function of the text display, Uilabel is the view that can display the Text.</p></p><p><p> <span style="font-size: 16px;">2, How to use uilabel?</span></p></p><p><p>(1) creating a Uilabel is similar to the procedure for creating a UIVIEW.</p></p><p><p>① opens up space and initializes (if this class has an initialization method, uses its own; otherwise uses the parent class).</p></p><p><p>② Sets Text control-related properties.</p></p><p><p>③ is added to the parent view for Display.</p></p><p><p>④ Release.</p></p><p><p>(2) View Creation Code:</p></p><p><p>UILabel *usernamelabel = [[UILabel alloc]initwithframe:cgrectmake (30, 100, 100, 30)];</p></p><p><p>Usernamelabel.text = @ "user name";</p></p><p><p>[containerview addsubview:usernamelabel];</p></p><p><p>[usernamelabel release];</p></p><p><p><span style="font-size: 16px;">3, How to control the text display?</span></p></p><p><p>(1) the main function of Uilabel is to display a piece of text, so there are many APIs associated with the display text (see table Below)</p></p><p><p></p></p><p><p><span style="font-size: 16px;">4. Subsections</span></p></p><p><p>(1) UIView is the base class for all visual Controls.</p></p><p><p>(2) Uilabel is a view with specific appearance-specific Features.</p></p><p><p>(3) Uilabel focuses on the rendering of Text.</p></p><p><p><span style="font-size: 18px;">V. Summary</span></p></p><p><p>(1) the app renders content by window, and a program typically creates only one window.</p></p><p><p>(2) the elements that can be seen in the app are UIView and their subclasses.</p></p><p><p>(3) UIView as a baseclass for all visual controls, provides a number of properties and METHODS. Display effect Control (frame, alpha, etc.), view addition and removal (addsubview: etc.), view level adjustment (bringsubviewtofront: etc.), etc.</p></p><p><p>(4) Uilabel belong to the specific view, have their own focus</p></p><p><p><span style="font-size: 18px;">six, the next one will continue to update the supporting knowledge point practice;</span></p></p><p><p><span style="font-size: 18px;"><span style="font-size: 18px;">Email:[email protected]</span></span></p></p><p><p>iOS Development-ui from getting started to mastering (i)</p></p></span>
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.
A Free Trial That Lets You Build Big!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service