ViewGroup布局管理器

作者: GolferChen | 来源:发表于2016-09-24 15:44 被阅读222次

布局管理器存在的意义

不同的安卓手机,其分辨率、尺寸存在差异,为了能使Android应用的用户界面具有平台无关性,Android提供了布局管理器用于管理TextView、Button等组件(布局管理器可根据运行平台来调整组件的大小)。
ViewGroup继承于View,它管理着Button等View组件的位置及大小,而其本身也是一个View组件(因此某个布局管理器可以嵌套到另一个布局管理器中)。

如何用布局管理器管理组件

方法一:直接使用xml布局文件,如下面的代码就在id为root的线性布局管理器(LinearLayout)中定义了一个Button
main.xml

<LinearLayout
android:id="@+id/root"
android:orientation="vertical">
<Button
android:id="@+id/button
android:layout_width="wrap_content"
android:layout_height="fill_parent"/>
</LinearLayout>

方法二:xml和java代码混合使用,即先在xml中定义一个布局管理器,接着在java代码中使用addView()方法添加组件,实例代码如下:
main.xml

<RelativeLayout
android:id="@+id"=root
android:layout_width="match_parent"
android:layout_height="match_parent">
</RelativeLayoout>

main_activity.java(代码如有遮挡请拖动代码块查看)

setContentView(R.layout.main);//使main.xml中的布局能显示出来
LinearLayout bowl=(ViewGroup)findViewById(R.id.root);
Button bn=new Button(this);
bn.setText(R.string.HelloWord);
root.addView(bn);//添加组件

布局管理器种类

布局管理器有以下种类:LinearLayout(线性布局)、RelativeLayout(相对布局)、TableLayout(表格布局)、帧布局(FrameLayout)、网格布局(GridLayout)

LinearLayout 线性布局

线性布局将组件一个接一个排列起来,横向或是纵向排列由属性值android:orientation控制,实例如下:

android:orientation="vertical"//组件纵向排列
android:orientation="horizontal"//组件横向排列

注意:线性布局不会换行,当组件一个接一个排列到头后,剩下的组件将不会被显示出来
还有一个比较重要的属性是android:gravity,它用于设置内部各组件的对齐方式,实例如下:

android:gravity="center_horizontal  //组件水平居中
android:gravity="right|center_vertical   //组件出现在屏幕右方且垂直居中

TableLayout表格布局

表格布局采用行和列的方式管理组件,行数和列数通过添加TableRow和各组件来确定,示例如下:

<?xml version="1.0"  encoding="utf-8"?>
<TableLayout           xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button  android:id="@+id/bn1"//按钮bn1占第一行
 ......
android:text="bn1"/>
<TableRow>//TableRow占第二行
<Button  android:id="@+id/bn2"    //bn2占据第二行的第一列
......
android:text="bn2"/>
<Button  android:id="@+id/bn3"    //bn3占据第二行的第二列
......
android:text="bn3"/>
</TableRow>
</TableLayout>

RelativeLayout相对布局

顾名思义,相对布局中的组件的位置相对其他组件来决定,示例如下:

<TextView  android:layout_toRightOf="@id/bn1"//该文本框位于id为bn1的按钮的右边
android:layout_alignTop="@id/bn1  //该文本框与bn1顶部对齐
android:layout_below="@id/bn2"/>"//该文本框位于id为bn2的文本框的底部

实战

设计简单计算器的用户界面:

<?xml version="1.0" encoding="utf-8"?>
<GridLayout 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:rowCount="9"
android:columnCount="4"
android:id="@+id/root"
tools:context="com.golfer.www.caculator.MainActivity">
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textSize="30pt"
    android:text="0"
    android:layout_rowSpan="4"
    android:layout_columnSpan="4"
    android:background="@drawable/textview"
    android:layout_marginBottom="16pt"/>
<Button
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginBottom="10pt"
       android:layout_marginEnd="2pt"
       android:text="C"
       android:layout_marginLeft="2pt"/>
<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10pt"
    android:layout_marginEnd="2pt"
    android:text="minus"/>
<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10pt"
    android:layout_marginEnd="2pt"
    android:text="Del"/>
<Button
    android:text="/"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10pt"
    android:layout_marginEnd="2pt"/>
<Button
    android:text="7"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10pt"
    android:layout_marginEnd="2pt"
    android:layout_marginLeft="2pt"/>
<Button
    android:text="8"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10pt"
    android:layout_marginEnd="2pt"/>
<Button
    android:text="9"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10pt"
    android:layout_marginEnd="2pt"/>
<Button
    android:text="X"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10pt"
    android:layout_marginEnd="2pt"/>
<Button
    android:text="4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10pt"
    android:layout_marginEnd="2pt"
    android:layout_marginLeft="2pt"/>
<Button
    android:text="5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10pt"
    android:layout_marginEnd="2pt"/>
<Button
    android:text="6"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10pt"
    android:layout_marginEnd="2pt"/>
<Button
    android:text="—"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10pt"
    android:layout_marginEnd="2pt"/>
<Button
    android:text="1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10pt"
    android:layout_marginEnd="2pt"
    android:layout_marginLeft="2pt"/>
<Button
    android:text="2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10pt"
    android:layout_marginEnd="2pt"/>
<Button
    android:text="3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10pt"
    android:layout_marginEnd="2pt"/>
<Button
    android:text="+"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10pt"
    android:layout_marginEnd="2pt"/>
<Button
    android:text="0"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10pt"
    android:layout_marginEnd="2pt"/>
<Button
    android:text="."
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10pt"
    android:layout_marginEnd="2pt"/>
<Button
    android:layout_height="wrap_content"
    android:layout_columnSpan="2"
    android:text="="
    android:layout_width="80pt" />
 </GridLayout>

界面如下图:


ViewGroup布局管理器

需要指出的是,这样直接在xml布局文件中定义各数字按钮显得代码冗余,我们应当采取xml布局文件和java代码混合的方式

相关文章

网友评论

    本文标题:ViewGroup布局管理器

    本文链接:https://www.haomeiwen.com/subject/cutzettx.html