Android图片轮播列表的实现

这个效果在交友app中比较常见，一般作为首页使用，顶部是一个自动轮播的ViewPager，下面放一个横向LinearLayout，最下面要放一个ListView，但是注意这三个部分都支持滑动，应该和固定在顶部的标题栏和底部的操作栏分开，也就是把ViewPager和LinearLayout以及ListView都放在父控件ScrollView里面

布局文件代码：

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

    <include layout="@layout/title_bar"/>

<ScrollView
    android:layout_width="match_parent"
    android:id="@+id/sv"
    android:layout_height="0dp"
    android:layout_weight="1">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

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

    <LinearLayout
        android:id="@+id/ivs"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_margin="10dp"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/iv1"
            android:layout_weight="1"
            android:layout_marginStart="30dp"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:src="@drawable/index_icon"/>

        <ImageView
            android:id="@+id/iv2"
            android:layout_weight="1"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:src="@drawable/index_icon"/>

        <ImageView
            android:id="@+id/iv3"
            android:layout_weight="1"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:src="@drawable/index_icon"/>

        <ImageView
            android:id="@+id/iv4"
            android:layout_weight="1"
            android:layout_marginEnd="30dp"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:src="@drawable/index_icon"/>
    </LinearLayout>

    <com.oridway.www.uiframe.utils.ListViewForScrollView
        android:id="@+id/lvfsv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>
</ScrollView>

    <LinearLayout
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/index"
            android:layout_width="60dp"
            android:layout_height="wrap_content"
            android:drawableTop="@drawable/ic_home_black_24dp"
            android:gravity="center"
            android:text="首页"
            android:textColor="@color/black" />

        <TextView
            android:id="@+id/message"
            android:layout_width="60dp"
            android:layout_height="wrap_content"
            android:drawableTop="@drawable/ic_message_black_24dp"
            android:gravity="center"
            android:text="消息"
            android:textColor="@color/black" />

        <TextView
            android:id="@+id/community"
            android:layout_width="60dp"
            android:layout_height="wrap_content"
            android:drawableTop="@drawable/ic_people_black_24dp"
            android:gravity="center"
            android:text="社区"
            android:textColor="@color/black" />

        <TextView
            android:id="@+id/self"
            android:layout_width="60dp"
            android:layout_height="wrap_content"
            android:drawableTop="@drawable/ic_person_black_24dp"
            android:gravity="center"
            android:text="我"
            android:textColor="@color/black" />
    </LinearLayout>
</LinearLayout>

主窗口代码：

public class IndexActivity extends AppCompatActivity implements View.OnClickListener{

    private Context mContext;
    private List<Integer> mImageList;
    private List<Candidate> mCandidateList;
    private ViewPagerAdapter mPagerAdapter;
    private CandidateListAdapter mListAdapter;

    @SuppressLint("HandlerLeak")
    private Handler handler = new Handler() {

        @Override
        public void handleMessage(Message msg) {
            //每次将当前的位置加1，也就是向右滑动一次
            vp.setCurrentItem(vp.getCurrentItem() + 1);
            //递归无限循环调用
            handler.sendEmptyMessageDelayed(0x123, 2000);
        }
    };

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

        initData();
        initView();
        intListener();
    }

    //初始化数据源，固定写法 1.实例化容器 2.实例化适配器 3.设置适配器
    private void initData() {
        mContext = this;
        mImageList = new ArrayList<>();
        mCandidateList = new ArrayList<>();
        mListAdapter = new CandidateListAdapter(mCandidateList);
        mPagerAdapter = new ViewPagerAdapter(mImageList);
        lvfsv.setAdapter(mListAdapter);
        vp.setAdapter(mPagerAdapter);

        getListData(10);
        getPagerData();

        //间隔2秒发送一次信息
        handler.sendEmptyMessageDelayed(0x123, 2000);
    }

    //生成ViewPager数据源
    private void getPagerData() {
        mImageList.add(R.drawable.bm1);
        mImageList.add(R.drawable.bm2);
        mImageList.add(R.drawable.bm3);
        mImageList.add(R.drawable.bm4);
        mImageList.add(R.drawable.bm5);
        mImageList.add(R.drawable.bm6);

        mPagerAdapter.notifyDataSetChanged();
        //初始的位置在正中间
        vp.setCurrentItem(mPagerAdapter.getCount() / 2);
    }

    //生成ListView数据源
    private void getListData(int num) {
        for (int i = 0; i < num; i++) {
            Candidate candidate = new Candidate();
            candidate.setName("姓名:尼尔斯·亨利克·戴维·玻尔");
            candidate.setInfo("职业:学者,物理学家,足球运动员");
            candidate.setTrait("成就:哥本哈根学派的创始人,1922年获得诺贝尔物理学奖");
            mCandidateList.add(candidate);
        }

        mListAdapter.notifyDataSetChanged();
    }

    private void initView() {
        tvTitleMiddle.setText("轮播列表");
        //手动设置ScrollView的位置
        scrollView.smoothScrollTo(0, 0);
    }

    //初始化监听
    private void intListener() {
        mPagerAdapter.setmCallback((v, position) -> {
            Toast.makeText(mContext, "position: " + position, Toast.LENGTH_SHORT).show();
        });

        lvfsv.setOnItemClickListener((parent, view, position, id) -> {
            Toast.makeText(mContext, "position: " + position, Toast.LENGTH_SHORT).show();
        });

        for (int i = 0; i < 4; i++) {
            ivs.getChildAt(i).setOnClickListener(this);
        }
    }

    @Override
    public void onClick(View v) {

        switch (v.getId()){
            case R.id.iv1:
            case R.id.iv2:
            case R.id.iv3:
            case R.id.iv4:
                Toast.makeText(mContext, "此处跳转", Toast.LENGTH_SHORT).show();
        }
    }
}

ListView需要覆盖onMeasure方法，代码如下：

public class ListViewForScrollView extends ListView {
    public ListViewForScrollView(Context context) {
        super(context);
    }
    public ListViewForScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    public ListViewForScrollView(Context context, AttributeSet attrs,
        int defStyle) {
        super(context, attrs, defStyle);
    }
    @Override
    /**
     * 重写该方法，达到使ListView适应ScrollView的效果
     */
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2,
        MeasureSpec.AT_MOST);
        super.onMeasure(widthMeasureSpec, expandSpec);
    }
}

ViewPager适配器代码：

public class ViewPagerAdapter extends PagerAdapter implements View.OnClickListener {

    //图片的资源id列表
    private List<Integer> mList;
    private Callback mCallback;

    public ViewPagerAdapter(List<Integer> mList) {
        this.mList = mList;
    }

    public void setmCallback(Callback mCallback) {
        this.mCallback = mCallback;
    }

    public interface Callback {
        void onClick(View v, int position);
    }

    @Override
    //将适配器中的数据设为无穷大
    public int getCount() {
        return Integer.MAX_VALUE;
    }

    @Override
    //固定写法，不覆盖会报错
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        container.removeView((View) object);
    }

    @Override
    //固定写法
    public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
        return view == object;
    }

    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        LayoutInflater inflater = LayoutInflater.from(container.getContext());
        ImageView imageView = (ImageView) inflater.inflate(R.layout.item_image_pager, null);

        //将position转换成余数
        int realPosition = position % mList.size();
        imageView.setImageResource(mList.get(realPosition));
        imageView.setOnClickListener(this);
        //tag放跳转需要的数据
        imageView.setTag(realPosition);
        //将实例加入父控件
        container.addView(imageView);
        return imageView;
    }

    @Override
    //使用接口将position回传
    public void onClick(View v) {
        mCallback.onClick(v, (int) v.getTag());
    }
}

大功告成，实现效果如下：