Ali Android development specification: UI and layout

The following is excerpted from Alibaba’s Android development manual

Our goals are:

Prevent trouble, improve quality awareness, reduce failure rate and maintenance cost;
Unified standards to improve collaboration efficiency;
The pursuit of excellence craftsman spirit, polishing quality code.
[Mandatory] Must be observed, breach of this agreement may cause serious consequences;
[Recommendation] Try to comply with the long-term compliance is conducive to the improvement of system stability and cooperation efficiency;
Full understanding, guided by technical awareness, is the direction of individual learning, team communication and project cooperation.

Ali Android development specification: Naming and using of resource files Ali Android development specification: Four basic components: UI and layout Ali Android development specification: Process, thread and Message communication ali Android development specification: Ali Android development specification: Bitmap, Drawable and animation Ali Android development specification: security and other

1. When you have to use ViewGroup multiple nesting, use RelativeLayout instead of LinearLayout to effectively reduce the nesting number. Note: Any View on the Android application page needs to go through measure, layout, draw three steps to be correctly rendered. Measure is carried out from the top node of XML layout, and each child node needs to provide its own size to its parent node to determine the display position. During this process, measure may be re-measured (thus the time consumption of measure may be 2-3 times of the original). The deeper the node is, the more measures brought by nesting, and the more time it takes to compute. That’s why flat Views perform better. At the same time, the more views a page has, the longer it takes to measure, layout and draw. To reduce this time, the key is to keep the tree structure of the View as flat as possible and remove all views that do not need to be rendered. Ideally, the total measure, layout and draw time should be controlled within 16ms to ensure smooth UI when sliding the screen. To find superfluous views (views that increase rendering latency), you can use the Hierarachy Viewer tool in Android Studio Monitor to visually View all views. Is:

<? xml version="1.0" encoding="utf-8"? > <android.support.constraint.ConstraintLayout> <RelativeLayout> <TextView/> ... <ImageView/> </RelativeLayout> </android.support.constraint.ConstraintLayout>Copy the code

Example:

<? xml version="1.0" encoding="utf-8"? > <LinearLayout> <LinearLayout> <RelativeLayout> <TextView/> ... <ImageView/> </RelativeLayout> </LinearLayout> </LinearLayout>Copy the code

Multiple nesting causes time-consuming steps such as measure and layout. Extended reference:

Developer.android.com/studio/prof…
Mrpeak. Cn/android / 201…

2. [Recommended] Use DialogFragment instead of Dialog/AlertDialog when displaying Dialog boxes or pop-up floating layers in an Activity. In this way, it is easy to manage the life cycle of Dialog/ pop-up floating layers along with the Activity life cycle. Is:

public void showPromptDialog(String text){
	DialogFragment promptDialog = new DialogFragment() {
		@Override
		public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
			getDialog().requestWindowFeature(Window.FEATURE_NO_TITLE);
			View view = inflater.inflate(R.layout.fragment_prompt, container);
			returnview; }}; promptDialog.show(getFragmentManager(), text); }Copy the code

3. [Recommended] Source files are encoded in UTF-8 format. 4. [Mandatory] Forbid view related operations in non-UI threads. 5. Use dp for text size and DP for view size. For Textview, wrAP_content layout is recommended if the text size is fixed to avoid the problem of incomplete text display. 6. [Mandatory] It is forbidden to set the same background in the child view and parent view for many times during layout design to cause excessive drawing of the page. It is recommended to hide the layout that does not need to be displayed in time. Is:

<? xml version="1.0" encoding="utf-8"? > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	android:orientation="vertical" >
	<TextView
		android:layout_width="fill_parent"
		android:layout_height="wrap_content"
		android:text="@string/hello" />
	<Button
		android:layout_width="fill_parent"
		android:layout_height="wrap_content"
		android:text="click it !"
		android:id="@+id/btn_mybuttom" />
	<ImageView
		android:id="@+id/img"
		android:layout_width="fill_parent"
		android:layout_height="wrap_content"
		android:visibility="gone"
		android:src="@drawable/youtube" />
	<TextView
		android:text="it is an example!"
		android:layout_width="fill_parent"
		android:layout_height="wrap_content" />
</LinearLayout>
Copy the code

Example:

@Override
protected void onDraw(Canvas canvas) {
	super.onDraw(canvas);
	int width = getWidth();
	int height = getHeight();
	mPaint.setColor(Color.GRAY);
	canvas.drawRect(0, 0, width, height, mPaint);
	mPaint.setColor(Color.CYAN);
	canvas.drawRect(0, height/4, width, height, mPaint);
	mPaint.setColor(Color.DKGRAY);
	canvas.drawRect(0, height/3, width, height, mPaint);
	mPaint.setColor(Color.LTGRAY);
	canvas.drawRect(0, height/2, width, height, mPaint);
}
Copy the code

Merge and ViewStub are recommended to optimize the layout and reduce the number of UI layout levels as much as possible. FrameLayout LinearLayout and RelativeLayout are recommended. 8. [Recommendation] When you need to refresh components in a certain area at any time, you are advised to use the following methods to avoid triggering the global layout refresh:

Set the height and width of the fixed view size, such as the countdown component, etc.
Call view layout to modify the position, such as bullet screen components;
Define the refresh area by modifying the canvas position and calling invalidate(int l, int t, int r, int b).
Check that the size of the control has not changed by setting a variable to allow requestLayout and overwriting the requestLayout, onSizeChanged methods of the control. When a requestLayout is entered, it is returned directly without calling the requestLayout method of super.

PopupWindow and Dialog cannot be displayed when the Activity is not fully displayed. Do not use AnimationDrawable, it will load all images into memory at initialization, and cannot be freed. After releasing, it will return an error when loading again. Android frames can be animated using AnimationDrawable, but loading all frames at once will cause an OOM exception on low-end devices. The pictures used in the animation frame should reduce memory consumption. If the picture is large, OOM will appear easily. Example: AnimationDrawable with a small number of images is acceptable.

<? xml version="1.0" encoding="utf-8"? > <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="true">
	<item android:duration="500" android:drawable="@drawable/ic_heart_100"/>
	<item android:duration="500" android:drawable="@drawable/ic_heart_75"/>
	<item android:duration="500" android:drawable="@drawable/ic_heart_50"/>
	<item android:duration="500" android:drawable="@drawable/ic_heart_25"/>
	<item android:duration="500" android:drawable="@drawable/ic_heart_0"/>
</animation-list>
Copy the code

Example:

<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false">
	<item android:drawable="@drawable/soundwave_new_1_40" android:duration="100" />
	<item android:drawable="@drawable/soundwave_new_1_41" android:duration="100" />
	<item android:drawable="@drawable/soundwave_new_1_42" android:duration="100" />
	<item android:drawable="@drawable/soundwave_new_1_43" android:duration="100" />
	<item android:drawable="@drawable/soundwave_new_1_44" android:duration="100" />
	<item android:drawable="@drawable/soundwave_new_1_45" android:duration="100" />
	<item android:drawable="@drawable/soundwave_new_1_46" android:duration="100" />
	<item android:drawable="@drawable/soundwave_new_1_47" android:duration="100" />
	<item android:drawable="@drawable/soundwave_new_1_48" android:duration="100" />
	<item android:drawable="@drawable/soundwave_new_1_49" android:duration="100" />
	<item android:drawable="@drawable/soundwave_new_1_50" android:duration="100" />
	<item android:drawable="@drawable/soundwave_new_1_51" android:duration="100" />
	<item android:drawable="@drawable/soundwave_new_1_52" android:duration="100" />
	<item android:drawable="@drawable/soundwave_new_1_53" android:duration="100" />
	<item android:drawable="@drawable/soundwave_new_1_54" android:duration="100" />
	<item android:drawable="@drawable/soundwave_new_1_55" android:duration="100" />
	<item android:drawable="@drawable/soundwave_new_1_56" android:duration="100" />
	<item android:drawable="@drawable/soundwave_new_1_57" android:duration="100" />
	<item android:drawable="@drawable/soundwave_new_1_58" android:duration="100" />
	<item android:drawable="@drawable/soundwave_new_1_59" android:duration="100" />
	<item android:drawable="@drawable/soundwave_new_1_60" android:duration="100" />
	<item android:drawable="@drawable/soundwave_new_1_61" android:duration="100" />
	<item android:drawable="@drawable/soundwave_new_1_62" android:duration="100" />
	<item android:drawable="@drawable/soundwave_new_1_63" android:duration="100" />
	<item android:drawable="@drawable/soundwave_new_1_64" android:duration="100" />
	<item android:drawable="@drawable/soundwave_new_1_65" android:duration="100" />
	<item android:drawable="@drawable/soundwave_new_1_66" android:duration="100" />
	<item android:drawable="@drawable/soundwave_new_1_67" android:duration="100" />
	<item android:drawable="@drawable/soundwave_new_1_68" android:duration="100" />
	<item android:drawable="@drawable/soundwave_new_1_69" android:duration="100" />
</animation-list>
Copy the code

AnimationDrawable is not recommended for such a large number of images. Extended reference:

Stackoverflow.com/questions/8…
Blog.csdn.net/wanmeilang1…
Segmentfault.com/a/119000000…
Developer.android.com/reference/a…

11 and “mandatory” cannot use ScrollView ListView/GridView/ExpandableListVIew; This would load all the items of the ListView into memory, consuming a lot of memory and CPU to draw the surface. Note: ScrollView nested List or RecyclerView is officially prohibited. In addition to the various visual and interactive issues encountered during development, this approach also takes a significant toll on performance. UI components such as ListView have their own vertical scrolling capabilities, and there is no need to have a nested layer of ScrollViews. Currently, NestedScrollView is recommended for better UI experience and Design closer to Material Design. Is:

<? xml version="1.0" encoding="utf-8"? > <LinearLayout> <android.support.v4.widget.NestedScrollView> <LinearLayout> <ImageView/> ... <android.support.v7.widget.RecyclerView/> </LinearLayout> </android.support.v4.widget.NestedScrollView> </LinearLayout>Copy the code

Example:

<ScrollView>
	<LinearLayout>
		<TextView/>
		...
		<ListView/>
		<TextView />
	</LinearLayout>
</ScrollView>
Copy the code

Extended reference:

Developer.android.com/reference/a…
Developer.android.com/reference/a…

Ali Android development specification: UI and layout

Related Posts

Flutter starts dry series – implementing a landing page

Android parent View LongClick and child View Click conflict

Consumption and exposure of information flow cards in the functional design series