Android控件组合应用三

上一篇文章中，我们先利用ImageButton控件和RelativeLayout进行了一些热身运动，接下来，ListView登场。

看新浪微博的界面，给我们的第一感觉应该是用了ListView，但是仔细一想，又觉得在ListView中难以实现这么复杂的显示。我们不妨就用ListView，看看能否仿制出来他的效果。

对于ListView来说，现在每一个项，即其中每一个Item都不再是我们熟悉的简单的复选框，或者多行文本，而是图文并茂并且有布局要求的形态。除此之外，还要注意到，这个列表框的第一项和最后一项是固定的，分别放置了“刷新”和“更多”两个Item，无论列表框中有多少项，这两个Item都存在。如果能把这两个Item作为列表框的一个不变的组成部分，而只是用数据填充中间有数据项，应该就差不多了。

基于上述观察和分析，我们可以通过为ListView添加HeaderView和FooterView来解决这两个特殊的Item问题，既然是两个View，那我们就先添加两个布局的xml，分别作为HeaderView和FooterView。文件内容如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:gravity="center"
  android:background="@color/white">
    <TextView android:id="@+id/textHeader" 
	    android:layout_width="wrap_content" 
	    android:layout_height="wrap_content"
	    android:paddingTop="15dp"
	    android:paddingBottom="15dp"
	    android:layout_gravity="center_horizontal"
	    android:text="@string/refresh"
	    android:textColor="@color/black"
	 	android:textSize="15sp">
    </TextView>
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:gravity="center"
  android:background="@color/white">
    <TextView android:id="@+id/textfooter" 
	    android:layout_width="wrap_content" 
	    android:layout_height="wrap_content"
	    android:paddingTop="15dp"
	    android:paddingBottom="15dp"
	    android:layout_gravity="center_horizontal"
	    android:text="@string/more"
	    android:textColor="@color/black"
	 	android:textSize="15sp">
    </TextView>
</LinearLayout>

有了这两个布局文件，就可以自定义我们自己的ListView了，新建一个BlogListView的class，继承自ListView。

现在的问题是什么时候把这两个view加进来呢，思考ing……没错，在该控件完成布局的时候就要加进来了，该类的代码如下：

package com.wenbin.test;

import com.wenbin.test.site.Site;
import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ListView;

public class BlogListView extends ListView {
	private Site site;
	
	public BlogListView(Context context) {
		super(context);
	}

	public BlogListView(Context context, AttributeSet attrs) {
		super(context, attrs);
	}

	public BlogListView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
	}

	@Override
	protected void onFinishInflate() {
		super.onFinishInflate();
		LayoutInflater li=LayoutInflater.from(getContext());
		View headerView=li.inflate(R.layout.bloglistheader, null);
		headerView.setOnClickListener(new OnClickListener(){
			@Override
			public void onClick(View v) {
				refresh();
			}			
		});
		View footerView=li.inflate(R.layout.bloglistfooter, null);
		footerView.setOnClickListener(new OnClickListener(){
			@Override
			public void onClick(View v) {
				more();
			}			
		});
		addHeaderView(headerView);
		addFooterView(footerView);
	}

	public void init(Site site){
		this.site=site;
		if (site!=null && site.getBlogsCount()>0){
			setAdapter(new BlogAdapter(site.getBlogs(),getContext()));
		}
	}
	
	public void refresh() {
		//TODO:
	}

	public void more(){
		//TODO:
	}

	public Site getSite(){
		return site;
	}
}

由于是自定义控件，所以要在main.xml中加入它的话，得把布局写成下面这样：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
	android:layout_width="fill_parent" android:layout_height="fill_parent"
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical">
	<RelativeLayout 
		android:layout_width="fill_parent" android:layout_height="44dp"
		android:background="@drawable/titlebar_lightgray_bg" android:orientation="horizontal">
		<ImageButton android:id="@+id/BtnWrite"
			android:layout_width="wrap_content" android:layout_height="fill_parent"
			android:layout_alignParentLeft="true" android:background="@android:color/transparent"
			android:src="@drawable/write_button">
		</ImageButton>
		<TextView android:id="@+id/TextViewUsername"
			android:layout_width="fill_parent" android:layout_height="fill_parent"
			android:textColor="@color/black" android:gravity="center" android:textSize="18sp">
		</TextView>
		<ImageButton android:id="@+id/BtnRefresh"
			android:layout_width="wrap_content" android:layout_height="fill_parent"
			android:layout_alignParentRight="true" android:background="@android:color/transparent"
			android:src="@drawable/refresh_button">
		</ImageButton>
	</RelativeLayout>
	<com.wenbin.test.BlogListView android:id="@+id/sinaList" android:layout_width="fill_parent"
		android:layout_height="fill_parent" android:clickable="true"
		android:divider="@drawable/divider" android:dividerHeight="1dp">
	</com.wenbin.test.BlogListView>
</LinearLayout>

其中的divider属性是定义Item间的分隔条的。

最后，运行结果发现没有显示出列表来，那是因为它没有数据，为ListView加简单的测试数据例如数组这事就不在这写代码了，反正接下来就该添加正式的数据了。