viewpager使用大全

主要功能

1.根据页面改变设置文本

2.添加指示点

3.支持左右无限滑动

4.自动滑动页面

5.当手滑动或者按下的时候停止滑动

6.添加点击事件

 

运行起来的效果。

主页面布局:main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="700dp"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/viewpager"
        android:background="#44000000"
        android:orientation="vertical">
        <TextView
            android:id="@+id/tv_title"
            android:gravity="center"
            android:textColor="#ffffff"
            android:textSize="20sp"
            android:text="美国队长3"
            android:padding="3dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <LinearLayout
            android:id="@+id/ll_point_group"
            android:layout_gravity="center_horizontal"
            android:orientation="horizontal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
        </LinearLayout>
    </LinearLayout>
</RelativeLayout>

drawable文件

point_normal.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <size android:width="12dp" android:height="12dp"/>
    <solid android:color="#44000000"/>
</shape>

point_press.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <size android:width="12dp" android:height="12dp"/>
    <solid android:color="#ff0000"/>
</shape>

point_select.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:drawable="@drawable/point_normal"/>
    <item android:state_enabled="true" android:drawable="@drawable/point_press"/>
</selector>

实现的类

package com.example.viewpager;

import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.annotation.NonNull;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    private ViewPager viewpager;
    private TextView tv_title;
    private LinearLayout ll_point_group;
    private ArrayList<ImageView> imageViews;

    //图片资源ID
    private final int[] imagesIds = {
            R.drawable.a,
            R.drawable.b,
            R.drawable.c,
            R.drawable.d,
            R.drawable.f,
    };

    //图片标题列表
    private final String[] imagesDescriptions = {
            "美美的",
            "飘飘的",
            "亮亮的",
            "仙仙的",
            "肉肉的",
            "么么哒"
    };

    private Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            int item = viewpager.getCurrentItem() + 1;
            viewpager.setCurrentItem(item);
            //延迟发消息
            handler.sendEmptyMessageDelayed(0, 3000);

        }
    };

    /**
     * 上一次高亮显示的位置
     */
    private int prePosition = 0;

    /**
     * 是否已经滚动
     */
    private boolean isScroll = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewpager = findViewById(R.id.viewpager);
        tv_title = findViewById(R.id.tv_title);
        ll_point_group = findViewById(R.id.ll_point_group);

        //viewpager的使用
        //1.在布局中定义
        //2.在代码中实例化
        //3.准备数据
        imageViews = new ArrayList<>();
        for (int i = 0; i < imagesIds.length; i++) {
            ImageView imageView = new ImageView(this);
            imageView.setBackgroundResource(imagesIds[i]);
            //添加到集合
            imageViews.add(imageView);
            //添加点
            ImageView point = new ImageView(this);
            point.setBackgroundResource(R.drawable.point_select);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(15, 15);
            if (i == 0) {
                point.setEnabled(true);  //显示红色

            } else {
                point.setEnabled(false);  //显示灰色
            }

            params.leftMargin = 8;
            point.setLayoutParams(params);
            ll_point_group.addView(point);

        }
        //4.设置适配器,绑定数据
        viewpager.setAdapter(new MyPagerAdapter());
        //设置监听viewpager页面的改变
        viewpager.addOnPageChangeListener(new MyOnPageChangeListener());
        //设置中间位置
        int item = Integer.MAX_VALUE / 2 - Integer.MAX_VALUE / 2 % imageViews.size();  //要保证是imageViews的整数倍
        viewpager.setCurrentItem(item);
        tv_title.setText(imagesDescriptions[prePosition]);

        //发消息
        handler.sendEmptyMessageDelayed(0, 3000);

    }


    class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {

        /**
         * 当页面滚动了的时候回调这个方法
         *
         * @param i  当前页面的位置
         * @param v  滑动页面的百分比
         * @param i1 在屏幕上华东的像素
         */
        @Override
        public void onPageScrolled(int i, float v, int i1) {

        }

        /**
         * 当某个页面被选中的时候回调
         *
         * @param i 被选中页面的位置
         */
        @Override
        public void onPageSelected(int i) {

            int realPosition = i % imageViews.size();
            //设置文本
            tv_title.setText(imagesDescriptions[realPosition]);
            //把上一个高亮的设置默认灰色
            ll_point_group.getChildAt(prePosition).setEnabled(false);
            //当前的设置为高亮 红色
            ll_point_group.getChildAt(realPosition).setEnabled(true);
            prePosition = realPosition;
        }

        /**
         * 当页面滚动状态变化的时候回调这个方法
         * 静止  >   滑动
         * 滑动  >  静止
         * 静止  >   拖拽
         *
         * @param i
         */
        @Override
        public void onPageScrollStateChanged(int i) {
            if (i == ViewPager.SCROLL_STATE_DRAGGING) {
                isScroll = true;
                handler.removeCallbacksAndMessages(null);
            } else if (i == ViewPager.SCROLL_STATE_SETTLING) {

            } else if (i == ViewPager.SCROLL_STATE_IDLE && isScroll) {
                isScroll = false;
                handler.removeCallbacksAndMessages(null);
                handler.sendEmptyMessageDelayed(0, 3000);
            }
        }
    }

    class MyPagerAdapter extends PagerAdapter {

        @NonNull
        @Override
        public Object instantiateItem(@NonNull ViewGroup container, int position) {
            int realPosition = position % imageViews.size();
            ImageView imageView = imageViews.get(realPosition);
            container.addView(imageView);

            imageView.setOnTouchListener(new View.OnTouchListener() {
                @Override
                public boolean onTouch(View view, MotionEvent motionEvent) {
                    switch (motionEvent.getAction()) {
                        case MotionEvent.ACTION_DOWN:   //按下
                            handler.removeCallbacksAndMessages(null);
                            break;
                        case MotionEvent.ACTION_MOVE:  //移动
                            break;
                        case MotionEvent.ACTION_CANCEL:  //移动
//                            handler.removeCallbacksAndMessages(null);
//                            handler.sendEmptyMessageDelayed(0, 3000);
                            break;
                        case MotionEvent.ACTION_UP:  //离开
                            handler.removeCallbacksAndMessages(null);
                            handler.sendEmptyMessageDelayed(0, 3000);
                            break;
                    }
                    return false;
                }
            });

            imageView.setTag(position);
            imageView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    int position = (int) view.getTag() % imageViews.size();
                    String text = imagesDescriptions[position];
                    Toast.makeText(MainActivity.this, "text =" + text, Toast.LENGTH_SHORT).show();
                }
            });

            return imageView;
        }

        /**
         * @param container viewpager
         * @param position  释放的位置
         * @param object    释放的页面
         */
        @Override
        public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
//            super.destroyItem(container, position, object);
            container.removeView((View) object);
        }

        @Override
        public int getCount() {
            return Integer.MAX_VALUE;
        }

        /**
         * 判断view和o是否是同一个实例
         *
         * @param view 页面
         * @param o
         * @return
         */
        @Override
        public boolean isViewFromObject(@NonNull View view, @NonNull Object o) {
//            if(view  == o){
//                return true;
//            }else {
//                return false;
//            }
            return view == o;
        }
    }
}

drawable-hdpi  是自己偶像的几张照片,素材大家可以自己找,但是尺寸比例最好一样,否则不好看。

哈哈哈

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值