看新浪微博的界面,给我们的第一感觉应该是用了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加简单的测试数据例如数组这事就不在这写代码了,反正接下来就该添加正式的数据了。