【Android】ViewPager左右滑动和小圆点使用

最新推荐文章于 2024-08-01 13:45:06 发布
最新推荐文章于 2024-08-01 13:45:06 发布
阅读量412 收藏
点赞数
文章标签： 移动开发 java
原文链接：https://my.oschina.net/huangxianfeng/blog/809974
版权

前言

ViewPager和ImageView以及Fragment的结合使用，是我们在开发的时候面对复杂一点的界面也能很好的实现，今天以一个demo的形式，记录ViewPager的基本使用法，并配合小圆点显示滑动进度结合使用。

首先我们先看布局如何实现：

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

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v4.view.ViewPager
            android:id="@+id/image_viewpager"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:background="@drawable/icon_1"/>

        <RelativeLayout
            android:id="@+id/rl"
            android:layout_width="wrap_content"
            android:layout_height="26dp"
            android:layout_gravity="bottom"
            android:background="#6f000000"
            android:padding="5dp"
            android:visibility="visible">

            <TextView
                android:id="@+id/pic_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:ellipsize="end"
                android:lines="1"
                android:maxEms="17"
                android:text="海淀区全面部署全国文明城区建设"
                android:textColor="#FFFFFF"
                android:textSize="11sp" />

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="16dp"
                android:layout_alignParentRight="true"
                android:gravity="center_vertical">

                <LinearLayout
                    android:id="@+id/ll_point_group"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:orientation="horizontal">
                </LinearLayout>

                <View
                    android:id="@+id/view_new_point"
                    android:layout_width="5dp"
                    android:layout_height="5dp"
                    android:layout_centerVertical="true"
                    android:background="@drawable/icon_dot_entity" />
            </RelativeLayout>
        </RelativeLayout>

    </FrameLayout>
</LinearLayout>

其中我们要有ViewPager和小圆点的显示位置，然后根据ViewPager的滚动来控制小圆点的显示。

在Activity中，要有在ViewPager中的各种监听具体的代码分析在代码中都有清晰的注释，那么我们就直接张贴源代码： ImageViewActivity.java

/**
 * @author :huangxianfeng on 2016/12/20.
 * ImageView和ViewPager的使用结合（要有小圆点知识点）
 */
public class ImageViewActivity extends AppCompatActivity {

    private int[] imgeId = {R.drawable.icon_1,R.drawable.icon_2,R.drawable.icon_3};
    private String[] imgeName = {"火龙果","山竹","菠萝"};
    private ViewPager mViewPager;
    private RelativeLayout mRl;
    private TextView mPicTitle;
    private LinearLayout mLLPointGroup;
    private View mViewNewPoint;
    private int currentPosition;
    private int mPointWidth;//小圆点的宽度

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_imageview);
        init();
        initAction();
    }

    /**
     * 初始化控件
     */
    private void init() {
        mViewPager = (ViewPager)findViewById(R.id.image_viewpager);
        mRl = (RelativeLayout)findViewById(R.id.rl);
        mPicTitle = (TextView)findViewById(R.id.pic_title);
        mLLPointGroup = (LinearLayout)findViewById(R.id.ll_point_group);
        mViewNewPoint = findViewById(R.id.view_new_point);
    }

    /**
     * 初始化控件的监听事件
     */
    private void initAction() {


        /**
         * 对ViewPager设置监听事件
         */
        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            /**
             *
             * @param position 当用手指滑动时，如果手指按在页面上不动，position和当前页面index是一致的。
             *                 如果手指向左拖动（相应页面向右翻动），这时候position大部分时间和当前页面是一致的，
             *                 只有翻页成功的情况下最后一次调用才会变为目标页面。（向右滑动同理）
             * @param positionOffset 是当前页面滑动比例，如果页面向右翻动，这个值不断变大，
             *                       最后在趋近1的情况后突变为0。如果页面向左翻动，这个值不断变小，最后变为0。
             * @param positionOffsetPixels 是当前页面滑动像素，变化情况和positionOffset一致。
             */
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                if (imgeId != null && imgeId.length > 0) {
                    currentPosition = position % imgeId.length;
                    if (currentPosition != (imgeId.length - 1)) {
                        int len = (int) ((mPointWidth * positionOffset) + currentPosition * mPointWidth);
                        RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) mViewNewPoint.getLayoutParams();
                        params.leftMargin = len;
                        mViewNewPoint.setLayoutParams(params);
                    }
                }
            }

            /**
             * 根据那个图片被选中，然后设置对应的显示的名称内容
             * @param position 代表那个图片被选中
             */
            @Override
            public void onPageSelected(int position) {
                if (imgeId != null && imgeId.length > 0) {
                    currentPosition = position % imgeId.length;
                    mPicTitle.setText(imgeName[currentPosition]);//拿到相对于的图片的名字
                    if (currentPosition == (imgeId.length - 1)) {
                        int len = currentPosition * mPointWidth;
                        RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) mViewNewPoint.getLayoutParams();
                        params.leftMargin = len;
                        mViewNewPoint.setLayoutParams(params);
                    }

                }
            }

            /**
             * 当用手指滑动翻页时，手指按下去的时候会触发这个方法，state值为1，手指抬起时，
             * 如果发生了滑动（即使很小），这个值会变为2，然后最后变为0 。总共执行这个方法三次。
             * 一种特殊情况是手指按下去以后一点滑动也没有发生，这个时候只会调用这个方法两次，state值分别是1,0 。
             * @param state
             */
            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
        initDotLayout();
        MyViewPager mYAdapter = new MyViewPager(ImageViewActivity.this,imgeId);
        mViewPager.setAdapter(mYAdapter);
    }

    private void initDotLayout(){
        mLLPointGroup.removeAllViews();
        for (int i = 0; i < imgeId.length; i++) {
            View point = new View(ImageViewActivity.this);
            point.setBackgroundResource(R.drawable.icon_dot_empty);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                    ScreenUtil.getInstance().dp2Px(UiUtils.getInstance().getContext(), 6),
                    ScreenUtil.getInstance().dp2Px(UiUtils.getInstance().getContext(), 6));
            if (i>0){
                params.leftMargin = ScreenUtil.getInstance().dp2Px(UiUtils.getInstance().getContext(), 4);
            }
            point.setLayoutParams(params);
            mLLPointGroup.addView(point);

            if (imgeId.length !=1){
                mLLPointGroup.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
                    @Override
                    public void onGlobalLayout() {
                        mLLPointGroup.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                        mPointWidth = mLLPointGroup.getChildAt(1).getLeft() - mLLPointGroup.getChildAt(0).getLeft();
                    }
                });
            }
        }
    }

    /**
     * ViewPager的适配器
     */
    class MyViewPager extends PagerAdapter{

        private LinkedList<ImageView> imageViews = new LinkedList<>();
        private Activity mActivity;
        private int[] mImageId;

        public MyViewPager(Activity mActivity, int[] mImageId) {
            this.mActivity = mActivity;
            this.mImageId = mImageId;
        }

        @Override
        public int getCount() {
            return mImageId.length;
        }

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

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            //将此对象存储到集合中
            imageViews.add((ImageView)object);
            container.removeView((ImageView) object);
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            // 对ViewPager页号求模取出View列表中要显示的项
            currentPosition  = position % mImageId.length;
            ImageView mImageView = null;
            //进行判断集合数据是否为空,为空时创建新的ImageVIew对象
            if (imageViews.size() == 0){
                mImageView = new ImageView(mActivity);
                mImageView.setScaleType(ImageView.ScaleType.FIT_XY);
            }else{
                mImageView = imageViews.remove(0);
            }

            //给ImageView对象设置图片
            mImageView.setBackgroundResource(mImageId[currentPosition]);
            container.addView(mImageView);
            return mImageView;
        }
    }
}

工具类： ScreenUtil.java

/**
 * 自适应屏幕的高度
 * @author huangxianfeng
 *
 */
public class ScreenUtil {
	private static ScreenUtil instance;
	private ScreenUtil(){
	}

	public static ScreenUtil getInstance(){
		if (instance == null){
			synchronized (ScreenUtil.class){
				if (instance == null){
					instance = new ScreenUtil();
				}
			}
		}
		return instance;
	}

	/**
	 * 把图片的比例传值进来，再测量屏幕的宽度，得出高度值
	 * @param context
	 * @param width
	 * @param height
	 * @return
	 */
	@SuppressWarnings("deprecation")
	public int getHeight(Context context,int width,int height){
		WindowManager windowManager= (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
		int scressWidth = windowManager.getDefaultDisplay().getWidth();
		if (width != 0) {
			return (int) ((height*scressWidth) / (float)width);
		}
		return 0;
	}

	/**
	 * dp转换成像素
	 * @param context
	 * @param dp
	 * @return
	 */
	public int dp2Px(Context context, float dp) {  
	    final float scale = context.getResources().getDisplayMetrics().density;  
	    return (int) (dp * scale + 0.5f);  
	}  

	/**
	 * 像素转换成dp
	 * @param context
	 * @param px
	 * @return
	 */
	public int px2Dp(Context context, float px) {  
	    final float scale = context.getResources().getDisplayMetrics().density;  
	    return (int) (px / scale + 0.5f);  
	}  
}

UiUtils.java

/**
 * @author :huangxianfeng on 2016/12/21.
 */
public class UiUtils {

    private static UiUtils instance;

    private UiUtils() {

    }

    public static UiUtils getInstance() {
        if (instance == null) {
            synchronized (UiUtils.class) {
                if (instance == null) {
                    instance = new UiUtils();
                }
            }
        }
        return instance;
    }

    /**
     * 进行获取资源类
     * @return
     */
    private Resources getResources() {
        return App.getContextObject().getResources();
    }

    /**
     * 进行获取图片的Drawable
     * @param
     * @return
     */
    public Drawable getDrawable(int drawableId) {
        return getResources().getDrawable(drawableId);
    }

    public static int getDimen(int id) {
        return (int) (UiUtils.getInstance().getResources().getDimension(id) + 0.5f);
    }

    /**
     * 进行提供获取Context
     *
     * @return
     */
    public Context getContext() {
        return App.getContextObject();
    }

    /**
     * 进行获取Handler
     */
    public Handler getHandler() {
        return App.getHandler();
    }

//    /**
//     * 进行显示信息
//     *
//     * @param msg
//     */
//    public void showToast(final String msg) {
//        runOnUiThread(new Runnable() {
//            @Override
//            public void run() {
//                Toast.makeText(MyApplication.getContextObject(), msg, Toast.LENGTH_SHORT).show();
//            }
//        });
//    }
//
//    /**
//     * 进行获取屏幕的宽度
//     *
//     * @return
//     */
//    @SuppressWarnings("deprecation")
//    public int getDefaultWidth() {
//        WindowManager windowManager = (WindowManager) UiUtils.getInstance().getContext()
//                .getSystemService(Context.WINDOW_SERVICE);
//        return windowManager.getDefaultDisplay().getWidth();
//    }
//
//    /**
//     * 进行获取屏幕的高度
//     *
//     * @return
//     */
//    @SuppressWarnings("deprecation")
//    public int getDefaultHeight() {
//        WindowManager windowManager = (WindowManager) UiUtils.getInstance().getContext()
//                .getSystemService(Context.WINDOW_SERVICE);
//        return windowManager.getDefaultDisplay().getHeight();
//    }
//
//    /**
//     * 进行获取GET_META_DATA的ApplicationInfo
//     * @param packageManager
//     * @param packageName
//     * @return
//     */
//    private Bundle getAppMetaDataBundle(PackageManager packageManager,
//                                        String packageName) {
//        Bundle bundle = null;
//        try {
//            ApplicationInfo ai = packageManager.getApplicationInfo(packageName,
//                    PackageManager.GET_META_DATA);
//            bundle = ai.metaData;
//        } catch (PackageManager.NameNotFoundException e) {
//            e.printStackTrace();
//        }
//        return bundle;
//    }
//
//    /**
//     * 进行获取对应的键的值
//     * @param key
//     * @param defValue
//     * @param packageName
//     * @return
//     */
//    public String getMetaDataStringApplication(String key, String defValue,String packageName) {
//        Bundle bundle = getAppMetaDataBundle(UiUtils.getInstance().getContext().getPackageManager(),packageName);
//        if (bundle != null && bundle.containsKey(key)) {
//            return bundle.getString(key);
//        }
//        return defValue;
//    }
}

以上就是全部内容，欢迎大家留言关注交流。

转载请注明出处：

【定陶黄公子】

转载于:https://my.oschina.net/huangxianfeng/blog/809974

chifu0892
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
android viewpager滑动图片轮播,使用ViewPager实现图片轮播
weixin_39631295的博客
05-31 836
前言首先我们来看一下运行的效果，如下所示：这是在我们的项目中经常会用到的图片轮播效果，一般用于广告图片的展示。它要求主要实现以下功能：1)自动播放；2)无限滑动；3)手指拖拽图片时暂停自动轮播，松开后继续自动轮播；4)含动画效果的小圆点指示器。本文将介绍利用ViewPager实现无限轮播图片，图片下方加上小圆点指示器标记当前位置，并利用Handler实现自动轮播图片。正文1、实现自动播放思路：没隔...
Viewpager实现左右滑动效果 加下方小圆点 实现页面跳转
weixin_68239413的博客
06-02 437
viewpager的使用
Android 左右滑动小圆点(ViewPager)布局有两种方法
彬sir哥的博客
11-06 2249
第一种方法： 第二种方法： 一、测试如下： 二、准备工作 1.在drawable创建dot.xml,设置小圆点 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="true"> <shape android:shape
Android滑动页面 底部小圆点,Android ViewPager无限循环实现底部小圆点动态滑动
weixin_42301008的博客
05-27 501
页面拖动到最后一页 再向下滑动回复到 第一页，第一页向前滑动回到 最后一页同时，底部红色小圆点随着页面的滑动距离比例随时改变位置布局：xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_p...
Android ViewPager使用方法+ViewPager循环滑动
zhengyikuangge的博客
11-19 1099
新手学习android的知识总结ViewPager是手机上最常见的效果，它能给用户带来很好的体验ViewPager的使用：①基于xml文件的ViewPager：（1）主xml文件中的代码如下（这里命名为guide） 把这个东西当做一个控件就好了：<android.support.v4.view.ViewPager android:id="@+id/viewpager"
android小圆点滑动切换,android ViewPager 实现点击小圆点切换页面 案例
weixin_42503415的博客
05-31 640
android ViewPager 实现点击小圆点切换页面说明：在viewpager中，通过左右滑动可以切换页面，同样可以通过点击所指示的小圆点来滑动到某个页面页面。具体实现方法如下：主要activity：android:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="vertic...
【android】ViewPager的使用——实现左右滑动（下方带圆点）
chandelierr的博客
11-26 3207
官方解释： ViewPager is most often used in conjunction with Fragment, which is a convenient way to supply and manage the lifecycle of each page. There are standard adapters implemented for using fragment
android - viewPager实现左右滑动
星枫的博客
05-14 642
一、activity public class ViewPager2 extends Activity { private ViewPager pager; private List<View> list; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentV
Android-viewpager滑动监听
mjyy10181103的博客
04-06 987
http://blog.csdn.net/lvyoujt/article/details/51138744 http://blog.csdn.net/lvyoujt/article/details/51147669 package com.cctvjiatao.viewpagedemo; import java.util.ArrayList; import java.util.L
android viewpager 无限滑动自带小圆点
02-16
在Android开发中，ViewPager是一个非常常用的组件，它允许用户通过左右滑动来浏览多个页面，常用于实现轮播图、应用引导页等效果。在这个"android viewpager 无限滑动自带小圆点"的主题中，我们将深入探讨如何利用...
Android viewpager自动轮播和小圆点联动效果
08-29
在Android开发中，`ViewPager` 是一个非常常用的组件，它允许用户通过左右滑动来浏览多个页面。在很多应用中，比如广告轮播、图片展示等场景，我们常常需要实现`ViewPager`的自动轮播功能，并且搭配小圆点指示器...
Android ViewPager无限循环实现底部小圆点动态滑动
09-02
在Android开发中，`...以上就是实现Android `ViewPager`无限循环以及底部小圆点动态滑动的基本思路和关键代码。在实际项目中，你可能还需要处理其他细节，比如动画效果、滑动速度控制等，以提供更好的用户体验。
android viewpager 左右无限循环滑动 + 小圆点指示器
11-18
在Android开发中，ViewPager是一个非常常用的组件，它用于展示可以左右滑动的多个页面，常用于实现类似轮播图或选项卡的效果。本教程将详细讲解如何实现ViewPager的左右无限循环滑动，并结合自定义小圆点指示器来...
Android viewpager左右滑动效果的例子
06-10
在Android应用开发中，`ViewPager`是一个非常重要的组件，它允许用户通过左右滑动来浏览多个页面，这种交互方式在现代移动应用中广泛使用，比如社交媒体应用、新闻阅读器等。`ViewPager`的设计使得它可以流畅地展示...
Ionic 安装指南
lly202406的博客
07-30 244
安装和开始使用 Ionic 是一个简单而直接的过程。通过遵循本指南，您应该能够在您的系统上成功安装 Ionic，并开始开发您的第一个应用程序。Ionic 提供了大量的文档和社区支持，可以帮助您在开发过程中遇到任何问题时找到解决方案。祝您编码愉快！
RN 开发环境搭建（Windows For Android）
最新发布
monkeyfly学前端
08-01 741
RN 开发环境搭建教程（Windows For Android）
FrameWork学习笔记
qq_18420641的博客
07-30 301
FW
《框架》
lly202406的博客
07-30 265
框架是一种为特定应用程序提供基础结构和服务的软件库。它定义了应用程序的总体结构和行为，提供了一套预定义的接口和类，帮助开发者快速构建应用程序。框架通常包含了一系列的规则和最佳实践，确保开发者遵循特定的设计模式和方法。
android 左右滑动动画,Android ViewPager实现左右滑动翻页效果
05-12
要在Android中实现左右滑动动画，可以使用ViewPager。ViewPager是一个视图容器，可以让用户在屏幕上左右滑动，以便浏览多个页面。 下面是一些步骤，以实现ViewPager左右滑动翻页效果： 1. 在布局文件中添加...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值