The most contact we had with when developing was the xml layout, remember when we wrote the first Hello World for Android, which was displayed through activity_main.xml.
Although xml is written a lot, and there is no technical difficulty, but this is often the most easy for us to ignore, it is not difficult to write xml, and it is still necessary to work hard to write good xml.
What is a good xml layout, I think there are two core points, one is to improve development efficiency, the other is to improve app performance. Around these two points, I have also carefully sorted out 17 xml layout tips, let’s take a look at what are them, and how many have you mastered?
The official website is introduced as follows:
Space is a lightweight View subclass that you can use to create spacing between components in a common layout.
Why it’s lightweight is because Space’s draw method is empty, that is, nothing is drawn, only the onMeasure method measures width and height.
Let’s take a look at the source code:
Therefore, Space is more efficient when it comes to spacing between components, especially when it comes to dynamically modifying spacing.
For example, if you want to dynamically modify the margin of a component, if you use Space as a spacing, you only need to modify the width or height of the Space, because it reduces the drawing process, so it is more efficient to draw other components.
It’s also simple to use:
If you want, Space can completely replace margin, but not necessarily replace padding, because padding is the padding , if the padding has a background color, it can not be replaced by Space, because Space’s draw method does not draw anything, so there will be no background color, unless the background color is set in the parent view.
ConstraintLayout since the release of the first official version in 2018, has been more than 4 years, it through the flat layout, effectively solve the problem of hierarchical nesting, not only more flexible than RelativeLayout, but also better performance, coupled with the visualization tool drag editing, efficiency has also been greatly improved, if you have not used, it is recommended that you must try it.
In the process of using ConstraintLayout, I found that some students always ignore GuideLine, and although ConstraintLayout is already very useful, some layouts still seem a bit “clunky”. And if you can use GuideLine, you will find that the layout is getting simpler and the adaptation is getting more and more convenient.
GuideLine is a helper object for the ConstraintLayout layout only for layout positioning use, it is marked View.GONE and does not appear on the device.
Let’s take a look at the source code:
Labeled View.GONE is the default value set for this super.setVisibility (View.GONE) setting, and it is not displayed because the draw method is empty, the same as the Space above.
GuideLine can assist with positioning in 3 different ways:
layout_constraintGuide_begin Specify a fixed distance from the left or top of the layout
layout_constraintGuide_end Specify a fixed distance from the right or bottom of the layout
layout_constraintGuide_percent Specifies a percentage of the width or height of the layout
You can also specify different directions:
horizontal vertical guides
vertical horizontal guide
Here’s a brief demonstration of the effect:
The arrows point to the place where GuideLine was created, and of course not just GuideLine, but also Barrier
The first red box is a horizontal reference line, 70% positioning, with a percentage can solve the adaptation problem very well, and our conventional practice is to use LinearLayout nesting and then set the weight of the subview, although nesting one layer is not much, but that is also nested, just like pregnancy, you can not say that only a little pregnant…
The second red box is a vertical guide, 30dp from the left, which is suitable for multiple sub-views to align to a target distance, which also reduces the problem of hierarchical nesting, saving the need to nest another layer to set padding, or multiple sub-views to set margins separately. If you want to specify a position to wrap the line on the right, you can understand the Barrier~
The xml code is not pasted, it has been uploaded to Github, click to view
When we are writing a complex page, the xml code may have hundreds or even thousands of lines, it is always very troublesome to read, if there are a lot of RelativeLayout nested, the dependencies between the various components are intricate, it seems to be even bigger, then you can consider extracting a wave, with the total score of the pattern divided into headers, content, footers, and further extract the content area into an independent sublayout, Then use the include tag to introduce them separately into the root layout, which is similar to our project architecture design, a shell project plus n submodules. The sublayout only needs to be responsible for handling its own internal layout, and the overall planning is handed over to the parent layout, so that the overall layout is relatively clear, and if you want to understand the details, you can see the sublayout.
Like what:
content_scrolling is the sublayout that we pull out.
This property is generally used with include tags. When we pull out the child layout, its layout is a relatively independent effect, but in the end to include the root layout, if you can see its effect in the parent layout when the child layout is laid out, it will be more effective.
content_scrolling.xml above:
In fact, the layout has only one TextView, but you can also see the FloatingActionButton in the preview view, which is the use of tools:showIn property, when the child layout is embedded in the parent layout, just use tools:showIn to specify the parent layout in the root layout of the child layout, you can preview the effect in the parent layout in real time.
i.e.: tools:showIn=”@layout/activity_collapsing_toolbar”.
ViewStub is a lightweight conditional view component. When doing performance optimizations such as page seconds open, it is a relatively common lazy loading method.
Lightweight because the ViewStub is empty like Space.
For example, when we need to judge which view to display according to the conditions, we will generally write the view of each scene in the page, and then set the visibility of the view according to the conditions, the disadvantage of this is, Even if the view is View.GONE, the object will still be instantiated and its properties initialized when the page is rendered to load, which is obviously a waste of resources, so using ViewStub at this time is a good optimization tool.
When we know exactly which view needs to be displayed, inflate the actual view through ViewStub, so as to avoid wasting resources.
The layout loads only when ViewStub.inflate() is called, and object instantiation is created.
Example:
inflate：
TextView is one of the components we use the most, and there is often a need to “the header does not show up to use… Instead”, is not very familiar.
If the title is a dynamic data, the app name is displayed by default and updated after getting the data. In this case, generally in android:text to add characters to debug, after debugging and then change to the default app name, in fact, do not have to be so troublesome, directly default app name, and then use tools:text attribute to preview the effect of character overrun.
The default copy is still displayed with android:text, the effect of exceeding the limit can be previewed with tools:text, and the actual effect is still android:text, tools:text is just convenient for us to debug preview, improve efficiency, and reduce compilation waiting time.
This property is used to preview a View that is not displayed.
For example, in the “personal center” page need to give a copy prompt after the nickname “open member”, the default is not displayed, that is, android: visibility = “gone”, judging not a member to display the copy, but in the development process need to debug the two display effects of members and non-members, that is, you can preview the display effect through tools: visibility = “visible”, save the need to compile and run the data, convenient and efficient.
Code example:
RecyclerView is also a component that we use very high frequencies, and RecyclerView is generally defined in xml:
The effect is this:
In fact, this is not at all the effect of RecyclerView displayed in the page, can only see the effect every time the compilation runs, and each compilation run will undoubtedly cost us a lot of valuable time, the following is introduced to help you improve the efficiency of the property.
We can preview the display of items by setting the tools:listitem property, which specifies a layout
Effect:
The preview item shows the effect of setting the number in RecyclerView, such as:
The effect of the 3 items is displayed.
The effect is the same as tools:listitem
The effect is the same as tools:listitem
The effect of the above RecyclerView is the default vertical orientation, we all know that RecyclerView must be set a layoutManager to display it, we usually use code to set, such as:
In fact, layoutManager can also be set in xml through the app:layoutManager property, such as:
The default LinearLayoutManager is vertical, and if we want to change the direction through the android:orientation attribute, for example:
This allows you to add xml when writing it, which can not only see the preview effect, but also avoid the embarrassment of the code forgetting to set it.
In the above example, RecyclerView’s layoutManager specifies LinearLayoutManager, we can also specify GridLayoutManager, but GridLayoutManager’s default spanCount is 1, if we need to set spanCount to 2, then how to preview it, then use the app: spanCount property, You can specify the number of columns that you want to display.
Effect:
Shaders, a property mentioned in previous package volume optimizations, can reduce the number of images, thereby reducing the packet size.
We usually use ImageView to display a picture, such as the original is a white return icon, and now another place to use black, there is no need to use black and white two pictures, but use tint to modify to black, of course, there are limitations, suitable for solid color pictures.
Effect:
Example:
In a higher version of appcompat has been replaced by app:tint.
Code modifies tint:
In addition to tint there is also backgroundTint, the effect is the same.
In addition to the above examples, you can also use them on the display of scenes such as likes and favorites.
LinearLayout is also a Layout that we use very high frequencies, and here are two lesser-known properties.
I believe that many people have written the effect of dividing the line with View, like this:
As above, when there are multiple TextViews that need to be added to divide the line, it can only be copied one by one, and copying is actually nothing, that is, the code does not look elegant.
In fact, there is a more elegant way, LinearLayout can add a dividing line through the android:divider attribute, combined with the android:showDividers attribute can achieve the effect.
.xml:
shape_divider_linear is the style of the dividing line:
Effect:
showDividers has 4 options:
middle Displays a separator line between every two components
A separator line appears at the beginning of the beginning
A separator line appears at the end of end
none is not displayed
In fact, in addition to dividing the line, the interval between the views can also be achieved in this way, saving each sub-view from writing margin.
The animateLayoutChanges property is in the ViewGroup, mainly when adding and removing subviews, adding a default 300ms gradient animation.
Code:
Effect:
By default, adding and removing actions is relatively blunt, and the experience will be much better after adding animations.
Of course, if you want to modify the default animation is also OK. How to modify it? There’s nothing more straightforward than learning the source code.
Source:
When the animateLayoutChanges property value is true, the setLayoutTransition method is called and a default LayoutTransition object is passed.
LayoutTransition object is used to construct animations, similar to general animation use, interested in the official documentation or follow the source code.
After customizing the LayoutTransition object, call ViewGroup.setLayoutTransition (LayoutTransition).
After Android 5.0, after adding this property to the View, there will be a water ripple effect by default when clicked, and generally clickable View defaults to this effect, such as Button, which is usually added to the custom item view to improve the user experience.
As above, this article introduces a total of 17 properties to improve efficiency and performance in the process of writing xml on a daily basis, if you also have experience, welcome to comment and add.
If this article has a loss of help for you, thank you for your support ~
https://github.com/yechaoa/MaterialDesign
Author: yechaoa Link: https://juejin.cn/post/7145861715798802462
Follow me to get more knowledge or contribute