zoukankan      html  css  js  c++  java
  • Android中的六大布局


    继承关系图:


    布局XML文件中常用属性:
    android:layout_width 宽度 
    android:layout_height 高度

    可能的取值为match_parent,wrap_content或者固定的像素值。
    android:orientation 方向
    可能的取值为 horizontal水平 vertical 垂直
    android:gravity
    用来确定View中的控件在View中的停靠位置。 
    android:layout_gravity
    用来确定View在其父控件中的停靠位置
    android:padding
    padding是控件中的内容相对控件的边缘的边距.
    android:layout_margin
    layout_margin是控件边缘相对父空间的边距

    android:baselineAligned 

    该属性设置为false,将会阻止该布局管理器与它的子元素的基线对齐

    android:divider

    设置垂直布局时两个组件之间的分隔条

    一.LinearLayout线性布局

    水平方向:

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        tools:context=".MainActivity" >
    
        <TextView android:layout_width="wrap_content"
                  android:layout_height="match_parent"
                  android:text="row1"
                  android:layout_weight="1"
                  android:background="#0000FF"/>
        
        <TextView android:layout_width="wrap_content"
                  android:layout_height="match_parent"
                  android:text="row2"
                  android:layout_weight="1"
                  android:background="#00FF00"/>
        
        <TextView android:layout_width="wrap_content"
                  android:layout_height="match_parent"
                  android:text="row3"
                  android:layout_weight="1"
                  android:background="#FF0000"/>
    
    </LinearLayout>
    


    输出结果:




    垂直方向:

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".MainActivity" >
    
        <TextView android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:text="row1"
                  android:layout_weight="1"
                  android:background="#0000FF"/>
        
        <TextView android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:text="row2"
                  android:layout_weight="1"
                  android:background="#00FF00"/>
        
        <TextView android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:text="row3"
                  android:layout_weight="1"
                  android:background="#FF0000"/>
    
    </LinearLayout>
    


    输出结果:



    二.FrameLayout单帧布局

    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity" >
        
        <TextView android:layout_width="80dp"
                  android:layout_height="80dp"
                  android:text="row3"
                  android:background="#FF0000"/>
        
         <TextView android:layout_width="60dp"
                  android:layout_height="60dp"
                  android:text="row2"
                  android:background="#00FF00"/>
        
          <TextView android:layout_width="40dp"
                  android:layout_height="40dp"
                  android:text="row1"
                  android:background="#0000FF"/>
    
    </FrameLayout>
    


    输出结果:


    三.RelativeLayout相对布局

    android:layout_centerInParent
    定义组件在父容器中间

    android:layout_centerVertical

    定义组件在父容器垂直居中

    android:layout_centerHorizontal

    定义组件在父容器水平居中

    android:layout_alignParentBottom

    定义组件与父容器下对齐

    (上对齐,左对齐,右对齐略)
    android:layout_above
    定义在组件的上方
    android:layout_below
    定义在组件的下方
    android:layout_toLeftOf
    定义在组件的左边
    android:layout_toRightOf
    定义在组件的右边 

    android:layout_alignTop
    本元素的上边缘和某元素的的上边缘对齐
    (下对齐,右对齐,左对齐略 ...)

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    	android:orientation="vertical"
    	android:layout_width="fill_parent"
    	android:layout_height="fill_parent"
    	>
    <!-- 定义该组件位于父容器中间 -->	
    <TextView 
    	android:id="@+id/view01"
    	android:layout_width="wrap_content" 
    	android:layout_height="wrap_content" 
    	android:background="@drawable/leaf"
    	android:layout_centerInParent="true"
    	/>
    <!-- 定义该组件位于view01组件的上方 -->
    <TextView 
    	android:id="@+id/view02"
    	android:layout_width="wrap_content" 
    	android:layout_height="wrap_content" 
    	android:background="@drawable/leaf"
    	android:layout_above="@id/view01"
    	android:layout_alignLeft="@id/view01"
    	/>
    <!-- 定义该组件位于view01组件的下方 -->
    <TextView 
    	android:id="@+id/view03"
    	android:layout_width="wrap_content" 
    	android:layout_height="wrap_content" 
    	android:background="@drawable/leaf"
    	android:layout_below="@id/view01"
    	android:layout_alignLeft="@id/view01"
    	/>
    <!-- 定义该组件位于view01组件的左边 -->
    <TextView 
    	android:id="@+id/view04"
    	android:layout_width="wrap_content" 
    	android:layout_height="wrap_content" 
    	android:background="@drawable/leaf"
    	android:layout_toLeftOf="@id/view01"
    	android:layout_alignTop="@id/view01"
    	/>
    <!-- 定义该组件位于view01组件的右边 -->
    <TextView 
    	android:id="@+id/view05"
    	android:layout_width="wrap_content" 
    	android:layout_height="wrap_content" 
    	android:background="@drawable/leaf"
    	android:layout_toRightOf="@id/view01"
    	android:layout_alignTop="@id/view01"
    	/>		
    </RelativeLayout>
    


    输出结果:



    四.TableLayout表格布局

    <?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"
    	>
    <!-- 定义第一个表格布局,指定第2列允许收缩,第3列允许拉伸 -->
    <TableLayout android:id="@+id/TableLayout01" 
    	android:layout_width="fill_parent" 
    	android:layout_height="wrap_content"
    	android:shrinkColumns="1"
    	android:stretchColumns="2"
    >
    <!-- 直接添加按钮,它自己会占一行 -->
    <Button android:id="@+id/ok1" 
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content"
    	android:text="独自一行的按钮"
    	/>
    <!-- 添加一个表格行 -->
    <TableRow>
    <!-- 为该表格行添加3个按钮 -->
    <Button android:id="@+id/ok2" 
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content"
    	android:text="普通按钮"
    	/> 	
    <Button android:id="@+id/ok3" 
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content"
    	android:text="收缩的按钮"
    	/> 
    <Button android:id="@+id/ok4" 
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content"
    	android:text="拉伸的按钮"
    	/>
    </TableRow>	
    </TableLayout>
    <!-- 定义第二个表格布局 ,指定第二列隐藏-->
    <TableLayout android:id="@+id/TableLayout01" 
    	android:layout_width="fill_parent" 
    	android:layout_height="wrap_content"
    	android:collapseColumns="1"
    >
    <!-- 直接添加按钮,它自己会占一行 -->
    <Button android:id="@+id/ok5" 
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content"
    	android:text=" 独自一行的按钮 "
    	/>
    <!--定义一个表格行-->
    <TableRow>
    <!-- 为该表格行添加3个按钮 -->
    <Button android:id="@+id/ok6" 
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content"
    	android:text="普通按钮1"
    	/> 	
    <Button android:id="@+id/ok7" 
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content"
    	android:text="被隐藏的按钮"
    	/> 
    <Button android:id="@+id/ok8" 
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content"
    	android:text="普通按钮 3"
    	/>
    </TableRow>	
    </TableLayout>
    <!-- 定义第三个表格布局 ,指定第2、3两列可以被拉伸-->
    <TableLayout android:id="@+id/TableLayout01" 
    	android:layout_width="fill_parent" 
    	android:layout_height="wrap_content"
    	android:stretchColumns="1,2"
    >
    <!-- 直接添加按钮,它自己会占一行 -->
    <Button android:id="@+id/ok9" 
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content"
    	android:text="独自一行的按钮"
    	/>
    <!--定义一个表格行-->
    <TableRow>
    <!-- 为该表格行添加3个按钮 -->
    <Button android:id="@+id/ok10" 
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content"
    	android:text="普通按钮"
    	/> 	
    <Button android:id="@+id/ok11" 
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content"
    	android:text="拉伸的按钮"
    	/> 
    <Button android:id="@+id/ok12" 
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content"
    	android:text="拉伸的按钮"
    	/>
    </TableRow>	
    <!--定义一个表格行-->
    <TableRow>
    <!-- 为该表格行添加2个按钮 -->
    <Button android:id="@+id/ok13" 
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content"
    	android:text="普通按钮"
    	/> 	
    <Button android:id="@+id/ok14" 
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content"
    	android:text="拉伸的按钮"
    	/>
    </TableRow>	
    </TableLayout>
    </LinearLayout>


    输出结果:



    五.GridLayout九宫格布局(Android4.0加入)

    android:rowCount
    定义总行数
    android:columnCount
    定义总列数

    用一个计算器界面的例子来演示:

    <?xml version="1.0" encoding="utf-8" ?>
    <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    	android:layout_width="match_parent"
    	android:layout_height="match_parent" 
    	android:rowCount="6"
    	android:columnCount="4"
    	android:id="@+id/root"
    	>
    <!-- 定义一个横跨4列的文本框,
    并设置该文本框的前景色、背景色等属性  -->
    <TextView 
        android:layout_width="match_parent"
    	android:layout_height="wrap_content" 
    	android:layout_columnSpan="4"
    	android:textSize="50sp"
    	android:layout_marginLeft="4px"
    	android:layout_marginRight="4px"
    	android:padding="5px"
    	android:layout_gravity="right"
    	android:background="#eee"
    	android:textColor="#000"
    	android:text="0"/>
    <!-- 定义一个横跨4列的按钮 -->
    <Button 
        android:layout_width="match_parent"
    	android:layout_height="wrap_content" 
    	android:layout_columnSpan="4"
    	android:text="清除"/>
    </GridLayout>
    


    package com.light.study.android;
    
    import android.app.Activity;
    import android.os.Bundle;
    import android.view.Gravity;
    import android.widget.Button;
    import android.widget.GridLayout;
    
    public class MainActivity extends Activity {
    	GridLayout gridLayout;
    	// 定义16个按钮的文本
    	String[] chars = new String[]
    		{
    			"7" , "8" , "9" , "÷",
    			"4" , "5" , "6" , "×",
    			"1" , "2" , "3" , "-",
    			"." , "0" , "=" , "+"
    		};
    	@Override
    	public void onCreate(Bundle savedInstanceState)
    	{
    		super.onCreate(savedInstanceState);
    		setContentView(R.layout.activity_main);
    		gridLayout = (GridLayout) findViewById(R.id.root);
    
    		for(int i = 0 ; i < chars.length ; i++)
    		{
    			Button bn = new Button(this);
    			bn.setText(chars[i]);
    			// 设置该按钮的字体大小
    			bn.setTextSize(40);
    			// 指定该组件所在的行
    			GridLayout.Spec rowSpec = GridLayout.spec(i / 4 + 2);
    			// 指定该组件所在列
    			GridLayout.Spec columnSpec = GridLayout.spec(i % 4);
    			GridLayout.LayoutParams params = new GridLayout.LayoutParams(
    					rowSpec , columnSpec);
    			// 指定该组件占满父容器
    			params.setGravity(Gravity.FILL);		
    			gridLayout.addView(bn , params);
    		}
    	}
    
    }
    


    输出结果:



  • 相关阅读:
    排序算法的稳定性
    字符串处理常用函数
    判断两棵二叉树是否相等
    约瑟夫环
    自加++
    Linux 安装配置 Tomcat
    在 eclipse 中将 web 项目部署到 tomcat 服务器上
    PHP连接MySQL数据库
    logback
    Log4J
  • 原文地址:https://www.cnblogs.com/krislight1105/p/3748417.html
Copyright © 2011-2022 走看看