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加简单的测试数据例如数组这事就不在这写代码了，反正接下来就该添加正式的数据了。