实现顶部轮播，下部listview经典布局的两种方式
开头：
在做android开发的时候，我们经常会遇到这样的布局，上面是一个图片轮播图，下面是一些列表的项目。很多新闻app，视频类app都采用这样的布局。起初的时候
由于没有很多参考，我自己想到了一种实现方式，就是用scrollview作为外面最大的布局，然后里面嵌套viewpager和listview，但是我现在非常不推荐这种方式，一方面由于这种方式
需要将listview完全展开，缺少了getview函数中应该有的复用与优化。而且结构嵌套复杂。经过一番查找与学习，学习到两种比较规范或者结构比较清晰的实现方式，那么下面，我来分别介绍
一下这两种方式。
转载请注明出处 http://www.cnblogs.com/gaoteng/p/4162749.html www.gaotenglife.com
方法一：listview的addheadview方法
首先我们新建一个布局文件，存放listview，如下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<?xml
version="1.0" encoding="utf-8"?><RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:layout_marginTop="16dp" android:text="first" /> <ListView android:id="@+id/list_view_first" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/textView1" /></RelativeLayout> |
布局很简单，里面就主要有一个listview。
然后顶部的轮播图，我们采用viewpager的方式去实现。同样新建一个布局，里面存放viewpager
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<?xml
version="1.0" encoding="utf-8"?><LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="100dp" android:orientation="vertical" > <android.support.v4.view.ViewPager android:id="@+id/headviewpager" android:layout_width="match_parent" android:layout_height="100dp" /></LinearLayout> |
通过上面两步，我们已经建立好了用到的布局文件，很简单。
那么接下来，viewpager需要一个adapter来填充数据，这里我们的数据，就是一些图片，让viewpager去展示。
我们再新建一个自己的viewpageradapter，这个adapger在后面的另一种实现方式中也会用到，所以，单独建立一个文件存放。
下面是代码:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
/** * *
@author xuelang www.gaotenglife.com * */public class ViewPageAdapter extends PagerAdapter { List<ImageView>
list = null;//我们用一个list存放所有的imageview public ViewPageAdapter
(List<ImageView> _list) { list
= _list; } @Override public void destroyItem(View
container, int position,
Object object) { //
TODO Auto-generated method stub ((ViewPager)container).removeView(list.get(position)); } @Override public Object
instantiateItem(View container, int position)
{ //
TODO Auto-generated method stub ((ViewPager)
container).addView(list.get(position)); return list.get(position); } @Override public int getCount()
{ //
TODO Auto-generated method stub return list.size();//返回数据的个数 } @Override public boolean isViewFromObject(View
arg0, Object arg1) { //
TODO Auto-generated method stub return (arg0
== arg1);//这句话，比较重要，加上之后才能正确显示 } } |
上面的代码很简单，是一个pageadapter的标准用法。这样我们基本上所有的准备工作已经完成了，最后一步，就是我们把viewpager通过listview的addheadview方式加入到listview的头上。
下面便是acitivity中的主要代码（在文章的结尾，我会附加源代码的下载地址，有需要的可以下载详细看）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
private void initHeadView() { listview
= (ListView)this.findViewById(R.id.list_view_first); View
view = LayoutInflater.from(this).inflate(R.layout.head_viewpager, null); ViewPager
viewpager = (ViewPager)view.findViewById(R.id.headviewpager); List<ImageView>
listtemp = new ArrayList<ImageView>(); for(int i
= 0;i<4;i++) { ImageView
img = new ImageView(this); img.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,100)); img.setScaleType(ScaleType.FIT_XY); img.setBackgroundResource(R.drawable.ic_launcher); listtemp.add(img); } ViewPageAdapter
viewadapter = new ViewPageAdapter(listtemp); listview.addHeaderView(view); listview.setAdapter(new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,data)); viewpager.setAdapter(viewadapter); } |
简单解释一下上面的内容：
|
1
|
LayoutInflater.from(this).inflate(R.layout.head_viewpager, null);<br>这句话将我们之前建立好的布局文件载入进来<br><br>然后通过for循环初始化imageview的list |
|
1
|
for(int i
= 0;i<4;i++)<br>....<br><br>
最重要的就是这句话 |
|
1
|
listview.addHeaderView(view);<br><br>将初始化好的view添加到head上面。至此我们的第一种方法，就已经完成，是不是很简单。<br><br><br> |
方法二：viewpager作为listview的一个item
这种方式是我受到别的文章的启发，一个listview可以指定它每一个item为不同的布局类型，从而实现listview的多元化，那么我们同样可以利用这个方法。
把listview的第一项初始化为viewpager，这样不也就实现了顶部时viewpager的效果了嘛。说干就干，代码继续码起来。
在这种方式中，最主要的内容部分就在listview的adapter中。所以我也就主要介绍这一个adapter，我相信，看懂了这个adapter，那么其他部分，自然很容易理解了。
在官方api中提供了下面这两个方法，这也是今天实现这个功能主要的两个方法。
getViewTypeCount //用来返回在这个listview中有几种不同的item类型
getItemViewType //用来返回某个具体位置上面的item的类型（）
|
1
2
3
4
5
6
7
8
9
10
11
|
@Override public int getItemViewType(int position)
{ //
TODO Auto-generated method stub return position>0?0:1; } @Override public int getViewTypeCount()
{ //
TODO Auto-generated method stub return 2; } |
由于我们只做一个简单演示，所以就分为两种类型，一种是viewpager类型的item，另一种是不同类型的item，所以当position大于0，也就是我们的普通类型，position等于0，就是第一项，也就是viewpager。
接下来便是这个功能最最重要的一个函数getview，因为我们将在这个函数中做所有的显示工作。
我们先把代码附上，然后详细介绍。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
@Override public View
getView(int position,
View convertView, ViewGroup parent) { //
TODO Auto-generated method stub View
view = null; if(getItemViewType(position)
== 0)// { ViewHolder
holder = null; if(convertView==null) { view
= m_inflater.inflate(R.layout.list_item, null); holder
= new ViewHolder(); holder.textView
= (TextView)view.findViewById(R.id.list_item); view.setTag(holder); } else { view
= convertView; holder
= (ViewHolder)view.getTag(); } holder.textView.setText(position+""); } else if(getItemViewType(position)
== 1)//如果是顶部viewpager { ViewPagerHolder
holder = null; if(convertView==null) { view
= m_inflater.inflate(R.layout.head_viewpager, null); holder
= new ViewPagerHolder(); holder.viewPager
= (ViewPager)view.findViewById(R.id.headviewpager); List<ImageView>
listtemp = new ArrayList<ImageView>(); for(int i
= 0;i<4;i++) { ImageView
img = new ImageView(SecondActivity.this); img.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,100)); img.setScaleType(ScaleType.FIT_XY); img.setBackgroundResource(R.drawable.ic_launcher); listtemp.add(img); } ViewPageAdapter
viewadapter = new ViewPageAdapter(listtemp); holder.viewPager.setAdapter(viewadapter); view.setTag(holder); } else { view
= convertView; holder
= (ViewPagerHolder)view.getTag(); } } return view; }} |
下面我来详细说明一下上面的函数。其实基本的骨架大家应该都能看懂。使用了listview复用的概念。
|
1
|
if(getItemViewType(position)
== 1) |
通过这个判断目前需要显示的view是哪种类型。那么这里如果是1，就是我们的viewpager项，
然后再判断convertView是否为空，来决定是否复用。
如果为空，说明在内存中没有保留过，于是通过LayoutInflate创建view，同时我们创建了一个
|
1
|
holder
= new ViewPagerHolder(); |
缓冲，用来保存之前创建好的布局，以便下次使用。
然后创建好viewpager的数据List<ImageView> data，使用前面的ViewPageAdapter，将数据与viewpager绑定，然后用settag的方式，把holder数据，保存到view里面。
当判断convertview不为空的时候，我们从convertview中取出tag，转换为holder，然后就又得到了viewpager对象了。
这是if(getItemViewType(position) == 1)的情况。
那么if(getItemViewType(position) == 0)的情况就更简单了，基本上和这类似。
也是复用了convertview，然后通过holder的方式，将view对象保存起来，不用下一次通过findviewbyid的方式来查找了，提高了效率。
转载请注明出处 http://www.cnblogs.com/gaoteng/p/4162749.html www.gaotenglife.com
下面附上源码下载地址
csdn资源
http://download.csdn.net/detail/gaotengguojianhong/8308407
github资源
