When we create an Android project, we will find that actually building a complete Android project is not as easy as imagined. In fact, just like designing a visual interface, there are many aspects to consider when developing Android. The main considerations are the interface layout and required components.
1. Android user interface layout management
The Android system follows the MVC ( model-view-controller) design pattern to separate the interface design of the application from the functional control design. It is similar to the separation of the front and back ends. The user interface and subsequent controls can be modified independently. code, and in AS, the front-end interface layout file is in the layout subdirectory of the res resource directory of the generated application framework project. The file name is activity_main.xm (the name can be changed when creating a new project). You can use the interface and XML files are jointly managed. If you want to call a resource file, use the R class of R.iava to map the resources in the res directory to the id number, and use the id number for resource management.
1. Specifications for layout files
(1) The layout file is stored in the res\layout directory as a project resource. It is an xml file with the default file name activity_main.xml. (
2) The root node of the layout file is usually a layout method, and components can be added to the root node. as a node.
(3) The root node of the layout file must contain a namespace, in order to separate it from other projects,
as follows:
xmlns:android="http://schemas.android.com/apk/res/android"(4) If you want to implement a component that controls the interface in a Java program, you must define an ID for the component of the interface file, that is, reference the resource file and component through the ID for control.
The component definition format is as follows:
android:id="@+id/<组件id>"2. Important attribute values commonly used in layout files
(1) Set the attribute value of the component size
wrap_contont: Forces the view to expand to display the entire content, fully displaying the text and images inside it, and determining the size of the component based on the size of the component content.
match_parent: Android2.2 and above are common to fill_parent, filling all spaces in the container.
fill_parent: Force the widget to expand to fill as much space as possible within the layout unit, forcing it to fill the entire screen.
(2) Set the unit of component size
px (pixels): pixel, that is, the luminous point on the screen.
dp (or dip, full name is device independent pixels): device independent pixel. An abstract unit that supports multi-resolution devices, related to hardware.
sp (scaled pixels): proportional pixels. , set the font size.
(3) Set the production mode of components
The alignment of the component is controlled by the "android: gravity " attribute in the component . Its attributes are top, bottom, left, right, horizontal center (center_horizontal). Vertical center ( center_vertical) etc.
3. Common layouts
Regarding the layout of the user interface, there are the following seven common layouts:
linear layout (LinearLayout), frame layout (FrameLayout), table layout (TableLayout), relative layout (RelativeLayout), absolute layout (AbsolateLayout) constraint layout, grid layout (GridLayout) , constraint layout (ConstraintLayout). Relative layout has been replaced by constrained layout. Absolute layout is difficult to achieve multi-resolution adaptation and is not recommended.
(1)Linear Layout (LinearLayout)
Features: Arrange components horizontally or vertically.
Special attributes: The arrangement is controlled by the "android:orientation" attribute. Its attribute values include horizontal and vertical. Example
: Display several buttons in a linear layout in horizontal and vertical directions.
Level results:
Vertical results:
(2) Frame Layout (FrameLayout)
Features: Place the component in the upper left corner. When adding multiple components, the later components will cover the front components. Frame layouts will be stacked together in the order they are added, with the default stacking position in the upper left corner. Special properties: Use "layout_gravity" to set the position of the overlay.
Example: Layer pictures of different sizes. The method of referencing pictures here can be in the user interface or in the source program control file.
(3)Table layout (TableLayout)
Features: Divide the page into cells composed of rows and columns.
Special attributes: The number of columns in the table is defined by android:shrinkColumns. For example, android:shrikColumns="0,1,2" means that the table has three columns, numbered 1,2,3.
android:collapseColumns : Set the columns that need to be hidden. Serial number
android:shrinkColumns : Set the column number of the column that is allowed to be shrunk
android:stretchColumns : Set the attendance number of the column that is stretched.
Example: Implement a table with six rows and four columns similar to the mobile phone standby interface.
First, change the image to be displayed Add it to the res resource directory file drawable-hdpi. The specific process is as follows. Select the Project view, app->5c->re5->right new resource directory->select resource type (drawable) ->density. Select the appropriate one according to your needs. The ratio, select hicgh densitv here and after confirmation, a resource folder drawable-hdpi->copy the image file to the folder
(4) Relative Layout (RelativeLayout)
Features: Layout relative to the position of other components. Use relative positioning to allow controls to appear anywhere in the layout. In relative layout, you can align other components left and right, align up and down, or arrange components in the center of the screen by specifying the associated components.
Special common attributes:
layout the control relative to the parent element ( the attribute value is true or false )
android:layout_centerHrizontal horizontally centered
android:layout_centerVertical vertically centered
android:lavout_centerlnparent fully centered relative to the parent element
android:layout_alignParentBottom is located at the lower edge of the parent element
android:layout_alignParentLeft Located on the left edge of the parent element
android:layout_alignParentRight is located on the right edge of the parent element
android:layout_alignParentTop is located on the upper edge of the parent element
android:layout_alignWithParentlfMissing If the corresponding sibling element cannot be found, use the parent element as a reference
The attribute value must be the reference name of id "@id/id-name"
android:layout_below is located below the element
android:layout_above is located above the element
android:layout_toLeftof is located on the left side of the element
android:layout_toRightof is located on the right side of the element
android:lavout_alignTop The upper edge of the element is aligned with the upper edge of an element android:layout_alignLeft The left edge of the element is aligned with the left edge of an element
android:lavout alignBottom The lower edge of the element is aligned with the lower edge of an element
android:layout_alignRight The right edge of the element is aligned with the right edge of an
element Assign a pixel value to the attribute
android:layout_marginBottomThe distance from the bottom edge
android:layout_marginLeftThe distance from the left edge
android:layout_marginRightThe distance from the right edge
android:layout_marginTopThe distance from the top edge
Example: Generate an application with component arrangement.
Code:
result:
