listview与viewpager结合使用

Posted 2022-06-24 Mars-xq

1、viewpager作为listview的头部布局：

核心： lv.addHeaderView(view);

示例：

布局：

activity_main.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="match_parent"
    tools:context=".MainActivityI">

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:text="viewpager是listview的头部布局,可以一起滑动" />

    <ListView
        android:id="@+id/lv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tv" />
</RelativeLayout>

vp_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:orientation="vertical"
    tools:context=".MainActivityI">

    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="100dp" />

</LinearLayout>

java代码：

package com.example.administrator.mylistviewpager;

import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.LayoutParams;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

import butterknife.BindView;
import butterknife.ButterKnife;

//listview添加头部view
public class MainActivityI extends AppCompatActivity 

    @BindView(R.id.tv)
    TextView tv;
    @BindView(R.id.lv)
    ListView lv;

    @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);

        View view = LayoutInflater.from(this).inflate(R.layout.vp_layout, null);
        ViewPager vp = (ViewPager) view.findViewById(R.id.vp);

        List<ImageView> list = new ArrayList<>();
        for (int i = 0; i < 4; i++) 
            ImageView img = new ImageView(this);
            //设置宽高（要用到父布局的LayoutParams）
            img.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, 100));
            //设置图形范围
            img.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
            //设置背景图
            img.setBackgroundResource(R.mipmap.ic_launcher);
            //添加到list集合
            list.add(img);
        

        //listview添加头部view
        ViewPagerAdapter viewadapter = new ViewPagerAdapter(list);
        lv.addHeaderView(view);
        //listview绑定adapter
        List<String> data = new ArrayList<>();
        for (int i = 0; i < 20; i++) 
            data.add("item=====" + i);
        

        ArrayAdapter<String> arrayAdapter =
                new ArrayAdapter<String>(this,
                        android.R.layout.simple_list_item_1, data);
        lv.setAdapter(arrayAdapter);
        vp.setAdapter(viewadapter);
    

2、viewpager作为listview的item

核心：

    @Override
    public int getViewTypeCount() 
        return 2;
    

    @Override
    public int getItemViewType(int position) 
        return position > 0 ? 0 : 1;
    

 @Override
    public View getView(int position, View convertView, ViewGroup parent) 
        View view = null;
        if (getItemViewType(position) == 0) 
            //如果listview的不是第一项viewpager
            ViewHolder holder = null;
            if (convertView == null) 
                view = LayoutInflater.from(context).inflate(R.layout.listview_item, null);
                holder = new ViewHolder(view);
                view.setTag(holder);
             else 
                view = convertView;
                holder = (ViewHolder) view.getTag();
            
            holder.tv.setText(position + "====");
         else if (getItemViewType(position) == 1) 
            //如果是顶部viewpager
            ViewPagerHolder holder = null;
            if (convertView == null) 
                view = LayoutInflater.from(context).inflate(R.layout.vp_layout, null);
                holder = new ViewPagerHolder(view);

                List<ImageView> listtemp = new ArrayList<ImageView>();
                for (int i = 0; i < 4; i++) 
                    ImageView img = new ImageView(context);
                    img.setLayoutParams(new LinearLayout.LayoutParams(ViewPager.LayoutParams.WRAP_CONTENT, 100));
                    img.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
                    img.setBackgroundResource(R.mipmap.ic_launcher);
                    listtemp.add(img);
                
                ViewPagerAdapter viewadapter = new ViewPagerAdapter(listtemp);
                holder.vp.setAdapter(viewadapter);

                view.setTag(holder);
             else 
                view = convertView;
                holder = (ViewPagerHolder) view.getTag();
            
        

        return view;
    

示例：

布局：
activity_mainii.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="match_parent"
    tools:context=".MainActivityI">

    <TextView
        android:id="@+id/tv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:text="viewpager是listview的一个item，可以一起滑动"/>

    <ListView
        android:id="@+id/lv"
        android:background="@color/colorAccent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/tv" />
</RelativeLayout>

MainActivityII

package com.example.administrator.mylistviewpager;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ListView;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

import butterknife.BindView;
import butterknife.ButterKnife;

//listview的item
public class MainActivityII extends AppCompatActivity 

    @BindView(R.id.lv)
    ListView lv;
    @BindView(R.id.tv)
    TextView tv;

    @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_mainii);
        ButterKnife.bind(this);

//        View view = LayoutInflater.from(this).inflate(R.layout.vp_layout, null);
//        ViewPager vp = (ViewPager) view.findViewById(R.id.vp);
//
//        List<ImageView> list = new ArrayList<>();
//        for (int i = 0; i < 4; i++) 
//            ImageView img = new ImageView(this);
//            //设置宽高（要用到父布局的LayoutParams）
//            img.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, 100));
//            //设置图形范围
//            img.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
//            //设置背景图
//            img.setBackgroundResource(R.mipmap.ic_launcher);
//            //添加到list集合
//            list.add(img);
//        

        //listview添加头部view
//        ViewPagerAdapter viewadapter = new ViewPagerAdapter(list);
//        lv.addHeaderView(view);
        //listview绑定adapter

        List<String> list1 = new ArrayList<>();
        for (int i = 0; i < 200; i++) 
            list1.add("item=====" + i);
        

        MyAdapter myAdapter = new MyAdapter(this, list1);
        lv.setAdapter(myAdapter);
//        vp.setAdapter(viewadapter);
    

MyAdapter

package com.example.administrator.mylistviewpager;

import android.content.Context;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

import butterknife.BindView;
import butterknife.ButterKnife;

/**
 * Created by Administrator on 2016/7/8.
 */
public class MyAdapter extends BaseAdapter 
    private Context context;
    private List<String> list1 = new ArrayList<>();

    public MyAdapter(Context context, List<String> list1) 
        this.context = context;
        this.list1 = list1;
    

    @Override
    public int getCount() 
        return list1.size();
    

    @Override
    public Object getItem(int position) 
        return list1.get(position);
    

    @Override
    public long getItemId(int position) 
        return position;
    

    @Override
    public int getViewTypeCount() 
        return 2;
    

    @Override
    public int getItemViewType(int position) 
        return position > 0 ? 0 : 1;
    

    @Override
    public View getView(int position, View convertView, ViewGroup parent) 
        View view = null;
        if (getItemViewType(position) == 0)    //如果listview的不是第一项viewpager
            ViewHolder holder = null;
            if (convertView == null) 
                view = LayoutInflater.from(context).inflate(R.layout.listview_item, null);
                holder = new ViewHolder(view);
                view.setTag(holder);
             else 
                view = convertView;
                holder = (ViewHolder) view.getTag();
            
            holder.tv.setText(position + "====");
         else if (getItemViewType(position) == 1)//如果是顶部viewpager
        
            ViewPagerHolder holder = null;
            if (convertView == null) 
                view = LayoutInflater.from(context).inflate(R.layout.vp_layout, null);
                holder = new ViewPagerHolder(view);

                List<ImageView> listtemp = new ArrayList<ImageView>();
                for (int i = 0; i < 4; i++) 
                    ImageView img = new ImageView(context);
                    img.setLayoutParams(new LinearLayout.LayoutParams(ViewPager.LayoutParams.WRAP_CONTENT, 100));
                    img.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
                    img.setBackgroundResource(R.mipmap.ic_launcher);
                    listtemp.add(img);
                
                ViewPagerAdapter viewadapter = new ViewPagerAdapter(listtemp);
                holder.vp.setAdapter(viewadapter);

                view.setTag(holder);
             else 
                view = convertView;
                holder = (ViewPagerHolder) view.getTag();
            
        

        return view;
    

    public class ViewHolder 
        @BindView(R.id.tv)
        TextView tv;

        ViewHolder(View view) 
            ButterKnife.bind(this, view);
        
    

    public class ViewPagerHolder 
        @BindView(R.id.vp)
        ViewPager vp;

        ViewPagerHolder(View view) 
            ButterKnife.bind(this, view);
        
    

listview_item

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivityI">

    <TextView
        android:id="@+id/tv"
        android:gravity="center"
        android:textSize="30sp"
        android:background="@color/colorAccent"
        android:textColor="#000000"
        android:text="我是一个text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

vp_layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:orientation="vertical"
    tools:context=".MainActivityI">

    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="100dp" />

</LinearLayout>

3、listview和viewpager一起作为scrollerview的子元素

核心：

 //解决只能显示listview的一个item
        ViewGroup.LayoutParams listViewParams = getListViewParams();
        lv.setLayoutParams(listViewParams);

        //解决不显示viewpager,只显示listview
        sv.smoothScrollTo(0, 0);

    /**
     * 动态的算出ListView实际的LayoutParams
     * 最关键的是算出LayoutParams.height
     * 解决只能显示一个item
     */
    public ViewGroup.LayoutParams getListViewParams() 
        //通过ListView获取其中的适配器adapter
        ListAdapter listAdapter = lv.getAdapter();

        //声明默认高度为0
        int totalHeight = 0;
        //便利ListView所有的item，累加所有item的高度就是ListView的实际高度
        for (int i = 0; i < listAdapter.getCount(); i++) 
            View listItem = listAdapter.getView(i, null, lv);
            listItem.measure(0, 0);
            totalHeight += listItem.getMeasuredHeight();
        
        //将累加获取的totalHeight赋值给LayoutParams的height属性
        ViewGroup.LayoutParams params = lv.getLayoutParams();
        params.height = totalHeight + (lv.getDividerHeight() * (listAdapter.getCount() - 1));
        return params;
    

示例demo：

布局

<?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="match_parent">

    <TextView
        android:id="@+id/tv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="viewpager和listview在同一个scrollview中一起滑动"
        android:textSize="20sp" />

    <ScrollView
        android:id="@+id/scrollView_MainActivity"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/tv"
        android:background="@android:color/holo_red_light">

        <LinearLayout
            android:id="@+id/content_Layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/holo_orange_light"
            android:orientation="vertical">

            <android.support.v4.view.ViewPager
                android:id="@+id/viewPager_MainActivity"
                android:layout_width="match_parent"
                android:layout_height="200dp" />

            <ListView
                android:id="@+id/listView_MainActivity"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/holo_green_light" />

        </LinearLayout>
    </ScrollView>
</RelativeLayout>

MainActivityIII

package com.example.administrator.mylistviewpager;

import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ListAdapter;
import android.widget.ListView;
import android.widget.ScrollView;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

import butterknife.BindView;
import butterknife.ButterKnife;

public class MainActivityIII extends AppCompatActivity 

    @BindView(R.id.viewPager_MainActivity)
    ViewPager viewPagerMainActivity;
    @BindView(R.id.listView_MainActivity)
    ListView lv;
    @BindView(R.id.content_Layout)
    LinearLayout contentLayout;
    @BindView(R.id.scrollView_MainActivity)
    ScrollView sv;
    @BindView(R.id.tv)
    TextView tv;

    @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_mainiii);
        ButterKnife.bind(this);

        List<ImageView> list = new ArrayList<>();
        for (int i = 0; i < 4; i++) 
            ImageView img = new ImageView(this);
            //设置宽高（要用到父布局的LayoutParams）
            img.setLayoutParams(new LinearLayout
                    .LayoutParams(ViewPager.LayoutParams.WRAP_CONTENT, 100));
            //设置图形范围
            img.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
            //设置背景图
            img.setBackgroundResource(R.mipmap.ic_launcher);
            //添加到list集合
            list.add(img);
        
        ViewPagerAdapter viewadapter = new ViewPagerAdapter(list);
        viewPagerMainActivity.setAdapter(viewadapter);

        List<String> list1 = new ArrayList<>();
        for (int i = 0; i < 200; i++) 
            list1.add("item=====" + i);
        
        ArrayAdapter<String> arrayAdapter =
                new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, list1);
        lv.setAdapter(arrayAdapter);

        //解决只能显示listview的一个item
        ViewGroup.LayoutParams listViewParams = getListViewParams();
        lv.setLayoutParams(listViewParams);

        //解决不显示viewpager,只显示listview
        sv.smoothScrollTo(0, 0);
    

    /**
     * 动态的算出ListView实际的LayoutParams
     * 最关键的是算出LayoutParams.height
     * 解决只能显示一个item
     */
    public ViewGroup.LayoutParams getListViewParams() 
        //通过ListView获取其中的适配器adapter
        ListAdapter listAdapter = lv.getAdapter();

        //声明默认高度为0
        int totalHeight = 0;
        //便利ListView所有的item，累加所有item的高度就是ListView的实际高度
        for (int i = 0; i < listAdapter.getCount(); i++) 
            View listItem = listAdapter.getView(i, null, lv);
            listItem.measure(0, 0);
            totalHeight += listItem.getMeasuredHeight();
        
        //将累加获取的totalHeight赋值给LayoutParams的height属性
        ViewGroup.LayoutParams params = lv.getLayoutParams();
        params.height = totalHeight + (lv.getDividerHeight() * (listAdapter.getCount() - 1));
        return params;
    

ViewPagerAdapter

package com.example.administrator.mylistviewpager;

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import java.util.List;

/**
 * Created by Administrator on 2016/7/8.
 */
public class ViewPagerAdapter extends PagerAdapter 

    private List<ImageView> list;

    public ViewPagerAdapter(List<ImageView> list) 
        this.list = list;
    

    @Override
    public int getCount() 
        return list.size();
    

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

    @Override
    public Object instantiateItem(ViewGroup container, int position) 
        container.addView(list.get(position));
        return list.get(position);
    

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) 
        container.removeView(list.get(position));