ListView与ViewPager组合（一）

listview与viewpager组合常用的有两种方式，第一种为listview添加header，我们把viewpager设置为listview的header便可以实现，第二种是把viewpager设置为listview的第一个选项。两种方式实现的效果是一样的，但是第一种方式结构比较清晰，在后续我们设置监听的时候也比较简单，个人不推荐使用第二种方式。这里我们用第一种方式，下一篇我们再介绍第二种。

实现效果我就不截图了，就是viewpager能跟着listview上下滑动，而viewpager可以左右滑动。

onCreate方法

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        context = getApplicationContext();
        initView();
        initData();

    }
           

第一步：加载布局

private void initView() {
        setContentView(R.layout.activity_main);
        listView = (ListView) findViewById(R.id.lv_main);
        View header = View.inflate(context, R.layout.listview_header, null);
        viewPager = (ViewPager) header.findViewById(R.id.viewpager_main);
        listView.addHeaderView(header);//在setAdapter前
    }
           

第二步：加载数据并设置adapter

private void initData() {
        String[] viewPagerData = new String[]{"第一页", "第二页", "第三页", "第四页", "第五页"};
        String[] listViewData = new String[];
        for (int i = ; i < listViewData.length; i++) {
            listViewData[i] = "item" + i;
        }
        listViewAdapter = new ListViewAdapter(context, listViewData);
        viewPagerAdapter = new ViewPagerAdapter(context, viewPagerData);
        listView.setAdapter(listViewAdapter);
        viewPager.setAdapter(viewPagerAdapter);
    }
           

好了，实现了这两步，基本就大功告成了。下面是布局文件，比较简单，也就贴上来了

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/main_bg"
    tools:context=".MainActivity">

    <ListView
        android:id="@+id/lv_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></ListView>
</RelativeLayout>
           

listview_header.xml

<?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="match_parent"
    android:orientation="vertical">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager_main"
        android:layout_width="match_parent"
        android:layout_height="300dp"></android.support.v4.view.ViewPager>
</LinearLayout>
           

viewpager_item.xml

<?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="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_viewpager_item"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/black"
        android:textSize="24sp" />
</LinearLayout>
           

listview_item.xml

<?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="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_listview_item"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="30dp"
        android:textColor="@color/black"
        android:textSize="20sp" />
</LinearLayout>
           

下篇我们将接着介绍第二种方式，viewpager设置为listview的第一个选项。

ListView与ViewPager组合（二）

源码下载