标签:
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。
标签:
原文地址:http://www.cnblogs.com/RGogoing/p/4523161.html