Android入门/五大布局(七)

现在的位置: 首页 > 综合 > 正文

RSS

Android入门/五大布局(七)

2018年05月26日 ⁄ 综合 ⁄ 共 5168字 ⁄ 字号小中大 ⁄ 评论关闭

Android 平台定义了5种布局类型, 结构如下 :

- Layout

+ 线性布局(linear layout)

- 表格布局(table layout)

- 绝对布局(absolute layout)

- 相对布局(relative layout)

- 框布局(frame layout)

( 一 ) LinearLayout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:orientation="vertical" >
    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="to" />
    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="subject" />
    <EditText
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="top"
        android:hint="message" />
    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:text="send" />
</LinearLayout>

图片不上了,在Grapical Layout中预览即可看见效果

属性解释:

android:orientation : 设置方向垂直(vertical)或水平(horizontal)

android:layout_width/layout_height: 设置控件宽度或高度

android:layout_gravity: 控件右对齐

android:gravity : 控件内容对齐方式

android:hint: EditText编辑提示文字

(二)RelativeLayout

Tips: 不能有一个交叉依赖对方位置的布局;

例如，你不能有一个RelativeLayout高度设置
WRAP_CONTENT和一个子集，以
ALIGN_PARENT_BOTTOM的。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp" >
    <EditText
        android:id="@+id/edt1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="to" />
    <EditText
        android:id="@+id/edt2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/edt1"
        android:hint="subject" />
    <EditText
        android:id="@+id/edt3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="top"
        android:layout_below="@id/edt1"
        android:layout_toRightOf="@id/edt4"
        android:hint="message" />
    <Button
        android:id="@+id/edt4"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:layout_below="@id/edt1"
        android:layout_toRightOf="@id/edt2"
        android:text="send" />
</RelativeLayout>

常用属性:

        android:layout_above 将该控件的底部至于给定ID的控件之上
       android:layout_below 将该控件的顶部至于给定ID的控件之下
       android:layout_toLeftOf 将该控件的右边缘和给定ID的控件的左边缘对齐
       android:layout_toRightOf 将该控件的左边缘和给定ID的控件的右边缘对齐

       android:layout_alignBaseline 该控件的baseline和给定ID的控件的baseline对齐
       android:layout_alignBottom 将该控件的底部边缘与给定ID控件的底部边缘
       android:layout_alignLeft 将该控件的左边缘与给定ID控件的左边缘对齐
       android:layout_alignRight 将该控件的右边缘与给定ID控件的右边缘对齐
       android:layout_alignTop 将给定控件的顶部边缘与给定ID控件的顶部对齐

       android:alignParentBottom 如果该值为true，则将该控件的底部和父控件的底部对齐
       android:layout_alignParentLeft 如果该值为true，则将该控件的左边与父控件的左边对齐
       android:layout_alignParentRight 如果该值为true，则将该控件的右边与父控件的右边对齐
       android:layout_alignParentTop 如果该值为true，则将空间的顶部与父控件的顶部对齐

       android:layout_centerHorizontal 如果值为真，该控件将被至于水平方向的中央
       android:layout_centerInParent 如果值为真，该控件将被至于父控件水平方向和垂直方向的中央
       android:layout_centerVertical 如果值为真，该控件将被至于垂直方向的中央

(三) AbsoluteLayout

绝对布局 .. 就是给定x y坐标,固定一个控件的位置

常用属性:

android:layout_x :设置x

android:layout_y :设置y

使用绝对布局可以再Graphical Layout中直接拖控件预览布局的效果

(四) 框布局

FrameLayout 感觉类似于 PS图层显示或堆栈

图层的上方会覆盖掉下方的某些区域

因此在框布局XML文件中定义的控件,
最下方的控件显示在最顶层

常用属性:

android:foreground : 前置图片

android:foregroundGravity : 前置图片重心

android:measureAllChildren : 在切换显示时是否显示测量所有子组件的大小

android:layout_gravity: 添加组件的重心

(五) 表格布局

HTML 的<table>标签类似 , 这里是以<TableRow> 替代 <TD>

<?xml version="1.0" encoding="utf-8"?>

    <TableLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
   	 >
	<TableRow>
	    <Button 
	        android:text="1_1"
	    />
	    <Button 
	        android:text="1_2"
	    />
	    <Button 
	        android:text="1_3"
	    />
	</TableRow>
    <TableRow>
	    <Button 
	        android:text="2_1"
	        android:layout_span="2"
	    />
	    <Button 
	        android:layout_column="2"
	        android:text="2_2"
	    />
	</TableRow>
             
   </TableLayout>

常用属性:

android:collapseColumns : 隐藏指定某列

表格单元属性:

android:layout_columns : 设置该单元格位于指定单元格

android:layout_span: 指定单元格跨越列数

经常需要在JAVA中动态的填充表格的数据, 补充知识:

public class MainActivity extends Activity {

	private final int WC = ViewGroup.LayoutParams.WRAP_CONTENT;
	private final int FP = ViewGroup.LayoutParams.FILL_PARENT;
	
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        // 新建 table layout实例
        TableLayout  tablelayout = (TableLayout)findViewById(R.id.TableLayout01);
        // 全部列自动填充空白处
        tablelayout.setStretchAllColumns(true);
      
        for(int row=0;row<8;row++)
        {
        	TableRow tablerow = new TableRow(this);
        	for(int col=0;col<8;col++)
        	{
        		// tv 用于显示 
        		TextView tv = new TextView(this);
        		tv.setText("("+row+","+col+")");
        		tablerow.addView(tv);
        	}
        	tablelayout.addView(tablerow,new TableLayout.LayoutParams(FP,WC));
        }
    }

}

在UI界面中只需声明一个 tablelayout id

    <TableLayout   
             android:id="@+id/TableLayout01"   
             android:layout_width="fill_parent"   
             android:layout_height="wrap_content">  
     </TableLayout>

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

【上篇】Android入门/ListView(八)
【下篇】Android入门/Intent(六)

作者: ageing

该日志由 ageing 于6年前发表在综合分类下，最后更新于 2018年05月26日.
转载请注明: Android入门/五大布局(七) | 学步园 +复制链接

抱歉!评论已关闭.

学步园

Android入门/五大布局(七)

作者: ageing

书签

最新文章New

本站推荐

返回首页