安卓开发学习之009 RelativeLayout详解+计算器实现

1.结构

2.概述

　　RelativeLayout顾名思义，相对布局，在这个容器内部的子元素们可以使用彼此之间的相对位置或者和容器间的相对位置来进行定位。

3.主要XML属性

数据类型	属性名称	描述
true或false	layout_centerVertical	让元素在容器(RelativeLayout)内垂直居中
true或false	layout_centerHrizontal	让元素在容器(RelativeLayout)内水平居中
true或false	layout_centerInparent	让元素位于容器(RelativeLayout)的中心
true或false	layout_alignParentBottom	将元素的底边对齐其父容器(RelativeLayout)的底边
true或false	layout_alignParentLeft	将元素的左边对齐其父容器(RelativeLayout)的左边
true或false	layout_alignParentRight	将元素的右边对齐其父容器(RelativeLayout)的右边
true或false	layout_alignParentTop	将元素的顶边对齐其父容器(RelativeLayout)的顶边
true或false	layout_alignWithParentIfMissing	如果对应的兄弟元素找不到的话就以父元素做参照物
id的引用名 “@id/id_name”	layout_below	让元素在在某元素的下方
id的引用名	layout_above	让元素在在某元素的上方
id的引用名	layout_toLeftOf	让元素在在某元素的左方
id的引用名	layout_toRightOf	让元素在在某元素的右方
id的引用名	layout_alignTop	让元素的上边缘和某元素的的上边缘对齐
id的引用名	layout_alignLeft	让元素的左边缘和某元素的的左边缘对齐
id的引用名	layout_alignBottom	让元素的底边缘和某元素的的底边缘对齐
id的引用名	layout_alignRight	让元素的右边缘和某元素的的右边缘对齐
像素值	layout_marginBottom	该元素离它下方元素的距离
像素值	layout_marginLeft	该元素距离左边元素的距离
像素值	layout_marginRight	该元素距离右边元素的距离
像素值	layout_marginTop	该元素距离顶边元素的距离

4.注意事项

4.1实现layout_weight ？

RelativeLayout中没有android:layout_weight 属性
如果要实现weight属性怎么办呢？可用如下方法

<RelativeLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
                android:paddingRight="@dimen/activity_horizontal_margin"
                android:paddingTop="@dimen/activity_vertical_margin"
                android:paddingBottom="@dimen/activity_vertical_margin"
                tools:context=".RelativeLayoutActivityFragment">

    <RelativeLayout
        android:id="@+id/rl1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <View android:id="@+id/strut"
              android:layout_width="0dp"
              android:layout_height="0dp"
              android:layout_centerHorizontal="true"/>
        <RelativeLayout
            android:id="@+id/rl2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_alignRight="@id/strut"
            android:layout_alignParentLeft="true"
            android:text="Left">

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:text="Left">


            </Button>




        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/rl3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/strut"
            android:layout_alignParentRight="true"
            android:text="Right">
            <View android:id="@+id/strut2"
                  android:layout_width="0dp"
                  android:layout_height="0dp"
                  android:layout_centerHorizontal="true"/>
            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_alignRight="@id/strut2"
                android:layout_alignParentLeft="true"
                android:text="Left">


            </Button>

            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@id/strut2"
                android:layout_alignParentRight="true"
                android:text="Right">

            </Button>

        </RelativeLayout>
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/rl4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignRight="@id/strut"
            android:text="Button"/>

    </RelativeLayout>

</RelativeLayout>

4.2控件和对齐的参照物要在同一个层次(RelativeLayout)中

如果在上面一段代码后面添加如下代码

 <RelativeLayout
        android:id="@+id/rl4"
        android:layout_below="@id/rl1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignRight="@id/strut"
            android:text="Button"/>

    </RelativeLayout>

就会出现如下错误：“@id/strut is not a sibling in the same RelativeLayout”
这是由于“Button” 和参照物”strut“ 不在同一个RelativeLayout之中

5.实例讲解

利用RelativeLayout实现”安卓开发学习之007 LinearLayout实战计算器界面实现“
中的计算器

5.1布局代码：

res/layout/fragment_relative_layout.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:id="@+id/relativeLayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:paddingBottom="@dimen/activity_vertical_margin"
                android:paddingLeft="@dimen/activity_horizontal_margin"
                android:paddingRight="@dimen/activity_horizontal_margin"
                android:paddingTop="@dimen/activity_vertical_margin"
                tools:context=".RelativeLayoutActivityFragment"
                tools:showIn="@layout/activity_relative_layout"
    >

    <com.antex.relativelayout.LogTextBox
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@drawable/box"
        android:scrollbars="vertical"/>


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

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

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/text"
        android:layout_toRightOf="@id/button2"
        android:text="%"/>

    <Button
        android:id="@+id/button4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/text"
        android:layout_toRightOf="@id/button3"
        android:layout_alignParentRight="true"
        android:text="←"/>


    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button1"
        android:layout_alignRight="@id/button1"
        android:layout_alignParentLeft="true"
        android:text="7"/>

    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button1"
        android:layout_toRightOf="@id/button5"
        android:layout_alignRight="@id/button2"
        android:text="8"/>

    <Button
        android:id="@+id/button7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button1"
        android:layout_toRightOf="@id/button6"
        android:layout_alignRight="@id/button3"
        android:text="9"/>

    <Button
        android:id="@+id/button8"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/button1"
        android:layout_toRightOf="@id/button7"
        android:layout_alignParentRight="true"
        android:text="÷"/>


    <Button
        android:id="@+id/button9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button5"
        android:layout_alignRight="@id/button1"
        android:layout_alignParentLeft="true"
        android:text="4"/>

    <Button
        android:id="@+id/button10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button5"
        android:layout_toRightOf="@id/button9"
        android:layout_alignRight="@id/button2"
        android:text="5"/>

    <Button
        android:id="@+id/button11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button5"
        android:layout_toRightOf="@id/button10"
        android:layout_alignRight="@id/button3"
        android:text="6"/>

    <Button
        android:id="@+id/button12"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/button5"
        android:layout_toRightOf="@id/button11"
        android:layout_alignParentRight="true"
        android:text="×"/>


    <Button
        android:id="@+id/button13"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button9"
        android:layout_alignRight="@id/button1"
        android:layout_alignParentLeft="true"
        android:text="1"/>

    <Button
        android:id="@+id/button14"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button9"
        android:layout_toRightOf="@id/button13"
        android:layout_alignRight="@id/button2"
        android:text="2"/>

    <Button
        android:id="@+id/button15"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button9"
        android:layout_toRightOf="@id/button14"
        android:layout_alignRight="@id/button3"
        android:text="3"/>

    <Button
        android:id="@+id/button16"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/button9"
        android:layout_toRightOf="@id/button15"
        android:layout_alignParentRight="true"
        android:text="－"/>


    <Button
        android:id="@+id/button17"
        android:layout_below="@id/button13"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignRight="@id/button2"
        android:text="0"/>

    <Button
        android:id="@+id/button18"
        android:layout_below="@id/button13"
        android:layout_toRightOf="@id/button17"
        android:layout_alignRight="@id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="."/>


    <Button
        android:id="@+id/button20"
        android:layout_below="@id/button17"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignRight="@id/button3"
        android:layout_alignParentLeft="true"
        android:text="="/>


    <Button
        android:id="@+id/button19"
        android:layout_below="@id/button13"
        android:layout_alignLeft="@id/button4"
        android:layout_alignParentRight="true"
        android:layout_alignBottom="@id/button20"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="+"/>


</RelativeLayout>

5.2Java代码

package com.antex.relativelayout;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.RelativeLayout;

/**
 * A placeholder fragment containing a simple view.
 */
public class RelativeLayoutActivityFragment extends Fragment {

    public RelativeLayoutActivityFragment() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.fragment_relative_layout, container, false);
        //获取屏幕宽度
        DisplayMetrics dm = new DisplayMetrics();
        getActivity().getWindowManager().getDefaultDisplay().getMetrics(dm);
        int screenWidth = dm.widthPixels;
        //int screenHeight = dm.heightPixels;
        RelativeLayout relativeLayout= (RelativeLayout)view.findViewById(R.id.relativeLayout);
        Button button1 = (Button)view.findViewById(R.id.button1);
        Button button2 = (Button)view.findViewById(R.id.button2);
        Button button3 = (Button)view.findViewById(R.id.button3);

        //获取父容器可用宽度
        screenWidth-= relativeLayout.getPaddingLeft()+relativeLayout.getPaddingRight();
        //设置每个按钮的宽度为父容器可用宽度的1/4
        button1.setWidth(screenWidth / 4);
        button2.setWidth(screenWidth / 4);
        button3.setWidth(screenWidth / 4);

        return view;
    }
}

5.3 效果图

6.总结

RelativeLayout布局相对其他布局的优劣：
1.由5.1布局代码可以看出RelativeLayout可以极大的减少布局嵌套层数
视图加载速度得到有效提升
2.布局灵活度过高，对于新手来说，比较难控制其位置
3.无法使用权重属性，要实现weight属性，需利用其他方法加以处理

任何一个复杂的界面，不仅仅是靠一个布局就可以方便的处理好，因此多种布局嵌套使用往往比较奏效

开发工具：Android Studio1.4
SDK: Android 6.0
API 23

代码下载：RelativeLayout_Calculator.zip