Android学习笔记(第二篇)View中的五大布局

PS：人不要低估自己的实力，但是也不能高估自己的能力.凡事谦为本...

学习内容：

1.用户界面View中的五大布局...

i.首先介绍一下view的概念

  view是什么呢？我们已经知道一个Activity是Android的显示层，但是Activity是不能直接显示在屏幕上的，它也像JSP那样，显示的东西是html，那么Android也不例外，Activity是一个抽象的壳子，而显示的东西就是view或者是viewgroup（图形用户组件）....

  有了这个概念，我们就清楚view是如何在Activity中进行展示的，Activity调用setcontentview（）方法去构建一个根节点，通过这个根节点去绘制一棵树状结构的图..以根节点开始，建立根节点下的直接子节点，这些子节点是同一层次的关系，那么我们再以子节点为根，去绘制子节点的新子节点...然后进行依次类推，一层扣一层，这样就会形成一棵树状结构的层次模型图..那么显示的时候自然要按照这颗树的顺序来进行显示...学过前台的人会很清楚，这个东西就和js中的DOM树是很相似的..思路基本是相通的...

ii.布局的概念

  布局这东西，换成任何一个程序员都会知道什么是布局，就是要给用户显示一个看着既美观又好用的交互界面，这就是布局，有了布局，才能够将做出来的界面更加的美观..Android的布局继承于ViewGroup，ViewGroup是一个特殊的view，它又继承于Android.view.View..它的功能就是装载和管理下一层的View对象或ViewGroup对象，也就说他是一个容纳其它元素的的容器。ViewGroup是布局管理器（layout）及view容器的基类。 ViewGroup中，还定义了一个嵌套类ViewGroup.LayoutParams。这个类定义了一个显示对象的位置、大小等属性，view通过LayoutParams中的这些属性值来告诉父级，它们将如何放置。总而言之，就是为界面提供了一个容器，我们可以将组件放入到容器当中...最终形成一个美观的用户交互界面...

iii.FrameLayout帧布局..

  FrameLayout布局给我的感觉就是用处不是很大，用的也不多，主要是它规定所有的显示对象都固定在窗口的左上角，并且不允许修改位置，允许多个对象进行叠加防止，不过后一个对象会覆盖掉前一个对象..

<!--这里使用了ImageView组件...这个组件是图形组件...先不具体进行讲解,这里添加了三个ImageView组件,src中p1表示图片的名称,这里插入了三张图片..
    注意：我们在插入图片的时候，一定要将图片导入到res的drawable文件夹下，res下的drawable文件夹很多，导入到哪一个文件夹都是可以的...-->
<?xml version=”1.0″ encoding=”utf-8″?>
<FrameLayout
            android:id="@+id/FrameLayout01"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            xmlns:android="http://schemas.android.com/apk/res/android"
>
<ImageView
           android:id="@+id/ImageView01"
           android:src="@drawable/p1"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content">
</ImageView>
<ImageView
           android:id="@+id/ImageView02"
           android:src="@drawable/p2"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content">
</ImageView>
<ImageView
           android:id="@+id/ImageView03"
           android:src="@drawable/p3"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content">
</ImageView>
</FrameLayout>                                 

src下的JAVA文件...

package com.example.android_view;

import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBar;
import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.os.Build;
import android.widget.TextView;
import android.app.Activity;
import android.widget.ImageView;
import android.app.Activity;
public class MainActivity extends Activity{
    private ImageView myImageView_1;
    private ImageView myImageView_2;
    private ImageView myImageView_3;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);//调用父类的onCreate方法去初始化对象...
        setContentView(R.layout.activity);//调用setContentView方法..告诉Activity去调用activity.xml文件下的布局...
        myImageView_1=(ImageView)findViewById(R.id.ImageView_01);
        myImageView_2=(ImageView)findViewById(R.id.ImageView_02);
        myImageView_3=(ImageView)findViewById(R.id.ImageView_03);//找到xml文件下的指定id的ImageView...
//        if (savedInstanceState == null) {
//            getSupportFragmentManager().beginTransaction()
//                    .add(R.id.container, new PlaceholderFragment()).commit();
//        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {

        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

    /**
     * A placeholder fragment containing a simple view.
     */
//    public static class PlaceholderFragment extends Fragment {
//
//        public PlaceholderFragment() {
//        }
//
//        @Override
//        public View onCreateView(LayoutInflater inflater, ViewGroup container,
//                Bundle savedInstanceState) {
//            View rootView = inflater.inflate(R.layout.fragment_main, container,
//                    false);
//            return rootView;
//        }
//    }

}

加入了三个图像，这三个图像会相应的进行覆盖...

  补充一个findViewById（）的方法...findViewById（）方法一共有两种...第一种就是我们上面使用的方法，是Activity里的方法...另一种则是view中的方法...这两种方法是完全不同的...我们来看一下源码..

//Activity中的findViewById（）方法...
/**
 * Finds a view that was identified by the id attribute from the XML that
 * was processed in {@link #onCreate}.
 *
 * @return The view if found or null otherwise.
 */
public View findViewById(int id) {
    return getWindow().findViewById(id);
}
/**
 * Retrieve the current {@link android.view.Window} for the activity.
 * This can be used to directly access parts of the Window API that
 * are not available through Activity/Screen.
 *
 * @return Window The current window, or null if the activity is not
 *         visual.
 */
public Window getWindow() {
    return mWindow;
}
//这种方法表示的是寻找到xml文件下指定id的对象...

//view中的findViewById（）方法...
/**
 * Look for a child view with the given id.  If this view has the given
 * id, return this view.
 *
 * @param id The id to search for.
 * @return The view that has the given id in the hierarchy or null
 */
public final View findViewById(int id) {
    if (id < 0) {
        return null;
    }
    return findViewTraversal(id);
    /**
 * {@hide}
 * @param id the id of the view to be found
 * @return the view of the specified id, null if cannot be found
 */
protected View findViewTraversal(int id) {
    if (id == mID) {
        return this;
    }
    return null;
}
//寻找与指定id相同的对象..，所以即使几个layout的XML文件中的View的id号相同的话，只要他们没有相同的父节点，或有相同的父亲节点，但不在父节点及以上节点调用findViewById通过id来查找他们就是没有问题..

两种方法的用处完全是不同的，不要混淆概念...

iv.LinearLayout线性布局...

  线性布局就比较常用了，也是RadioGroup, TabWidget, TableLayout, TableRow, ZoomControls类的父类。LinearLayout可以让它的子元素垂直或水平的方式排成一行（不设置方向的时候默认按照垂直方向排列）。下面是线性布局的代码...java文件和上面一样...就不进行粘贴了..

<?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"
    android:gravity="center_horizontal">
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="TextView_1"
    android:textSize="20px"
    android:textColor="#0ff"
    android:background="#333">
</TextView>
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView_2"
    android:textSize="20px"
    android:textColor="#0f0"
    android:background="#eee"
    android:layout_weight="3">
</TextView>
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView_3"
    android:textColor="#00f"
    android:textSize="20px"
    android:background="#ccc"
    android:layout_weight="1">
</TextView>
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="TextView_4"
    android:textColor="#f33"
    android:textSize="20px"
    android:background="#888"
    android:layout_weight="1">
</TextView>
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="TextView_5"
    android:textColor="#ff3"
    android:textSize="20px"
    android:background="#333"
    android:layout_weight="1">
</TextView>
</LinearLayout>

v.AbsoluteLayout绝对布局...

  绝对布局就是我们直接在屏幕上定义控件所放置的坐标位置，指定其放置的坐标.这种布局简单，直观性很强，但是很不灵活，一旦屏幕的大小不同，那么就会直接导致放置的位置也不一样..在屏幕小放置组件的位置是正中央，但是一旦换了不同大小的屏幕，就不可能在出现在正中央了，对应屏幕的相对位置一定会发生变化...这里的layout_x和layout_y就是直接进行坐标设置...这在不同大小的屏幕上显示的位置一定是不同的，大家可以去试试..

<?xml version=”1.0″ encoding=”utf-8″?>
<AbsoluteLayout
        android:id="@+id/AbsoluteLayout01"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#fff">
<ImageView
        android:src="@drawable/android"
        android:layout_y="40dip"
        android:layout_width="wrap_content"
        android:layout_x="35dip"
        android:id="@+id/ImageView01"
        android:layout_height="wrap_content">
</ImageView>
<TextView
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:id="@+id/TextView01"
        android:text="Android2.2 学习指南"
        android:textColor="#0f0"
        android:textSize="28dip"
        android:layout_y="330dip"
        android:layout_x="35dip">
</TextView>
<TextView
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:id="@+id/TextView02"
        android:text="图文并茂，理论清晰，操作性强"
        android:textColor="#333"
        android:textSize="18dip"
        android:layout_y="365dip"
        android:layout_x="35dip">
</TextView>
</AbsoluteLayout>    

vi.RelativeLayout相对布局...

相对布局

  相对布局是很常用的一种布局方式...灵活性很大，相对应的属性也很多...但是也是优缺点的，操作难度比较大，属性之间可能会引起冲突...并且允许子元素指定它的父元素或者是兄弟元素的所在位置...总而言之，使用相对布局要多进行测试...

<?xml version=”1.0″ encoding=”utf-8″?>
<AbsoluteLayout
        android:id="@+id/AbsoluteLayout01"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#fff">
<ImageView
        android:src="@drawable/android"
        android:layout_width="wrap_content"
        android:layout_marginTop="40dip"
        android:id="@+id/ImageView01"
        android:layout_height="wrap_content">
</ImageView>
<TextView
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:id="@+id/TextView01"
        android:text="Android2.2 学习指南"
        android:textColor="#0f0"
        android:textSize="28dip"
        android:layout_below="@id/ImageView01"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dip">
</TextView>
<TextView
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:id="@+id/TextView02"
        android:text="图文并茂，理论清晰，操作性强"
        android:textColor="#333"
        android:textSize="18dip"
        android:layout_below="@id/TextView01"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="5dip">
</TextView>
</AbsoluteLayout>    

   例子就和上面一样，只要把AbsoluteLayout改成RelativeLayout，然后修改一下对应的位置，这里layout_below表示现在这个组件位于哪个组件的下方..layout_marginTop表示的是距离上面组件的距离是多少...这样我们就会发现其效果，就算是在不同大小的屏幕中进行显示，它显示的位置相对于屏幕的位置都是相同的...这就是相对布局更大的一个优势...

vii.TableLayout表格布局...

  表格布局TableLayout以行列的形式管理子元素，每一行是一个TableRow布局对象，当然也可以是普通的View对象，TableRow离每放一个元素就是一列，总列数由列数最多的那一行决定。

<?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="1">  <!--这个表示的是对应的那一列进行自动伸展，什么是自动伸展呢，比如说一个行内有两个组件，这两个组件的大小是无法填充满第一行的
                                       那么如果其中一个进行伸展，那么就代表这个组件会填满剩下空缺的位置，说白了就是改变其长度...-->
<TableRow>
         <!--android:layout_column="1"  // 0代表第一列..1代表第二列..这个数字是几，就代表插入的是几+1列..那么这个组件就是第二列，下面那个就是第一列了..
         默认是从0开始的...-->
        <TextView
               android:layout_column="1"
               android:text="打开…"
               android:padding="3dip"/>     <!--组件与边界的距离..-->
        <!-- android:gravity="right"//元素的内容向右对其-->
        <TextView
               android:text="Ctrl-O"
               android:gravity="right"
               android:padding="3dip"/>
</TableRow>                                       <!--这里一行放了两列组件..-->
<TableRow>
        <TextView
                android:layout_column="1"
                android:text="保存…"
                android:padding="3dip"/>
        <TextView
                android:text="Ctrl-S"
                android:gravity="right"
                android:padding="3dip" />
</TableRow>
<TableRow>
        <TextView
                android:layout_column="1"
                android:text="另存为…"
                android:padding="3dip" />
        <TextView
                android:text="Ctrl-Shift-S"
                android:gravity="right"
                android:padding="3dip" />
</TableRow>
<View         <!--一个View对象独占了一行...--->
        android:layout_height="2dip"
        android:background="#FF909090"/>
<TableRow>
        <TextView
                android:text="X"
                android:padding="3dip" />
        <TextView
                android:text="导入…"
                android:padding="3dip" />
</TableRow>
<TableRow>
        <TextView
                android:text="X"
                android:padding="3dip" />
        <TextView
                android:text="导出…"
                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="退出"
               android:padding="3dip" />
</TableRow>
</TableLayout>              

TableRow也是一个Layout，里面的元素会水平排列，如果TableRow的父元素不是TableLayout的话，那么他会表现的像一个LinearLayout。