ANDROID基础学习笔记_2_几种常见的布局方式

制作手机App，要想拥有广大用户，我想，页面布局是很重要的一个要素。可能做一个布局也需要考虑很多，比如美观，易操作等方面。。。

常见布局主要有：相对布局、线性布局、组合布局、表格布局、帧布局、绝对布局。

1 相对布局(RelativeLayout)很简单，就是指某个控件相对于另外一个控件的布局。

 <!-- 相对布局
    		1 layout_marginLeft：填充距左边框距离
    		2 textColor：字体颜色#rrggbb，如果想增加透明效果，只需要在#后面再加两位就可以了，00表示全透明
    		3 layout_alignParentRight：与父窗体右侧对齐
    		4 layout_centerVertical：垂直方向居中 -->
    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:text="@string/big"
        android:textColor="#0000ff"
        android:textSize="24sp" />
    
    <TextView
        android:layout_below="@id/tvTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:text="@string/little"
        android:textColor="#77000000"
        android:textSize="16sp" />

当然，其中有很多属性都没有用到，但是以后用到哪个我就会写哪个。

最后的效果图：

2 线性布局(LinearLayout)就是在一条线上的布局，并且同一水平(竖直)位置只能有一个控件。控制水平或竖直的属性是LinearLayout标签里的android:orientation属性，他一共有两个值，horizontal是水平方向，vertical是竖直方向。

<!--
     线性布局
		1 控制横线或竖线的属性：android:orientation。horizontal水平方向，vertical数值方向
-->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Large Text"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

</LinearLayout>

最后的效果图：

3 组合布局顾名思义，就是把线性和相对布局组合起来了，我想它应该也可以把后面三类都组合进来。下面这个例子就是基于一个线性布局嵌套两个相对布局。

<!-- 基于线性布局的组合式布局 -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#99000000"
        android:text="功能一"
        android:textColor="#ffffff" />

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="80dp" >

        <!-- 相对布局 -->

        <TextView
            android:id="@+id/tvTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:text="@string/big"
            android:textColor="#0000ff"
            android:textSize="24sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/tvTitle"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:text="@string/little"
            android:textColor="#77000000"
            android:textSize="16sp" />

        <CheckBox
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true" />
    </RelativeLayout>

    <!-- 一条分割线 -->
    <View
        android:layout_width="fill_parent"
        android:layout_height="0.1dp"
        android:background="#33000000" />

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="80dp" >

        <!-- 相对布局 -->

        <TextView
            android:id="@+id/tvTitle1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:text="@string/big"
            android:textColor="#0000ff"
            android:textSize="24sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/tvTitle1"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:text="@string/little"
            android:textColor="#77000000"
            android:textSize="16sp" />

        <CheckBox
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true" />
    </RelativeLayout>

</LinearLayout>

最后的效果图：

4 表格布局(TableLayout)类似于html里的table标签，但是我听说它与table区别在于它指定了行标签，却没有列标签，有几个控件就又几列。定义一行用到了TableRow标签，在每一行里的每一个控件都可以用layout_weight属性来设置权重(前提是没有设置宽度)。

当控件需要比较大的显示空间时，给它一个比较大的layout_weight值就好了。它们之间通过layout_weight值的比值来确定显示的比例，如果不设置这个属性就默认包裹内容。

<!-- 表格布局
		1 每定义一个tablerow标签就产生一行，没有列标签
		2 tablerow标签里的每一个控件都可以定义android:layout_weight属性 -->
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="hahahah" />

        <TextView
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:gravity="center"
            android:text="gagagaga" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="hahahah" />

        <TextView
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:gravity="center"
            android:text="gagagaga" />
    </TableRow>

</TableLayout>

最后的效果图：

5 帧布局(FrameLayout)类似于<div>标签，标签可以叠加在一起，并且可以用android:visibility属性来设置显示隐藏。visible时显示控件，invisible隐藏控件。

<!--
     帧布局
		1 显示或隐藏某个控件的属性：android:visibility，当值为visible时显示控件，invisible隐藏控件
-->
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/videoo"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="我是播放器，正在播放"
        android:visibility="invisible" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="play"
            android:text="播放" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="pause"
            android:text="暂停" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center" >

        <ImageView
            android:id="@+id/pic"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:src="@drawable/ic_launcher"
            android:visibility="invisible" />
    </LinearLayout>

</FrameLayout>

在这里我们定义了两个按钮，分别模拟视频的播放和停止。当点击播放按钮时播放，当点击暂停按钮时出来暂停的小图标。

具体就是给两个按钮绑定单击事件，在后台把方法写了出来。学会了感觉没什么难度。

public class MainActivity extends Activity {

	TextView tv;
	ImageView iv;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.frame_layout);
		//获取两个帧，一个模拟播放，一个模拟暂停
		tv = (TextView) findViewById(R.id.videoo);
		iv = (ImageView) findViewById(R.id.pic);
	}

	public void play(View v) {
		iv.setVisibility(View.INVISIBLE);
		tv.setVisibility(View.VISIBLE);
	}

	public void pause(View v) {
		iv.setVisibility(View.VISIBLE);
		tv.setVisibility(View.INVISIBLE);
	}
}

打开界面时：                                                           单击播放时：                                                        单击暂停时：                                            

6 绝对布局(AbsoluteLayout)就是一个绝对的位置，根据android:layout_x、android:layout_y两个属性来确定控件的绝对位置，现在安卓已经不建议使用了。

以上就是我学习安卓常见布局方式的一些收获。

另外给出网上比较好的一篇博文穿送门。