android中的布局

最新推荐文章于 2024-11-11 14:34:10 发布

原创最新推荐文章于 2024-11-11 14:34:10 发布 · 165 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Android #XML

android 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了Android应用开发中的四种常见布局方式：线性布局(Linear Layout)、相对布局(Relative Layout)、表格布局(Table Layout)及混合布局。通过具体的XML示例代码展示了不同布局的特点及其在实际开发中的应用。

android中的布局

一、Linear布局，线性布局

效果图

layout/xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <!-- 
    	gravity重心？？
    	singleLine文字只在一行中显示，可以防止文字太多时，挤掉其他控件的空间
    	layout_weight表示在设定方向上的权重
     -->
<TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="1111111111111111111111111111111"
    android:textSize="35px"
    android:gravity="center_horizontal"
    android:singleLine="true"
    android:background="#ff0000"
    android:paddingLeft="30px"
     android:layout_weight="1"
    />
   
 <TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="2222222222222222222222222"
    android:textSize="35px"
    android:gravity="left"
    android:singleLine="false"
    android:background="#00ff00"
    android:paddingLeft="30px"
    android:layout_weight="1"
    />
    
</LinearLayout>

二、RelativeLayout

效果图

layout/xml

<?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">
    <!--相对布局
    EditText：可编辑的TextField
    @android:drawable/editbox_background：@android:使用android自带的资源
    android:layout_below="@id/label" ：指定该控件放置在=后指定的控件下方 @id/指定控件id
    android:layout_alignParentRight  ：对齐父控件的右边
     -->
    <TextView
        android:id="@+id/label"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Type here:"/>
    <EditText
        android:id="@+id/entry"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@android:drawable/editbox_background"
        android:layout_below="@id/label"/>
    <Button
        android:id="@+id/ok"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/entry"
        android:layout_alignParentRight="true"
        android:layout_marginLeft="10dip"
        android:text="OK" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/ok"
        android:layout_below="@id/entry"
        android:text="Cancel" />
</RelativeLayout>

三、TableLayout

效果图：

layout/xml

<?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"
    android:stretchColumns="2">
	<!-- 
	TableLayout 表格布局
	TableRow 行
	android:layout_column：指定控件在表格中的第几列
	View : 化横线
	 -->
    <TableRow>
        <TextView
            android:layout_column="1"
            android:text="Open..."
            android:padding="3dip" />
        <TextView
            android:text="Ctrl-O"
            android:gravity="right"
            android:padding="3dip" />
    </TableRow>

    <TableRow>
        <TextView
            android:layout_column="2"
            android:text="Save..."
            android:padding="3dip" />
        <TextView
            android:text="Ctrl-S"
            android:gravity="right"
            android:padding="3dip" />
    </TableRow>

    <TableRow>
        <TextView
            android:layout_column="1"
            android:text="Save As..."
            android:padding="3dip" />
        <TextView
            android:text="Ctrl-Shift-S"
            android:gravity="right"
            android:padding="3dip" />
    </TableRow>

    <View
        android:layout_height="2dip"
        android:background="#FF909090" />

    <TableRow>
        <TextView
            android:text="X"
            android:padding="3dip" />
        <TextView
            android:text="Import..."
            android:padding="3dip" />
    </TableRow>

    <TableRow>
        <TextView
            android:text="X"
            android:padding="3dip" />
        <TextView
            android:text="Export..."
            android:padding="3dip" />
        <TextView
            android:text="Ctrl-E"
            android:gravity="right"
            android:padding="3dip" />
    </TableRow>

    <View
        android:layout_height="2dip"
        android:background="#FF909090" />

    <TableRow>
        <TextView
            android:layout_column="1"
            android:text="Quit"
            android:padding="3dip" />
    </TableRow>
   </TableLayout>

四、混合布局

效果图：

layout/xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical" android:layout_width="fill_parent"
	android:layout_height="fill_parent">
	<LinearLayout android:orientation="vertical"
		android:layout_width="fill_parent" android:layout_height="fill_parent"
		android:layout_weight="1">
		<!-- 
		android:layout_height属性放到<LinearLayout相当于对于LinearLayout中的全局
		
		 -->

		<TextView android:layout_width="fill_parent"
			android:layout_height="wrap_content" android:text="1111111111111111111111111111111"
			android:textSize="35px" android:gravity="center_horizontal"
			android:singleLine="true" android:background="#ff0000"
			android:paddingLeft="30px" android:layout_weight="1" />

		<TextView android:layout_width="fill_parent"
			android:layout_height="wrap_content" android:text="2222222222222222222222222"
			android:textSize="35px" android:gravity="left" android:singleLine="false"
			android:background="#00ff00" android:paddingLeft="30px"
			android:layout_weight="1" />

	</LinearLayout>
	<TableLayout android:orientation="vertical"
		android:layout_width="fill_parent" android:layout_height="fill_parent"
		android:layout_weight="1">
		<TableRow android:padding="2px">
			<TextView android:text="text1" android:paddingLeft="4px" />
			<TextView android:text="text2" android:paddingLeft="4px" />
			<TextView android:text="text3" android:paddingLeft="4px" />
		</TableRow>
		<TableRow android:padding="16px">
			<TextView android:text="text4" />
			<TextView android:text="text5" />
			<TextView android:text="text6" />
		</TableRow>
	</TableLayout>

</LinearLayout>