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
- If you add components directly to TableLayout, then this component will occupy a full row
- If we want to have multiple components on a row, we need to add a TableRow container and drop the components into it
- 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
- 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
- The width of the entire table layout depends on the width of the parent container (occupying the parent container itself)
- 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
