CN107844358A - A kind of iOS interfaces fast layout strategy - Google Patents
A kind of iOS interfaces fast layout strategy Download PDFInfo
- Publication number
- CN107844358A CN107844358A CN201711176435.1A CN201711176435A CN107844358A CN 107844358 A CN107844358 A CN 107844358A CN 201711176435 A CN201711176435 A CN 201711176435A CN 107844358 A CN107844358 A CN 107844358A
- Authority
- CN
- China
- Prior art keywords
- layout
- information
- view
- father
- laid out
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Landscapes
- Document Processing Apparatus (AREA)
Abstract
The present invention relates to a kind of iOS interfaces fast layout strategy, comprise the following steps：Step 1, the layout instruction that user sends is received；Step 2, parsing layout instruction, at least obtains following information：Relatively fraternal view layout information, with respect to father's view layout information, layout parameter information；Step 3, layout center is called；Step 4, it is laid out center and obtains layout parameter information, layout center holds father's view and is used to be laid out；Step 5, x is handled, y directions offset data, produces view attribute modules, corresponding information is stored in attribute modules；Step 6, information is carried out conformity calculation by attribute modules；Step 7, by Constraint modules, data are normalized, the real layout information of view is obtained after normalized.The present invention, clear process, treatment effeciency are high, and level is clear and definite, can effectively simplified topology code and positioning efficiency, realize fast layout, meet the pursuit to higher development efficiency, be easy to debug and error correction.
Description
Technical field
The present invention relates to UI topologies field in iOS, specifically a kind of iOS interfaces fast layout strategy.
Background technology
UI layouts are not strange for iOS developer, the method that iOS has three kinds of basic interface layouts, are respectively
Hand-written UI, xib and storyboard.There was only a size as before now（Refer to screen）, it is now minimum
IPHONE exploitations will at least be adapted to three sizes.Therefore we can go to set the position of each control using hard coordinate before,
But cannot now, it would be desirable to do adaptation, perhaps you, which say, can use two sets more than UI or two set
UI, but efficiently do not meet design like that yet.
Hand-written UI is the earliest method for carrying out UI interface layouts, and advantage is flexible freedom, and shortcoming is the generation for needing to write big section
Code is laid out.Such as：Page layout is carried out using AutoresizingMask, there is one in UIView
AutoresizingMask attribute, is a value enumerated corresponding to it, the meaning of attribute be exactly adjust automatically child control with
Position among father's control, wide height.Default value is UIViewAutoresizingNone, control will not with the change of father's view and
Change.AutoresizingMask is that one kind of change in future is expected, and system can generate Frame layout, Frame（Framework）
Refer to position and size of the active view in his father's view.
Xib is the mode of the UI layouts more early occurred, and advantage is not need hand-written code, but each interface corresponding one
Individual xib, manage complexity.
Storyboard occurs after iOS5, is the strategy for replacing xib that apple official promotes mainly, can not only
Xib is collected into unified management, the transition between various scenes can also be described, shortcoming easily produces punching when being multiple person cooperational exploitation
It is prominent.
Before iOS6, Frame attributes and AutoresizingMask by UI controls are substantially to carry out UI cloth
Office.
In iOS6, Apple Inc. releases a kind of based on constraint, descriptive layout system AutoLayout.Since
Since AutoLayout comes out, the appearance of the favor of iOS developers, especially iPhone6 types size is progressively obtained, has been allowed
AutoLayout is from this as the eldest child on upper UI layouts circle.
AutoLayout occupies main leader's location-dependent query of UI layouts in its particularity：
1) is based on constraint：Different with the conventional positions and dimensions for defining Frame, AutoLayout position determines it is with so-called
Relative position constrains to define, such as the center that x coordinate is superView, and y-coordinate is 10 pixels above bottom of screen
Deng.
2) is descriptive：The definition of constraint and each view relation use access expansion language or visible language
Method is described.
3) layout systems：That is literal meaning, for being responsible for the position of each element at interface.
Sum it up, AutoLayout provides a kind of cloth for being different from tradition and being specified for UI element positions for developer
Office's method.In the past, the whether drag and drop in IB, or write in code, each UIView can have the Frame attributes of oneself,
To define its positions and dimensions in the current drawings.If using AutoLayout, just become to be determined using constraints
Adopted view positions and dimensions.Such largest benefit is the adaptation for solving at one stroke view under different resolution and screen size
Problem, the definition of view position when also simplify rotation in addition, the 10 pixels view placed in the middle on bottom originally, no matter
Rotation screen or more exchange device（The iPad either iPhone5 or mini iPad being likely to occur later）When, all the time also
The 10 pixel centered position on bottom, will not change.Generally speaking：Describe to be laid out using constraints, view
Frame can be calculated according to these constraints.
But the space that UI layouts also further optimize, how the present invention realizes in short layout if just being laid particular emphasis on, i.e., one
Fast layout is completed in Codabar code instruction.
The content of the invention
For defect present in prior art, it is an object of the invention to provide a kind of iOS interfaces fast layout strategy,
Clear process, treatment effeciency are high, and level is clear and definite, can effectively simplified topology code and positioning efficiency, realize fast layout, satisfaction pair
The pursuit of higher development efficiency, it is easy to debugging and error correction.
To achieve the above objectives, the present invention adopts the technical scheme that：
A kind of iOS interfaces fast layout strategy, it is characterised in that comprise the following steps：
Step 1, the layout instruction that user sends is received；
Step 2, parsing layout instruction, at least obtains following information：
Relatively fraternal view layout information,
With respect to father's view layout information,
Layout parameter information；
Step 3, layout center is called；
Step 4, it is laid out center and obtains layout parameter information, layout center holds father's view and is used to be laid out；
Step 5, x is handled, y directions offset data, produces view attribute modules, corresponding information is stored in attribute moulds
Block；
Step 6, information is carried out conformity calculation by attribute modules；
Step 7, by Constraint modules, data are normalized, the real cloth of view is obtained after normalized
Office's information.
On the basis of above-mentioned technical proposal, the layout parameter information, comprise at least：
Layout size information,
It is laid out kind of information,
Relative to fraternal view information,
Relative to father's view information,
Page location information,
Page-size information.
It is further comprising the steps of on the basis of above-mentioned technical proposal：
Step 8, view layout attribute is set；
Step 9, according to the real layout information of view, start to be laid out.
On the basis of above-mentioned technical proposal, the real layout information of view, using chain type layout type, including for chain
The information that formula layout function calls.
On the basis of above-mentioned technical proposal, the information called for chain type layout function specifically includes：
Relatively fraternal view layout, with respect to father's view layout；
Location-dependent function；
Size correlation function；
Other functions.
IOS interfaces fast layout strategy of the present invention, clear process, treatment effeciency is high, and level is clear and definite, can be effectively simple
Change layout code and positioning efficiency, realize fast layout, meet the pursuit to higher development efficiency, be easy to debugging and error correction.
Brief description of the drawings
The present invention has drawings described below：
The flow chart of Fig. 1 present invention.
Embodiment
The present invention is described in further detail below in conjunction with accompanying drawing.
IOS interfaces fast layout strategy of the present invention, is divided into 3 kinds of layout type, is respectively：It is laid out relative to angle,
It is laid out relative to side, is laid out relative to brother.
In being laid out relative to angle, upper left corner PPCornerTopLeft, upper right corner PPCornerTopRight are left
Inferior horn is PPCornerBottomLeft, lower right corner PPCornerBottomRight.
Code is as follows：
/**
* Specifies a corner of a frame.
*/
typedef NS_ENUM(NSUInteger, PPCorner) {
/**
* The upper-left corner of the frame.
*/
PPCornerTopLeft,
/**
* The upper-right corner of the frame.
*/
PPCornerTopRight,
/**
* The bottom-left corner of the frame.
*/
PPCornerBottomLeft,
/**
* The upper-right corner of the frame.
*/
PPCornerBottomRight,
};
Top PPEdgeTop, it is below PPEdgeBottom in being laid out relative to side, left side PPEdgeLeft, the right
For PPEdgeRight.
Code is as follows：
/**
* Specifies an edge, or face, of a frame.
*/
typedef NS_ENUM(NSUInteger, PPEdge) {
/**
* The top edge of the frame.
*/
PPEdgeTop,
/**
* The left edge of the frame.
*/
PPEdgeLeft,
/**
* The bottom edge of the frame.
*/
PPEdgeBottom,
/**
* The right edge of the frame.
*/
PPEdgeRight,
};
In being laid out relative to brother, matching benchmark is top margin, matching principle alignToTheRightMatchingTop.Refer to
Determine alignment thereof of the view relative to fraternal view.
Code is as follows：
/**
* Specifies how a view will be aligned relative to the sibling view.
*/
typedef NS_ENUM(NSUInteger, PPAlign) {
/**
* Specifies that the view should be aligned to the right of a
sibling, matching the top, or y origin, of the sibling's frame.
*/
PPAlignToTheRightMatchingTop,
/**
* Specifies that the view should be aligned to the right of a
sibling, matching the bottom, or max y value, of the sibling's frame.
*/
PPAlignToTheRightMatchingBottom,
/**
* Specifies that the view should be aligned to the right of a
sibling, and will be centered to either match the vertical center of the
sibling's frame or centered vertically within the superview, depending on the
context.
*/
PPAlignToTheRightCentered,
/**
* Specifies that the view should be aligned to the left of a
sibling, matching the top, or y origin, of the sibling's frame.
*/
PPAlignToTheLeftMatchingTop,
/**
* Specifies that the view should be aligned to the left of a
sibling, matching the bottom, or max y value, of the sibling's frame.
*/
PPAlignToTheLeftMatchingBottom,
/**
* Specifies that the view should be aligned to the left of a
sibling, and will be centered to either match the vertical center of the
sibling's frame or centered vertically within the superview, depending on the
context.
*/
PPAlignToTheLeftCentered,
/**
* Specifies that the view should be aligned under a sibling,
matching the left, or x origin, of the sibling's frame.
*/
PPAlignUnderMatchingLeft,
/**
* Specifies that the view should be aligned under a sibling,
matching the right, or max y of the sibling's frame.
*/
PPAlignUnderMatchingRight,
/**
* Specifies that the view should be aligned under a sibling, and
will be centered to either match the horizontal center of the sibling's frame
or centered horizontally within the superview, depending on the context.
*/
PPAlignUnderCentered,
/**
* Specifies that the view should be aligned above a sibling,
matching the left, or x origin of the sibling's frame.
*/
PPAlignAboveMatchingLeft,
/**
* Specifies that the view should be aligned above a sibling,
matching the right, or max x of the sibling's frame.
*/
PPAlignAboveMatchingRight,
/**
* Specifies that the view should be aligned above a sibling, and
will be centered to either match the horizontal center of the sibling's frame
or centered horizontally within the superview, depending on the context.
*/
PPAlignAboveCentered,
};
As shown in figure 1, iOS interfaces fast layout strategy of the present invention, comprises the following steps：
Step 1, the layout instruction that user sends is received；
Step 2, parsing layout instruction, at least obtains following information：
Relatively fraternal view layout information,
With respect to father's view layout information,
Layout parameter information；
Step 3, the described information of obtaining step 2 is one of any or whole after, call layout center；
Step 4, it is laid out center and obtains layout parameter information, layout center holds father's view and is used to be laid out；
Step 5, x is handled, y directions offset data, produces view attribute modules, corresponding information is stored in attribute moulds
Block；Attribute modules store the description of view, namely view properties；
Step 6, information is carried out conformity calculation by attribute modules；
Step 7, by Constraint modules, data are normalized, the real cloth of view is obtained after normalized
Office's information.
On the basis of above-mentioned technical proposal, the layout parameter information specifies layout species, comprises at least：
Layout size information,
It is laid out kind of information,
Relative to fraternal view information,
Relative to father's view information,
Page location information,
Page-size information.
It is further comprising the steps of on the basis of above-mentioned technical proposal：
Step 8, view layout attribute is set；
Step 9, according to the real layout information of view, start to be laid out.
On the basis of above-mentioned technical proposal, the real layout information of view, using chain type layout type, including for chain
The following information that formula layout function calls：
First layer, relatively fraternal view layout, with respect to father's view layout；
The second layer, location-dependent function；
- (PPNeonConstraint * (^)(CGFloat))xOffset;
And
- (PPNeonConstraint * (^)(CGFloat))yOffset;
Third layer, size correlation function；
- (PPNeonConstraint * (^)(CGSize))size;
And
- (PPNeonConstraint * (^)(CGFloat))width;- (PPNeonConstraint * (^)
(CGFloat))height;
4th layer, other functions；
- (PPNeonConstraint * (^)(CGSize))superViewSize;- (PPNeonConstraint * (^)
(CGFloat))scale;
And
- (PPNeonViewConstraint * (^)(UIView *))relativeView;-
(PPNeonViewConstraint * (^)(PPNeonConstraintAlignType))alignType;-
(PPNeonViewConstraint * (^)(PPNeonConstraintEdgeCornerType))edgeCornerType;。
In most cases, needed when developer's development interface calculate interface coordinate and size, it is necessary to calculate
Relative to the position of father's view and fraternal view, to calculate and be adapted to respectively according to different screen resolutions, so result in
Development cost is high.Also, the extremely difficult maintenance of coordinate data obtained by complex calculation, it is extremely difficult in development process afterwards
Change the page.Cause development and maintenance cost all high.
The present invention has made a large amount of optimizations to such situation, can be according to the window's position（Benchmark）, size（Size）It is automatic raw
It is laid out into complete UI, without writing the code of very complicated again.
In the occupation mode of placement strategy, the present invention uses a word distribution form, and user is only needed according to oneself
Needs, it is possible to realize in short be laid out, such as：
[self.AView anchorInCenter:100.0f height:100.0f];
Developer's written in code speed can be so improved, and reduces maintenance cost.Wherein：
First 100.0f represents width information, and second 100.0f represents elevation information, and anchorInCenter represents relative
It is laid out in centre.
Under the calculating of this framework, developer avoids the need for calculating relative coordinate and size, it is only necessary to by needs
Data, which are set, enters this framework, it is possible to which automatic computing simultaneously sets layout.When safeguarding, it is only necessary to want what is adjusted according to current
UI interfaces, carry out trickle adjustment can and complete work, greatly reduce workload.
The content not being described in detail in this specification belongs to prior art known to professional and technical personnel in the field.
Claims (5)
1. a kind of iOS interfaces fast layout strategy, it is characterised in that comprise the following steps：
Step 1, the layout instruction that user sends is received；
Step 2, parsing layout instruction, at least obtains following information：
Relatively fraternal view layout information,
With respect to father's view layout information,
Layout parameter information；
Step 3, layout center is called；
Step 4, it is laid out center and obtains layout parameter information, layout center holds father's view and is used to be laid out；
Step 5, x is handled, y directions offset data, produces view attribute modules, corresponding information is stored in attribute moulds
Block；
Step 6, information is carried out conformity calculation by attribute modules；
Step 7, by Constraint modules, data are normalized, the real cloth of view is obtained after normalized
Office's information.
2. iOS interfaces fast layout strategy as claimed in claim 1, it is characterised in that：The layout parameter information, is at least wrapped
Include：
Layout size information,
It is laid out kind of information,
Relative to fraternal view information,
Relative to father's view information,
Page location information,
Page-size information.
3. iOS interfaces fast layout strategy as claimed in claim 1, it is characterised in that：It is further comprising the steps of：
Step 8, view layout attribute is set；
Step 9, according to the real layout information of view, start to be laid out.
4. iOS interfaces fast layout strategy as claimed in claim 1, it is characterised in that：The real layout information of view, is adopted
With chain type layout type, including the information for chain type layout function calling.
5. iOS interfaces fast layout strategy as claimed in claim 4, it is characterised in that：It is described to be called for chain type layout function
Information specifically include：
Relatively fraternal view layout, with respect to father's view layout；
Location-dependent function；
Size correlation function；
Other functions.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201711176435.1A CN107844358A (en) | 2017-11-22 | 2017-11-22 | A kind of iOS interfaces fast layout strategy |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201711176435.1A CN107844358A (en) | 2017-11-22 | 2017-11-22 | A kind of iOS interfaces fast layout strategy |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN107844358A true CN107844358A (en) | 2018-03-27 |
Family
ID=61679133
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201711176435.1A Pending CN107844358A (en) | 2017-11-22 | 2017-11-22 | A kind of iOS interfaces fast layout strategy |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN107844358A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109324796A (en) * | 2018-08-01 | 2019-02-12 | 浙江口碑网络技术有限公司 | Quick interface arrangement method and device |
| CN112256254A (en) * | 2019-07-22 | 2021-01-22 | 北京京东尚科信息技术有限公司 | Method and device for generating layout code |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CA2594133A1 (en) * | 2007-07-30 | 2009-01-30 | Edythe P. Lefeuvre | System for automated generation of layout color schemes |
| CN106528115A (en) * | 2016-10-31 | 2017-03-22 | 乐视控股（北京）有限公司 | Visualized interface development method and device |
-
2017
- 2017-11-22 CN CN201711176435.1A patent/CN107844358A/en active Pending
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CA2594133A1 (en) * | 2007-07-30 | 2009-01-30 | Edythe P. Lefeuvre | System for automated generation of layout color schemes |
| CN106528115A (en) * | 2016-10-31 | 2017-03-22 | 乐视控股（北京）有限公司 | Visualized interface development method and device |
Non-Patent Citations (1)
| Title |
|---|
| 杨永福: "Masonry详解", 《HTTPS://BLOG.CSDN.NET/SUZUI11111/ARTICLE/DETAILS/51532182》 * |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109324796A (en) * | 2018-08-01 | 2019-02-12 | 浙江口碑网络技术有限公司 | Quick interface arrangement method and device |
| CN112256254A (en) * | 2019-07-22 | 2021-01-22 | 北京京东尚科信息技术有限公司 | Method and device for generating layout code |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN105549819B (en) | The display methods and device of background application information | |
| CN104123113B (en) | The multi-screen display method and device of a kind of mobile terminal and its multisystem | |
| EP4184314A1 (en) | Display interface layout method and electronic device | |
| US20220398742A1 (en) | Image processing method and apparatus, device and storage medium | |
| CN103699259B (en) | A kind of method of cursor positioning, system and touch apparatus | |
| CN102855648B (en) | A kind of image processing method and device | |
| TW201426493A (en) | Method and apparatus for adapting custom control components to a screen | |
| CN102103457B (en) | Briefing operating system and method | |
| CN104978750B (en) | Method and apparatus for handling video file | |
| CN104657149A (en) | Software framework implementation method of management module of storage system | |
| US20150074519A1 (en) | Method and apparatus of controlling page element | |
| CN107844358A (en) | A kind of iOS interfaces fast layout strategy | |
| CN103869963A (en) | Screen regulation method, device and user terminal | |
| CN106844521A (en) | Cross-terminal three-dimensional digital earth exchange method based on B/S framework | |
| CN103488504A (en) | Method and device for loading data | |
| CN106484388B (en) | Method and device for realizing user interface | |
| US11514648B2 (en) | Aligning input image data with model input data to generate image annotations | |
| CN109710365A (en) | A kind of barrage display methods, device, electronic equipment and medium | |
| CN110334163B (en) | Map background optimization method, device, equipment and storage medium for big data | |
| WO2023066177A1 (en) | Animation effect display method and electronic device | |
| CN107066147A (en) | One kind manipulation computer method and system | |
| CN109388457A (en) | A kind of long-range quick interface exchange method and device of more scenes | |
| CN102214163A (en) | Cache management method and device | |
| CN115544311A (en) | Data analysis method and device | |
| CN102566849A (en) | Method and device for acquiring tree-form data drawing output positions and ERP (enterprise resource planning) system |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20180327 |
|
| RJ01 | Rejection of invention patent application after publication |