Android basic learning common UI layout

1.LinearLayout (linear layout)

XML

<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:id="@+id/mylayout" //component name
    android:orientation="horizontal"   //Layout method (horizontal: horizontal layout vertical: vertical layout)
    android:layout_width="match_parent" //component width
    android:layout_height="match_parent"  //Component height
    android:gravity="center" //The alignment of the component in the parent container android:gravity="right|bottom"
    android:ignoreGravity="@id/ignore"  //The control whose id is ignore is not affected by the parent view
    android:padding="16dp"  //The component's margins in the parent container
    android:background="@mipmap/background"  //Set background image or fill color
    tools:context=".MainActivity">

</LinearLayout>

Common properties

android:id 
  @+id/identifier by Activity or View instance findViewById method passed id The identifier name gets the corresponding instance object
android:orientation
	layout(horizontal: Horizontal layout vertical: vertical layout)
android:layout_width; android:layout_heigh;
	Specify the width and height property values ​​of the child component: match_parent Specify the height and width of the child component to be the same as the height and width of the parent container component; fill_parent role and match_parent the same, has been match_parent replace; wrap_content Specify the size of the child component just enough to wrap its content
 android:gravity: 
 	the position of the object in the container:top top; bottom bottom; left left; right Right; center_vertical All child controls are vertically centered relative to the parent container and centered vertically; fill_vertical Increase the vertical size of the object if necessary to completely fill the container Vertical fill; center_horizontal All child controls are centered horizontally relative to the parent container and centered horizontally; fill_horizontal Increase the horizontal size of the object if necessary to completely fill the container; fill horizontally; center All child controls are centered relative to the parent container; fill Increase the horizontal and vertical size of the object if necessary to completely fill the container; clip_vertical Used to cut the top and/or content at the bottom. Cuts are based on their vertical alignment settings: when top is aligned, the bottom is cut; when bottom is aligned, the top is cut; otherwise, the top and bottom are cut. Crop vertically; clip_horizontal Used to cut the left and/or the content on the right. Cuts are based on their horizontal alignment settings: when left-aligned, the right side is cut; when right-aligned, the left side is cut; otherwise, the left and right sides are cut. Horizontal cropping
 	when android:orientation="vertical" , only the horizontal setting will take effect, and the vertical setting will not work.  which is: left,right,center_horizontal is valid.  when android:orientation="horizontal" When , only the vertical setting takes effect, and the horizontal setting does not work.  which is: top,bottom,center_vertical is valid.
android:ignoreGravity:
    attribute value @+id/+given ID;id for a given ID The controls are not affected by the parent view
android:ellipsize:
   Sets the abbreviation of the text when the text content exceeds the width of the control, ( end Indicates abbreviated at the end) android:Layout_weight: weight all weight The value scale is LinearLayout Sum

Layout features: Put mainly provides a model for the horizontal or vertical arrangement of controls, and each sub-component is linearly arranged in a vertical or horizontal manner. (The default is vertical)

2.RelativeLayout (relative layout)

Basic properties

gravity:  Sets the alignment of components inside the container
ignoreGravity:  This property is set to true The properties of the component will not be affected by gravity property effects 

relative to the given ID Controls:
android:layout_above="@+id/mylayout" Positions the bottom of this control for the given ID on top of the controls
android:layout_below="@+id/mylayout"  Positions the bottom of this control for the given ID under the control
android:layout_toLeftOf="@+id/mylayout" Matches the right edge of the control with the given ID the left edge of
android:layout_toRightOf="@+id/mylayout" Matches the left edge of the control with the given ID right edge alignment
android:layout_alignBaseline="@+id/mylayout" the control's baseline with the given ID of baseline align
android:layout_alignTop="@+id/mylayout"  Matches the top edge of the control with the given ID the top edge of the
android:layout_alignBottom="@+id/mylayout" Matches the bottom edge of the control with the given ID bottom edge of
android:layout_alignLeft="@+id/mylayout" Matches the left edge of the control with the given ID the left edge of
android:layout_alignRight="@+id/mylayout" Matches the right edge of the control with the given ID right edge alignment

Relative to the parent component:
android:layout_alignParentTop="true" if true,aligns the top of the control with the top of its parent control
android:layout_alignParentBottom="true" if true,Align the bottom of the control with the bottom of its parent control
android:layout_alignParentLeft="true"  if true,Aligns the left of the control with the left of its parent
android:layout_alignParentRight="true"  if true,Aligns the right part of the control with the right part of its parent control
android:layout_centerHorizontal="true"   if true,The control is centered horizontally with its parent control
android:layout_centerVertical="true"   if true,The control is vertically centered on its parent

Center:
android:layout_centerHorizontal="true" if true Center the control horizontally
android:layout_centerVertical="true" if true Center the control vertically
android:layout_centerInParent="true" if true Center the control on the parent control

Specify moving pixels:
android:layout_margin="16dp" The value of the four side offsets
android:layout_marginTop="16dp" the value of the upper offset
android:layout_marginBottom="16dp" The value of the lower offset
android:layout_marginLeft="16dp" left offset value
android:layout_marginRight="16dp" right offset value

filling:
android:layout_padding="16dp" The four sides fill a certain margin to the inner element, up, down, left, and right
android:layout_paddingTop="16dp" Padding a certain margin to the top of the inner element
android:layout_paddingBottom="16dp" Padding a certain margin to the bottom of the inner element
android:layout_paddingLeft="16dp" Padding a certain margin to the left of the inner element
android:layout_paddingRight="16dp" Padding a certain margin to the right of the inner element

Layout features: A layout method that uses a component as a reference to locate the position of the next component.

3.TableLayout (table layout)

Common properties:

android:collapseColumns="1" Set the serial number of the column to be hidden
android:shrinkColumns="1" Set the ordinal number of the columns that are allowed to be shrunk
android:stretchColumns="2" Set the sequence number of the column to be stretched by the run
 The column numbers of the above three attributes are counted from 0,for example shrinkColunmns = "2",Corresponds to the third column!  Multiple can be set,separated by commas such as"0,2",If yes all columns take effect,then use"*"number

android:layout_column="2"  It means to skip the second one and display it directly to the third grid,counting from 1
android:layout_span="4"   Indicates merging 4 cells,That is to say, this component occupies 4 cells

How to determine the number of columns and rows

  1. If you add components directly to TableLayout, then this component will occupy a full row
  2. If we want to have multiple components on a row, we need to add a TableRow container and drop the components into it
  3. The number of components in tablerow determines how many columns the row has, and the width of a column is determined by the widest cell in the column
  4. The layout_width property of tablerow is fill_parent by default, and other values ​​we set ourselves will not take effect, but layout_height is wrap_content by default, but we can set the size ourselves
  5. The width of the entire table layout depends on the width of the parent container (occupying the parent container itself)
  6. You have to count how many rows there are, a tablerow has a row, and a single component is also a row! The number of columns depends on the number of components in tableRow, and the most components are the number of columns in TableLayout

Layout features: Similar to Table in Html. Use TableRow for layout, where TableRow represents a row, and each view component of TableRow represents a cell.

Horizontal layout and Viewpager linkage

Attribute details style:

<declare-styleable name="TabLayout">
    <!--Indicator color-->
    <attr name="tabIndicatorColor" format="color"/>
    <!--Indicator height-->
    <attr name="tabIndicatorHeight" format="dimension"/>
    <!--indicator width true:and tab same width  false: and tab words in the same width -->
    <attr name="tabIndicatorFullWidth" format="boolean"/>
    <!--tabs distance TabLayout offset from the starting position, but app:tabMode="scrollable"to take effect-->
    <attr name="tabContentStart" format="dimension"/>
    <!--only Tab background, set TabLayout for background android:background-->
    <attr name="tabBackground" format="reference"/>
    <!--default fixed,all Tab It can only be displayed on the screen, if it exceeds, it will be squeezed; scrollable,tab A large number will exceed the screen and can be swiped-->
    <attr name="tabMode">
        <enum name="scrollable" value="0"/>
        <enum name="fixed" value="1"/>
    </attr>
    <!--default fill,tab fill up TabLayout,but tabMode="fixed"to take effect; center,tabs lie in TabLayout in the middle-->
    <attr name="tabGravity">
        <enum name="fill" value="0"/>
        <enum name="center" value="1"/>
    </attr>
    <!--Tab minimum width of-->
    <attr name="tabMinWidth" format="dimension"/>
    <!--Tab maximum width of-->
    <attr name="tabMaxWidth" format="dimension"/>
    <!--Tab text styling-->
    <attr name="tabTextAppearance" format="reference"/>
    <!--Tab font color unchecked-->
    <attr name="tabTextColor" format="color"/>
    <!--Tab select font color-->
    <attr name="tabSelectedTextColor" format="color"/>
    <!--Tab Fill related-->
    <attr name="tabPaddingStart" format="dimension"/>
    <attr name="tabPaddingTop" format="dimension"/>
    <attr name="tabPaddingEnd" format="dimension"/>
    <attr name="tabPaddingBottom" format="dimension"/>
    <attr name="tabPadding" format="dimension"/>
</declare-styleable>

Photo-text

1. pass SpannableString set picture
@NonNull
private SpannableString setImageSpan(String string,int drawableId) {
    SpannableString ss = new SpannableString("  "+string);
    Drawable drawable = ContextCompat.getDrawable(this, drawableId);
    drawable.setBounds(0,0,drawable.getIntrinsicWidth(),drawable.getIntrinsicHeight());
    ImageSpan imageSpan = new ImageSpan(drawable);
    ss.setSpan(imageSpan,0,1, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
    return ss;
}
2.Code settings
 TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
tabLayout.addTab(tabLayout.newTab().setCustomView(setCustomView(R.drawable.ic_home,"front page")));
tabLayout.addTab(tabLayout.newTab().setCustomView(setCustomView(R.drawable.ic_info,"News")));
tabLayout.addTab(tabLayout.newTab().setCustomView(setCustomView(R.drawable.ic_live,"live streaming")));
tabLayout.addTab(tabLayout.newTab().setCustomView(setCustomView(R.drawable.ic_me,"I")));

4.FrameLayout (frame layout)

android:foreground="@mimap/img02"   foreground image: Always on top image
android:foregroundGravity="left|top"     Set the position of the foreground image

Layout features: All elements placed in it are placed in the upper left area, and it is impossible to specify an exact position for these elements, the next child element will overlap the previous one.

5.GridLayout (grid layout)

You can set the arrangement of components in the layout yourself
android:orientation="horizontal"  Specify the arrangement horizontal default level vertical vertical
android:layout_gravity="center" Alignment center left right bottom use two at the same time eg: right|bottom

How many rows and columns can be customized grid layout
android:rowCount="4" Specify the maximum number of rows
android:columnCount="3" Specify the maximum number of columns

You can directly set the component to be located in a row or column
android:layout_row="2" The row of the grid where the child component is located
android:layout_column="2" The column of the grid where the child component is located

Components can be set to span several rows or columns
android:layout_columnSpan="2" Subcomponents span several columns horizontally
android:layout_rowSpan="3" Subcomponents span several lines vertically

inner class GridLayout.LayoutParams
android:layout_column="2" Column number of child components
android:layout_columnSpan="2" Subcomponents span several columns horizontally
android:layout_columnWeight="2" The proportion of the weight distribution of subcomponents in the horizontal direction
android:gravity="right" The position occupied by the child component in the horizontal direction
android:layout_row="2" The row of the grid where the child component is located
android:layout_rowSpan="3" Subcomponents span several lines vertically
android:layout_rowWeight="" The proportion of weight distribution of subcomponents in the vertical direction

Usage summary:

1: First define how the component is aligned android:orientation horizontal or vertical, set how many rows and columns
2: Set the row or column where the component is located, remember to start counting from 0, if not set, each component occupies one row and one column by default
3: Set the component to span several rows or columns; after setting, you need to set a padding: android:layout_gravity = ""

6.AbsoluteLayout (absolute layout)

Absolute layout can also be called coordinate layout, which can directly specify the absolute position (xy) of child elements
Due to the large difference in screen size of mobile phones, the adaptability of using absolute positioning is relatively poor, and there are defects in the adaptation of the screen
Layout features: The component is positioned by the coordinate axis. The upper left corner is the (0, 0) point, the x-axis to the right increases, and the Y-axis increases downward. The component positioning attributes are android:layout_x and android:layout_y to determine the coordinates.
Abandoned after Android 2.2

android:layout_x current component X the location of the coordinates(direction from left to right)
android:layout_y current component y the location of the coordinates(top to bottom direction)

7.ConstraintLayout (constraint layout)

Google introduced the layout in 2016, and it is not necessary to introduce additionally in the Android basic api
When the layout is simple, the performance consumption of ConstraintLayout is higher than that of RelativeLayout or LinearLayout, but it has obvious advantages in complex multi-level nesting

Attributes

app:layout_constraintRight_toRightOf
app:layout_constraintEnd_toEndOf
constraintRight or constraintEnd Indicates the right side of this control, and toRightOf or toEndOf Indicates the left side of the target control. This sentence means that the right side of this control is located on the right side of the target control. Note that if you use Right,If you want the left, you have to have Left,if used Start,If you want the right side, you have to have End,Right and Start cannot be mixed, Left and End Can not be mixed. Recommended Use Start and End. 

app:layout_constraintLeft_toLeftOf
app:layout_constraintStart_toStartOf
constraintLeft or constraintStart Indicates that it is the left side of this control, and toLeftOf or toStartOf Indicates the left side of the target control. This sentence means that the left side of this control is located on the left side of the target control. The mixing rule is the same as the last sentence above. Recommended Use Start and End. 

app:layout_constraintTop_toTopOf 
	Indicates that the top of this control is on top of the target control
app:layout_constraintBottom_toBottomOf
	Indicates that the bottom of this control is at the bottom of the target control
app:layout_constraintStart_toEndOf
   Indicates that the left side of the control is on the right side of the target control
app:layout_constraintEnd_toStartOf 
   Indicates that the right side of the control is on the left side of the target control
app:layout_constraintBottom_toTopOf
	Indicates that the bottom of the control is on top of the target control
app:layout_constraintTop_toBottomOf
	Indicates that the top of the control is at the bottom of the target control

app:layout_constraintCircle
app:layout_constraintCircleAngle
app:layout_constraintCircleRadius
 The control implements angle positioning relative to the target control, layout_constraintCircle and layout_constraintCircleAngle and layout_constraintCircleRadius use simultaneously.

padding
margin

app:layout_goneMarginStart
app:layout_goneMarginTop
app:layout_goneMarginEnd
app:layout_goneMarginBottom
 Indicates when the target constraint control Gone Margins when hidden, goneMargin conditions of use margin Consistent. For example, there is a A,B exist A below and spaced 20 dp,use RelativeLayout , we usually A plus marginBottom20dp,when A conduct GONE when hidden B Naturally moved up the top, and ConstraintLayout will not, because of the existence of constraints, B Have layout_constraintTop_toBottomOf attribute and have marginTop 20 dp,when A conduct Gone when, B still have top 20 dp Margin, you need to use this attribute at this time layout_goneMarginTop,We set it to 0, which means that the target constraint object hides the outer top margin of the control and is 0 dp. 

app:layout_constraintWidth_max
app:layout_constraintHeight_max
 Indicates the maximum width or maximum height, if a fixed value is used, the corresponding layout_width or layout_height use wrap_content,and android:maxWidth Properties are similar. can if and app:layout_constraintWidth_percent or app:layout_constraintHeight_percent Be careful when using in combination

app:layout_constraintWidth_percent
app:layout_constraintHeight_percent
 Indicates the occupation of the parent View percentage of width or height, 0-1 Value, 1 means full. Can be used alone or with app:layout_constraintWidth_max or app:layout_constraintHeight_max used in combination, you need max The value inside is wrap,corresponding layout_width or layout_height use 0 dp,Indicates how much parent the maximum width or height occupies View How much, the width or height changes after increasing to the maximum width and no longer increasing

app:layout_constrainedWidth
 Indicates that the current width is affected by the width of the target constraint control, such as A width is 100 dp,B use layout_constraintStart_toStartOf and layout_constraintEnd_toEndOf and A align, if B The width is wrap_content,but B 's width varies with the content, but does not exceed A 100 dp width, that is, the maximum width is limited from another level, if B is 0 dp,is directly maintained and A of equal width

app:layout_constrainedHeight
 Indicates that the current control height is highly influenced by the target constraint control, such as A height is 100 dp,B use layout_constraintTop_toTopOf and layout_constraintBottom_toBottomOf and A align, if B The height is wrap_content,but B 's height varies with the content, but does not exceed A 100 dp height, that is, the maximum height is limited from another level, if B is 0 dp,is directly maintained and A the same height

app:layout_constraintDimensionRatio
 Indicates aspect ratio, such as layout_width is 0 dp,layout_height is 100 dp,if the attribute is 1:1,but layout_width The actual value is 100 dp;if layout_height is 100 dp,The attribute is 3:2,but layout_width is 150 dp. It is not recommended to use this property with a width and height of wrap_content,The effect is not right.

app:layout_constraintHorizontal_chainStyle
 If multiple controls are horizontal constraints, such as C exist B to the left, B exist A On the left side of , this property can be used and can only be used on the head of the chain, that is A,There are three values, spread as default, spread_inside to spread out, packed for crowded close

app:layout_constraintVertical_weight
 represents the vertical specific gravity, and LinearLayout The same, but the premise is that these controls are constrained to each other, such as the following constraints: A and parent top, A bottom and B top, B top and A bottom, B bottom and C top, C top and B bottom, C Bottom and parent bottom, will have effect

app:layout_constraintHorizontal_weight
 represents the horizontal weight, and LinearLayout The same, but the premise is that these controls are constrained to each other, such as the following constraints: A and parent left, A right and B left, B left and A right, B right and C left, C left and B right, C The right part and the parent right part will have an effect

app:layout_constraintHorizontal_bias
 Indicates that the horizontal direction is cheap. If you want to use this property, you need to specify the two sides of the corresponding axis to take effect. For example, use app:layout_constraintHorizontal_bias="0.5"property, you need to specify the current control's start Bian He end constraints to take effect. The value defaults to 0.5 Center position, the value range is 0~1 between

app:layout_constraintVertical_bias
 Indicates the vertical offset. If you want to use this property, you need to specify the two sides of the corresponding axis to take effect. For example, use app:layout_constraintVertical_bias="0.5"property, you need to specify the current control's top Bian He bottom constraints to take effect. The value defaults to 0.5 Center position, the value range is 0~1 between.  Note the properties Left and Right may be invalid, although the constraint rules can be re-established with code, but it is not necessary, it is recommended to use Start and End,Officially recommended

Generic properties that are easily confused

1. The difference between layout_gravity and gravity: layout_gravity refers to where the current view is located in the upper-level view, and gravity refers to where the lower-level view is located in the current view.
2. The difference between layout_margin and padding: layout_margin refers to the distance between the current view and the external view, and this margin part does not belong to the current view; padding refers to the distance between the current view and its internal view, and this padding part belongs to the current view.
3. The difference between the values ​​of visibility: This property has three values, namely: visible means visible, invisible means invisible, and gone means disappear. The difference: invisible is invisible but still occupies the space, it seems that there is a blank there; gone is not only invisible but also does not occupy the space, it seems to disappear without leaving a trace.
4. layout_weight: This attribute represents the weight of the current view width or height, but this weight does not allocate all the space of the superior view, but only allocates the remaining space of the superior view. Therefore, if layout_width or layout_height is set to wrap_content, and then layout_weight is set at this time, it is often found that the space of each view is not expected, because the superior view first deducts the length of the subview wrap_content, and the last remaining length is used to distribute according to the weight. , so of course not the result we want. The correct way is to set the layout_width or layout_height to 0dp, and then specify the layout_weight of each subordinate view, which means that all subordinate views do not occupy space, then all the space of the superior view is left, and then all spaces are weighted according to the weight. Assign to each subordinate view to get our desired result.

Properties to be specified separately for each layout view

LinearLayout needs to specify orientation, and the specific values ​​are familiar to everyone: vertical means vertical layout; horizontal means horizontal layout. However, the default value of this property is horizontal, which may be unexpected to most people, because everyone feels that the mobile APP should be vertically laid out from top to bottom, so here we must pay special attention to the vertical layout and must set the orientation, otherwise the default horizontal layout does not meet most businesses. Scenes.
Because ScrollView scrolls vertically, android:layout_width can only be match_parent or a specific value, not wrap_content; android:layout_height must be wrap_content. Correspondingly, because HorizontalScrollView scrolls horizontally, android:layout_height can only be match_parent or a specific value, not wrap_content; android:layout_width must be wrap_content.

Layout Manager Nesting - The Nesting Principle

1. The root layout manager must contain the xmlns attribute
2. In a layout file, there can only be at most one root layout manager. If you need more than one, you need to use a root layout manager to enclose them.
3. Do not nest too deep, if the nesting is too deep, it will affect the performance

full-screen display

getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

Landscape display

Add android:screenOrientation="landscape" to the activity in the app file AndroidMaMainfest.xml

property value is true or false

The attribute value must be the reference name of the id "@id/id-name"

The attribute value is a specific pixel value, such as 30dip, 40px,50dp

Attribute value asks Android's built-in value

Tags: Android UI

Posted by Daijoubu on Sun, 23 Oct 2022 19:08:50 +1030