Learning materials: "Android Application Development Paradigm Essence"
(the code has been slightly changed, not completely self-created, but there is no link to reprint others, so there is no way to choose reprint)
Table of contents
1. FrameLayout
frame layout / frame layout
All components are fixed in the upper left corner of the interface . The latter component overrides the former one.
Two, LinearLayout
Flow Layout/Linear Layout
android:orientation controls the alignment of components in a certain direction.
3. AbsoluteLayout
Absolute Layout/Coordinate Layout
It can be positioned by X/Y coordinates, which are relative to the value of the upper left corner of the screen (0, 0).
android:layout_x
android:layout_y
4. RelativeLayout
relative layout
The position can be set relative to child elements or parent elements.
chestnut:
code:
<?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:background="#ffF4F4F4"
android:padding="10px"
tools:context=".MainActivity">
<TextView
android:id="@+id/tips"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="口令:"
android:textSize="16sp"
android:textColor="#ffff0000"
/>
<EditText
android:id="@+id/tipsEdit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="请输入口令"
android:textSize="16sp"
android:textColor="#ff0000ff"
android:layout_below="@+id/tips"/>
<Button
android:id="@+id/cancelButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="取消"
android:textSize="16sp"
android:layout_alignParentRight="true"
android:layout_below="@+id/tipsEdit"
/>
<Button
android:id="@+id/okButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="确定"
android:textSize="16sp"
android:layout_alignTop="@+id/cancelButton"
android:layout_marginLeft="150dp"
/>
</RelativeLayout>
5. Table Layout
Assign child elements to rows or columns, TableLayout has no border, a TableLayout consists of multiple TableRows, and each TableRow can have 0 or more cells.
android:layout_span implements merging cells, but does not support cross-row merging.
android:layout_column specifies which cell position the component should display, thereby skipping some cells.
chestnut:
interface:
code:
<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<TableLayout 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:background="#ffF4F4F4"
android:stretchColumns="1"
tools:context=".MainActivity">
<TableRow>
<TextView
android:text="TableLayout Example"
android:padding="3dp"
android:textColor="#978C8C"
android:layout_span="3"
android:layout_gravity="center"
android:background="#FAD8CE"
/>
</TableRow>
<!-- 间隔线 -->
<View
android:layout_height="2dip"
android:textColor="#978C8C" />
<TableRow>
<TextView
android:text="New"
android:padding="3px"
android:textColor="#978C8C"
android:background="#FAD8CE"/>
<TextView
android:text="Alt+Shift+N"
android:gravity="right"
android:padding="3px"
android:textColor="#978C8C"
android:background="#FAD8CE"/>
</TableRow>
<TableRow>
<TextView
android:text="Open File..."
android:padding="3px"
android:textColor="#978C8C"
android:background="#FAD8CE"/>
</TableRow>
<View
android:layout_height="2dip"
android:background="#FF909090" />
<TableRow
android:layout_width="match_parent">
<TextView
android:text="Close"
android:padding="3px"
android:textColor="#978C8C"
android:background="#FAD8CE"/>
<TextView
android:text="Ctrl+W"
android:gravity="right"
android:padding="3px"
android:textColor="#978C8C"
android:background="#C4D6FB"/>
</TableRow>
<TableRow>
<TextView
android:text="Close"
android:padding="3px"
android:textColor="#978C8C"
android:background="#FAD8CE"/>
<TextView
android:text="Ctrl+Shift+W"
android:gravity="right"
android:padding="3px"
android:textColor="#978C8C"
android:background="#C4D6FB"
/>
</TableRow>
<View
android:layout_height="2dip"
android:textColor="#978C8C"/>
<TableRow>
<TextView
android:text="Exit"
android:padding="3px"
android:textColor="#978C8C"
android:background="#FAD8CE"/>
</TableRow>
<TableRow>
<TextView
android:text="END"
android:padding="3px"
android:gravity="center"
android:layout_column="1"
android:background="#FAD8CE"/>
</TableRow>
</TableLayout>
Note:
stretchColumns="1" means that the second column of tableLayout is set to be expandable. If the number of columns does not cover the entire screen, the rest of the space will be occupied by the second column, which will automatically stretch to fill the screen, just like fill_parent.
android:stretchColums="*" means that each column is stretched, which is similar to layout_weight="1" in Linearlayout.
6. Use TabActivity and TabHost to organize views
TabHost is a container for loading Tabs. Each Tab item can load a layout. You can get the TabHost object through the getTabHost() method of TabActivity. TabHost provides methods for adding and modifying Tab pages.
chestnut:
The first page:
After clicking the "green" Textview component, the page becomes:
blue:
Code:
xml:
<?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">
<!-- tab1的内容显示区域 -->
<TextView
android:id="@+id/view1"
android:background="#FFB3B3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="红色区域"
/>
<!-- tab2的内容显示区域 -->
<TextView
android:id="@+id/view2"
android:background="#BEFFBE"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="绿色区域"
/>
<!-- tab3的内容显示区域 -->
<TextView
android:id="@+id/view3"
android:background="#A2E2FF"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="蓝色区域"
/>
</FrameLayout>
MainActivity.java:
public class MainActivity extends TabActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
this.setTitle("TabActivity 和 TabHost"); //设置窗体的标题
TabHost tabHost = this.getTabHost();//从TabActivity上获取TabHost容器
//LayoutInflater 抽象类，用来实例化 XML布局文件生成对应的 View
//LayoutInflater.from(this) 获取当前 TabActivity的 LayoutInflater对象
LayoutInflater.from(this).inflate(R.layout.activity_main,tabHost.getTabContentView(),true);
//setIndicator(CharSequence label, Drawable icon)在tab按钮上面添加文字和图标
tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("红色",
getResources().getDrawable(R.drawable.homemenu)).
setContent(R.id.view1)); //setContent()设置View中显示的内容
tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("绿色").setContent(R.id.view2));
tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("蓝色").setContent(R.id.view3));
}
}
When I run on a real machine, the navigation bar is stuck under the tab button, so I need to remove the navigation bar:
Eliminate the top navigation bar:
Modify in value/styles.xml:
Combined version of chestnuts:
When you want to click on different tabs to display different form information, you can provide a setContent(Intent intent) method in the TabHost.TabSpec class, and you can use the Intent as the content of the Tab.
For example, here you can take out the pages of relative layout and table layout written earlier and reuse them. I named it here: activity_book2_table_layout.xml and activity_book2_relativelayout.xml.
running result:
Modify MainActivity.java:
public class MainActivity extends TabActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
this.setTitle("TabActivity 和 TabHost"); //设置窗体的标题
TabHost tabHost = this.getTabHost();//从TabActivity上获取TabHost容器
//LayoutInflater 抽象类，用来实例化 XML布局文件生成对应的 View
//LayoutInflater.from(this) 获取当前 TabActivity的 LayoutInflater对象
LayoutInflater.from(this).inflate(R.layout.activity_main,tabHost.getTabContentView(),true);
//setIndicator(CharSequence label, Drawable icon)在tab按钮上面添加文字和图标
tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("相对布局示例",
getResources().getDrawable(R.drawable.homemenu)).
setContent(new Intent(this,Book2Relativelayout.class))); //setContent()设置View中显示的内容
tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("表格布局示例").
setContent(new Intent(this, Book2TableLayout.class)));
}
}
7. Nesting of layouts
You can design the layout you want first, and then consider how to nest.
Eight, custom layout
The LayoutParams class is used by the child view to tell the parent view where it should be placed.
Different ViewGroups provide different LayoutParams subclasses.
END