在ViewPager中添加ListView

有时候我们需要在ViewPager中加入ListView 实现各个分页之间左右滑动，ListView分页上上下滑动

实现的方法大致如下：

首先我们为ListView设置一个布局文件 list1.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">
    <ListView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/listview"></ListView>
</LinearLayout>

接下来我们设置一下ListView的样式 item_listview.xml

<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
    tools:context="com.cx.imooc.MainActivity"
>
    <CheckBox
        android:focusable="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/checkbox"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/title"
        android:textSize="16sp"
        android:text="Android新技能"
        android:textColor="#444"
        android:singleLine="true"
        android:layout_alignParentLeft="true"/>
    <TextView
        android:id="@+id/context"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/title"
        android:layout_marginTop="10dp"
        android:layout_toLeftOf="@+id/checkbox"
        android:text="Android打造万能的ListView"
        android:minLines="1"
        android:maxLines="2"
        android:textSize="16sp"
        android:textColor="#898989"
        />
    <TextView
        android:id="@+id/time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/context"
        android:layout_marginTop="10dp"
        android:text="2013-12-12"
        android:textSize="16sp"
        android:textColor="#898989"
        />
    <TextView
        android:id="@+id/phone"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/context"
        android:layout_marginTop="10dp"
        android:text="18848900900"
        android:textSize="16sp"
        android:textColor="#fff"
        android:drawableLeft="@drawable/phone"
        android:layout_alignParentRight="true"
        android:drawablePadding="5dp"
        android:paddingRight="3dp"
        android:background="#1161D6"
        android:gravity="center"
        />


</RelativeLayout>

我们另外设置3个TextView实现分页效果，在这里就不贴代码了

在MainActivity中我们声明一个List<View>来存储View,声明一个ListView 一个PagerAdapter

private ListView listView ;

private ViewPager viewPager;
private PagerAdapter pagerAdapter;
private List<View> views = new ArrayList<View>();

private List<Bean> mDatas;

接下来我们对数据进行初始化

private void initDatas() {
    mDatas = new ArrayList<Bean>();
    for(int i = 1;i<=10;i++) {
        Bean bean = new Bean("AndroidGet"+i, "ac", "2015-11-11", "1884896xxxx");
        mDatas.add(bean);
    }
}

完成后首先对PagerAdapter进行初始化

viewPager = (ViewPager) findViewById(R.id.viewpager);

接下来对layoutInflater实例化

LayoutInflater layoutInflater = LayoutInflater.from(this);

View t1=layoutInflater.inflate(R.layout.list2,null);
View t2=layoutInflater.inflate(R.layout.list3,null);
View t3=layoutInflater.inflate(R.layout.list1,null);
View t4=layoutInflater.inflate(R.layout.list4,null);

读取4个View

这段代码首先我们对listview进行初始化,listview因为不在主布局文件中，所以我们没有办法直接通过findviewbyId(R.id.listview)来读取 不然会发生空指针错误

所以我们首先将listview所在的布局文件实例化

View t3=layoutInflater.inflate(R.layout.list1,null);

接着我们就通过 listview = (ListView)t3.findviewbyId(R.id.listview) 来读取出listview

接下来通过listview.setAdapter()来设置Adapter 

listView = (ListView) t3.findViewById(R.id.listview); 

listView.setAdapter(new CommonAdapter<Bean>(MainActivity.this, mDatas, R.layout.item_listview) {
        @Override
        public void Convert(ViewHolder viewHolder, final Bean bean) {
            viewHolder.setText(R.id.title, bean.getTitle());
            viewHolder.setText(R.id.context, bean.getContext());
            viewHolder.setText(R.id.time, bean.getTime());
            viewHolder.setText(R.id.phone, bean.getPhone());
            final CheckBox cb = viewHolder.getView(R.id.checkbox);
            cb.setChecked(bean.isChecked());
            cb.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    bean.setChecked(cb.isChecked());
                }
            });
        }
    });

在这里我使用的是自定义的Adapter和viewHolder 

大家需要根据自己的ListView写对应的Adapter和viewHolder

接下来我们将这三个TextView 一个ListView加入List<View>中并为ViewPager设置Adapter

views.add(t1);
views.add(t2);
views.add(t3);
views.add(t4);
pagerAdapter = new PagerAdapter() {
    @Override
    public int getCount() {
        return views.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view==object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View view= views.get(position);
        container.addView(view);
        return view;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(views.get(position));
    }
};
viewPager.setAdapter(pagerAdapter);

重点需要注意的是以下这段代码

View t3=layoutInflater.inflate(R.layout.list1,null);

listView = (ListView) t3.findViewById(R.id.listview); 

我们必须先将ListView所在的布局文件实例化后 才可以进行findViewById操作 不然会报错！

如果大家还有什么疑问 留言我们一起交流 

效果如下