Android控件组合应用三

来源：互联网发布：ubuntu系统能干什么编辑：程序博客网时间：2024/05/02 00:59

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

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

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

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

view plain

<?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>

view plain

<?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……没错，在该控件完成布局的时候就要加进来了，该类的代码如下：

view plain

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中加入它的话，得把布局写成下面这样：

view plain

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