2014-10-25Android学习------布局处理(三)------常见且常用的列表布局

我学习Android都是结合源代码去学习，这样比较直观，非常清楚的看清效果，觉得很好，今天的学习源码是网上找的个HealthFood 源码 百度搜就知道很多下载的地方

本节学习接上篇布局学习（二） 地址：http://blog.csdn.net/u014737138/article/details/40478277

列表控件应该说是经常被用到Android应用中的，当我们需要显示的元素存在某种满足的条件的时候，我们经常用到这种方式来显示，比如视频客户端，等

首先我们还是来看下效果图：

很明显的我们知道，左边的效果实际上是右边的效果经过循环处理得到，这种效果就是用<ListView>实现的

画图简单的搞清楚他们的关系：

理清这其中的关系之后，我们便开始分析代码：

1.list.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/linearlayout1"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:orientation="vertical" >    <LinearLayout        xmlns:android="http://schemas.android.com/apk/res/android"        android:id="@+id/LinearLayout02"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:background="@drawable/search_background"        android:gravity="center"        android:orientation="horizontal" >        <EditText            android:id="@+id/ETSearch"            android:layout_width="200px"            android:layout_height="wrap_content" />        <Button            android:id="@+id/searchButton"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:background="@drawable/search_btn" />        <Button            android:id="@+id/shuaxinButton"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:background="@drawable/clear_btn" />    </LinearLayout>    <ListView        android:id="@id/android:list"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:background="@color/white" >    </ListView></LinearLayout>

2.list_view_row.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/RelativeLayoutlist1"    android:layout_width="fill_parent"    android:layout_height="?android:attr/listPreferredItemHeight" >    <ImageView        android:id="@+id/ImageView01"        android:layout_width="wrap_content"        android:layout_height="fill_parent"        android:layout_alignParentBottom="true"        android:layout_alignParentTop="true"        android:adjustViewBounds="true"        android:background="@color/white"        android:padding="2dip"        android:src="@drawable/pork" />    <TextView        android:id="@+id/TextView02"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_alignParentRight="true"        android:layout_toRightOf="@id/ImageView01"        android:ellipsize="marquee"        android:singleLine="true"        android:text="@+id/item_content"        android:textSize="14px" />    <TextView        android:id="@+id/TextView01"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_above="@id/TextView02"        android:layout_alignParentRight="true"        android:layout_alignParentTop="true"        android:layout_alignWithParentIfMissing="true"        android:layout_toRightOf="@id/ImageView01"        android:drawableRight="@drawable/expand"        android:gravity="center_vertical"        android:text="@+id/listitem_title"        android:textColor="@color/black"        android:textSize="22px" /></RelativeLayout>

这里我们需要掌握的关于布局知识点有这些：

1.掌握ListView布局的相关技巧

在list.xml代码中有这样一个代码：

    <ListView
        android:id="@id/android:list"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@color/white" >
    </ListView>

LiveActivity本身继承了关于List操作的众多接口，我们可以方便的重写这些操作中需要的方法来实现自己需要的功能。
如果要用ListActivity，则 Activity的Layout文件中必须包括一个（只能一个）ListView，且ListView的id= "@id/android:list"。

1）. ListView的Id为固定不变的，为"@id/android:list“，ListActivity会根据id自动查找ListView引用；在 Activity 中使用 setListAdapter(adapter); 时就默认设置到了这个list上。如果按一般控件的写法 <ListView android:id="@+id/myListView" …… />,则需要 findViewById 先得到控件对像，再调用对像的 setListAdapter(adapter); 

显然我们需要知道，使用ListView控件的时候，activity对应的布局文件中必须只有一个ListView控件，它的id值时使用系统值 @id/android:list

这个id在R.java中是找不到的。只有对应的activity（继承ListActivity）会自动的找到这个ListView控件

就这样我们便实现了ListView的功能，接下来就是选择它的模式了：

说白点，就是给这个ListView绑定值进行操作了：

Android系统为我们提供了多种模板进行选择(android.R.layout)，如

Ø Simple_list_item_1 每项有一个TextView

Ø Simple_list_item_2 每项有两个TextView

Ø Simple_list_item_checked 带CheckView的项

Ø Simple_list_item_multiple_choise 每项有一个TextView并可以多选

Ø Simple_list_item_single_choice 每项有一个TextView，但只能进行单选。

 

但然，如果以上项模板还无法满足你的要求，那只能自定义模板了（相当简单，就是定义一个layout布局）。

本应用程序中就是使用自定义布局layout文件list_view_row.xml

自定义模板可以根据自己的需要定义成任意的格式，包括图片、方案及其他可显示的View，不用多说，自己定义就好了

2）关键是如果使用并进行模板的绑定。

如何要对ListView进行数据绑定，必须使用到一个接口：Adapter。

其中最经常与ListView进行配合使用的有ArrayAdapter、 CursorAdapter及SimpleAdapter等。

从名称可以看出ArrayAdapter使用的是一个ArrayAdapter做为数据源，SimpleCursorAdapter使用的是一个Cursor使用数据源，都比较容易理解，那么如何使用SimpleAdapter作为数据的适配器呢

这里先给出activity中的代码，具体的下节再学习：

<span style="color:#333333;">SimpleAdapter adapter = new SimpleAdapter(this, lists, </span><span style="color:#ff0000;">R.layout.list_view_row</span><span style="color:#333333;">, new String[]{"ImageView01","TextView01", "TextView02"}, new int[]{R.id.ImageView01, R.id.TextView01, R.id.TextView02});setListAdapter(adapter);</span>

2.关于布局需要学习到的其他知识：

在list_view_row.xml中我们如何像下面的这样格式呢：

左边是图片，右边是两个文本显示控件，并且是上面是图片代表的食物，下面是该食物的介绍，

1）显然我们需要明确的就是图片的大小------它的宽度不是填充父窗体的，而应该是包裹内容的，也就是wrap_content的，它的宽度应该就是图片的宽度，随着图片的大小而变化的。它的高度也应该是包裹内容的，就是图片的高度。

2）猪肉和黄连这两行文本显示控件的大小-------它的宽度应该是填充父窗体的，（这个时候的填充父窗体是指在当前的水平方向的线性布局中剩下的空间），，它的宽度也可以是包裹内容的，因为我们清楚这里的汉字显示的个数很少；它的高度应该是包括内容的，汉字显示有多大，它的高度应该就是多大加上边框的值

3）上面的汉字显示文本框(黄连)应该设置为单行，也就是android:singleLine="true"，设置单行就出现一个业务需求，就是如何汉字比较多的时候该怎么显示呢，我们肯定就是希望他能够滚动显示就多好是把？嘿嘿，你说对了，这个属性确实有的

android:ellipsize                //设置当文字过长时,该控件该如何显示。有如下值设置：

”start”—?省略号显示在开头;

”end” ——省略号显示在结尾;

”middle”—-省略号显示在中间;

”marquee” ——以跑马灯的方式显示(动画横向移动)

4）上面的汉字显示文本框(黄连)，它的内容应该是动态设置的，这个时候不能给定初始值，需要这样设置：android:text="@+id/item_content"

对文本增加一个id号，item_content对应着它的值。

5）文本显示框应该是在图片的右边的，这个属性应该设置为这样的：android:layout_toRightOf                //在某元素的右边

正如代码中的设置：android:layout_toRightOf="@id/ImageView01"  表示TextView控件在以id=ImageView01的控件的右边

6）android:layout_alignParentRight        //贴紧父元素的右边缘   这里的父元素是指当前的布局控件剩余的空间

7）android:layout_alignParentBottom    // 贴紧父元素的下边缘

8）android:layout_alignParentTop         //贴紧父元素的上边缘

9）android:layout_alignWithParentIfMissing   若找不到兄弟元素以父元素做参照物

10）android:drawableRight            //在text的右边输出一个drawable  也就是效果图中的小箭头

11）android:layout_height="?android:attr/listPreferredItemHeight"  系统自定义的高度，不同的机型高度不一样，

拓展：

android:layout_alignParentBottom              贴紧父元素的下边缘
android:layout_alignParentLeft                 贴紧父元素的左边缘
android:layout_alignParentRight                贴紧父元素的右边缘
android:layout_alignParentTop                  贴紧父元素的上边缘

1.LinearLayout ( 线性布局 ) ：(里面只可以有一个控件，并且不能设计这个控件的位置，控件会放到左上角)
线性布局分为水平线性和垂直线性二者的属性分别为： android:orientation= " horizontal "   android:orientation= "vertical" 。

2.RelativeLayout ( 相对布局 ) ： (里面可以放多个控件，但是一行只能放一个控件)

3.属性值必须为 id 的引用名“ @id/id-name ”
android:layout_below                          在某元素的下方
android:layout_above                          在某元素的上方
android:layout_toLeftOf                       在某元素的左边
android:layout_toRightOf                     在某元素的右边
android:layout_alignTop            本元素的上边缘和某元素的的上边缘对齐
android:layout_alignLeft           本元素的左边缘和某元素的的左边缘对齐
android:layout_alignBottom         本元素的下边缘和某元素的的下边缘对齐
android:layout_alignRight          本元素的右边缘和某元素的的右边缘对齐

4.属性值为具体的像素值，如 30dip ， 40px
android:layout_marginBottom              离某元素底边缘的距离
android:layout_marginLeft                 离某元素左边缘的距离
android:layout_marginRight                离某元素右边缘的距离
android:layout_marginTop                  离某元素上边缘的距离

5.TextView的控件的另外一些属性

android:drawableBottom         //在text的下方输出一个drawable，如图片。如果指定一个颜色的话会把text的背景设为该颜色，

                                                并且同时和background 使用时覆盖后者
android:drawableLeft             //在text的左边输出一个drawable，如图片
android:drawablePadding         //设置text与drawable(图片)的间隔，与drawableLeft、 drawableRight、drawableTop、drawableBottom一起使用，

                                                可设置为负数，单独使用没有效果
android:drawableRight            //在text的右边输出一个drawable
android:drawableTop              //在text的正上方输出一个drawable