I have been working on iOS's auto layout for a while and as an Android developer I found auto layout concept pretty similar to Android's relative layout. Both concept go with one single moto to arrange views or components with respect to other views or components depending on devices.
Arranging views on the screen:-
In Android, we have below examples of layouts to arrange views on the screen.
LinearLayout:-
It is a view group that aligns all children in a single direction, vertically or horizontally. You can specify the layout direction with the android:orientation attribute.
RelativeLayout:-
It is a view group that displays child views in relative positions. The position of each view can be specified as relative to sibling elements (such as to the left-of or below another view) or in positions relative to the parent RelativeLayout area (such as aligned to the bottom, left or center).
In iOS, we have concept of auto layout to arrange views on the screen.
Auto Layout:-
It is a system that lets you lay out your app’s user interface by creating a mathematical description of the relationships between the elements. You define these relationships in terms of constraints either on individual elements, or between sets of elements. Using Auto Layout, you can create a dynamic and versatile interface that responds appropriately to changes in screen size, device orientation, and localization.
Basically, both Android as well as iOS prefer MVC(model-view-controller) pattern, and both use xml for view creation. The main theory behind arranging views on screen is to satisfy the view or component height, width, x and y co - ordinates.
Height and width of a view:-
In Android, we have layout params that describes how big the view wants to be for both width and height. The base LayoutParams class just describes how big the view wants to be for both width and height.
For each dimension, it can specify one of:
FILL_PARENT (renamed MATCH_PARENT in API Level 8 and higher), which means that the view wants to be as big as its parent (minus padding)
WRAP_CONTENT, which means that the view wants to be just big enough to enclose its content (plus padding)
an exact number
There are subclasses of LayoutParams for different subclasses of ViewGroup. For example, AbsoluteLayout has its own subclass of LayoutParams which adds an X and Y value.
In iOS, we have height and width constraints for each view. We can also use equal width and equal height constraint to make view width and height dependable equally on another view.
Now, for the main job is to satisfy x and y of a view.
In Android, linear layout aligns all children in a single direction, vertically or horizontally but, it is not efficient to create complex UI. So we have relative layout, where the positions of the children can be described in relation to each other or to the parent specified by ID.So you can align two elements by right border, or make one below another, centered in the screen, centered left, and so on. By default, all child views are drawn at the top-left of the layout. There are various properties that are available for the views inside relative layout.
android:layout_alignParentTop
If "true", makes the top edge of this view match the top edge of the parent.
android:layout_centerVertical
If "true", centers this child vertically within its parent.
android:layout_below
Positions the top edge of this view below the view specified with a resource ID.
android:layout_toRightOf
In iOS, we have constraint to satisfy x and y of a view. An attribute is one of left, right, top, bottom, leading, trailing, width, height, centerX, centerY, and baseline. Leading and trailing defines the view to its left and right position with respect to the superview or adjacent view. The constraints such as left, right, top, bottom,etc specify respective position on adjacent view.
Comparing Android relative layout properties with iOS auto layout constraints:-
Arranging views on the screen:-
In Android, we have below examples of layouts to arrange views on the screen.
LinearLayout:-
It is a view group that aligns all children in a single direction, vertically or horizontally. You can specify the layout direction with the android:orientation attribute.
RelativeLayout:-
It is a view group that displays child views in relative positions. The position of each view can be specified as relative to sibling elements (such as to the left-of or below another view) or in positions relative to the parent RelativeLayout area (such as aligned to the bottom, left or center).
In iOS, we have concept of auto layout to arrange views on the screen.
Auto Layout:-
It is a system that lets you lay out your app’s user interface by creating a mathematical description of the relationships between the elements. You define these relationships in terms of constraints either on individual elements, or between sets of elements. Using Auto Layout, you can create a dynamic and versatile interface that responds appropriately to changes in screen size, device orientation, and localization.
Basically, both Android as well as iOS prefer MVC(model-view-controller) pattern, and both use xml for view creation. The main theory behind arranging views on screen is to satisfy the view or component height, width, x and y co - ordinates.
Height and width of a view:-
In Android, we have layout params that describes how big the view wants to be for both width and height. The base LayoutParams class just describes how big the view wants to be for both width and height.
For each dimension, it can specify one of:
FILL_PARENT (renamed MATCH_PARENT in API Level 8 and higher), which means that the view wants to be as big as its parent (minus padding)
WRAP_CONTENT, which means that the view wants to be just big enough to enclose its content (plus padding)
an exact number
There are subclasses of LayoutParams for different subclasses of ViewGroup. For example, AbsoluteLayout has its own subclass of LayoutParams which adds an X and Y value.
In iOS, we have height and width constraints for each view. We can also use equal width and equal height constraint to make view width and height dependable equally on another view.
In Android, linear layout aligns all children in a single direction, vertically or horizontally but, it is not efficient to create complex UI. So we have relative layout, where the positions of the children can be described in relation to each other or to the parent specified by ID.So you can align two elements by right border, or make one below another, centered in the screen, centered left, and so on. By default, all child views are drawn at the top-left of the layout. There are various properties that are available for the views inside relative layout.
android:layout_alignParentTop
If "true", makes the top edge of this view match the top edge of the parent.
android:layout_centerVertical
If "true", centers this child vertically within its parent.
android:layout_below
Positions the top edge of this view below the view specified with a resource ID.
android:layout_toRightOf
Positions the left edge of this view to the right of the view specified with a resource ID.
- The height and width of both views inside relative layout or views using auto layout are same.
- The auto layout constraint leading space & trailingspace are similar to relative layout properties android:layout_alignParentLeft="true" & android:layout_alignParentRight="true" to arrange view with respect to parent's edge whereas, android:layout_toLeftOf & android:layout_toRightOf with respect to child's edge.
- The auto layout constraint top space & bottom space are similar to relative layout properties android:layout_alignParentTop="true" & android:layout_alignParentBottom="true" to arrange view with respect to parent's edge.
- The auto layout constraint center horizontal space & center vertical space are similar to relative layout properties android:layout_centerHorizontal & android:layout_centerVertical to arrange view horizontally or vertically with respect to the bounds of its RelativeLayout parent.
- The auto layout constraint horizontal space & vertical space are similar to relative layout properties android:layout_toLeftOf & android:layout_below to arrange view at position respective to the given anchor view ID.
No comments:
Post a Comment