EDITORIAL
We introduced an Android App file structure of the project and the approximate meaning of each file, This part describes the interface layout of Android (Layout). The purpose is to Android interface layout reasonable use of screen space, and can fit a variety of screens. We can use to design the layout of the position of each control arrangement.
Android provides six basic layout class: frame layout (FrameLayout), linear layout (LinearLayout), absolute layout (AbsoluteLayout), relative layout (RelativeLayout), table layout (the TableLayout) and a grid layout (GridLayout). In addition, Android also introduced a new layout: ConstraintLayout. Some like absolute layout layout using less paper only highlights for linear layout and relative layout and other common layout, there is time to other filled layout.
A layout
FrameLayout frame layout is a simple layout. With this arrangement, all the views and controls are fixed to the top left corner of the display, and the view can not specify the location of the control, but allows the superposition of a plurality of views and controls, frame layout seldom used directly, but the use of it subclass, as TextSwitcher, ImageSwitcher and ScrollView.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:id="@+id/imageView2"
android:layout_width="300dp"
android:layout_height="197dp"
tools:srcCompat="@tools:sample/backgrounds/scenic" />
<ImageView
android:id="@+id/imageView3"
android:layout_width="163dp"
android:layout_height="114dp"
tools:srcCompat="@tools:sample/backgrounds/scenic[1]" />
</FrameLayout>
Layout simulation results are as follows:
We inserted directly in the two FrameLayout ImageView, they default to the upper left corner of the layout and the location can not be adjusted, the second ImageView superimposed above the first. FrameLayout and other arrangements as there layout_width and layout_height two properties.
Linear layout 2
Linear layout is more commonly used as a layout, in which it allows the vertical arrangement or horizontal arrangement view. Generally, complex layouts linear layout is done by nested. By setting the orientation property to set arrangement direction, Android: orientation = "Vertical" is arranged vertically; Android: orientation = "Horizontal" is arranged horizontally.
2.1 using a linear layout to achieve the login screen
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="线性布局实例"
android:textSize="24sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal">
<TextView
android:id="@+id/textView2"
android:layout_width="2dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical"
android:text="用户名："
android:textSize="24sp" />
<EditText
android:id="@+id/editText"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:ems="10"
android:inputType="textPersonName"
android:text="Name" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal">
<TextView
android:id="@+id/textView3"
android:layout_width="2dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical"
android:text="密码："
android:textSize="24sp" />
<EditText
android:id="@+id/editText2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:ems="10"
android:inputType="textPersonName"
android:text="password" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="登录" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="注册" />
</LinearLayout>
</LinearLayout>
Here directly in a large vertical linear layout which add the linear layout of three levels, to achieve doll . Finally, particular attention here a linear layout Android: the layout_weight = ". 1" , this attribute is used to adjust the weights linearly layout controls several weight proportion; layout_width layout_height attributes and the respective small control wrap_content and match_parent refer to the control the width / height, or the content itself comprising fill parent control. But too much nested will consume a lot of system resources, and appear complicated structure, it is possible to use a linear layout along with the relative layout.
3 relative layout
One layout relative layout is commonly used, which allows a view of the specified location relative to the parent view or other views. It may be aligned left, or aligned vertically disposed intermediate the parent view. Similarly, we give an example.
3.1 Use relative layout to achieve the login screen
Still above the login interface implementation using a relative layout a little trouble a little bit.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<TextView
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="相对布局"
android:textSize="24sp" />
<TextView
android:id="@+id/user"
android:layout_width="wrap_content"
android:layout_height="46dp"
android:layout_below="@id/title"
android:gravity="center_vertical"
android:text="用户名:"
android:textSize="24sp" />
<EditText
android:id="@+id/editText3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignTop="@id/user"
android:layout_alignParentEnd="true"
android:layout_toRightOf="@id/user"
android:inputType="textPersonName"
android:text="Name" />
<TextView
android:id="@+id/password"
android:layout_width="wrap_content"
android:layout_height="46dp"
android:layout_below="@id/user"
android:gravity="center_vertical"
android:text="密 码："
android:textSize="24sp" />
<EditText
android:id="@+id/editText4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@id/password"
android:layout_alignParentEnd="true"
android:layout_toRightOf="@id/password"
android:ems="10"
android:inputType="textPassword" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/password"
android:layout_alignParentLeft="true"
android:layout_marginLeft="90dp"
android:layout_marginTop="20dp"
android:text="登录" />
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@id/button3"
android:layout_marginLeft="45dp"
android:layout_toRightOf="@id/button3"
android:text="注册" />
</RelativeLayout>
FIG effect achieved:
here focuses on the use of several attributes:
1. positioned in accordance with the parent container (FIG. Source: Tutorial novice the RelativeLayout https://www.runoob.com/w3cnote/android-tutorial-relativelayout.html ) :
popular to say that can directly select their relative positions in the parent vessel, such as: android: layout_alignParentEnd = "true" and android: layout_centerVertical = "true" respectively: and parent control right-aligned , vertically centered in the parent control , other commands are also available on.
2. According to other control layout :
that may be selected and other similar control to select the alignment , relative orientation and the like, such as android: layout_below = "@ id / password" and android: layout_alignTop = "@ id / user" represents two commands: the following is @id control , and controls the top @id aligned , other commands and so on.
4 Summary
This paper focuses on several interface layout Android briefly described, where the two most common layout for the linear layout (the LinearLayout) and relative placement (the RelativeLayout) , also highlighted in this article, the interface layout is about Android Android an essential step in the development.
