Android ViewPager 垂直滑动 纵向滑动 VerticalViewPager[通俗易懂]

Android ViewPager 垂直滑动 纵向滑动 VerticalViewPager[通俗易懂]项目里头需要用到一个在垂直方向滑动页签的效果,这可难道宝宝了,不过google还是强大的,在stackoverflow找到了人生的真谛。具体链接传送门特么的里面居然出现了四五种方案,选择困难症啊。。。。。。实验了其中的两种,效果上均可行,另外两种均是github的项目,没细看,有兴趣的可以去做对比地址VerticalViewPagerVe

大家好,又见面了,我是你们的朋友全栈君。

项目里头需要用到一个在垂直方向滑动页签的效果。

具体链接 传送门

其中介绍了四五种方案,选择困难症爆发了。。。。。。

实验了其中的两种,效果上均可行,另外两种均是github的项目,没细看,有兴趣的可以去做对比

地址 VerticalViewPager       VerticalViewPager2

再详细看下我实验过的两种方案, 

方案一:

旋转 viewpager  旋转viewpager的Item (高能~~~~~~~)

1、onInstantiateItem() of PagerAdapter, create the view and rotate it by -90:
view.setrotation(-90f)
If you are using FragmentPagerAdapter, then:
objFragment.getView().setRoration(-90)

2、Rotate ViewPager view by 90 degree:
objViewPager.setRotation(90)

方案二:

You can use a ViewPager.PageTransformer to give the illusion of a vertical ViewPager. To achieve scrolling with a vertical instead of a horizontal drag you will have to override ViewPager‘s default touch events and swap the coordinates of MotionEvents prior to handling them, e.g.:

/**
 * Uses a combination of a PageTransformer and swapping X & Y coordinates
 * of touch events to create the illusion of a vertically scrolling ViewPager. 
 * 
 * Requires API 11+
 * 
 */
public class VerticalViewPager extends ViewPager {

    public VerticalViewPager(Context context) {
        super(context);
        init();
    }

    public VerticalViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        // The majority of the magic happens here
        setPageTransformer(true, new VerticalPageTransformer());
        // The easiest way to get rid of the overscroll drawing that happens on the left and right
        setOverScrollMode(OVER_SCROLL_NEVER);
    }

    private class VerticalPageTransformer implements ViewPager.PageTransformer {

        @Override
        public void transformPage(View view, float position) {

            if (position < -1) { // [-Infinity,-1)
                // This page is way off-screen to the left.
                view.setAlpha(0);

            } else if (position <= 1) { // [-1,1]
                view.setAlpha(1);

                // Counteract the default slide transition
                view.setTranslationX(view.getWidth() * -position);

                //set Y position to swipe in from top
                float yPosition = position * view.getHeight();
                view.setTranslationY(yPosition);

            } else { // (1,+Infinity]
                // This page is way off-screen to the right.
                view.setAlpha(0);
            }
        }
    }

    /**
     * Swaps the X and Y coordinates of your touch event.
     */
    private MotionEvent swapXY(MotionEvent ev) {
        float width = getWidth();
        float height = getHeight();

        float newX = (ev.getY() / height) * width;
        float newY = (ev.getX() / width) * height;

        ev.setLocation(newX, newY);

        return ev;
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev){
        boolean intercepted = super.onInterceptTouchEvent(swapXY(ev));
        swapXY(ev); // return touch coordinates to original reference frame for any child views
        return intercepted;
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        return super.onTouchEvent(swapXY(ev));
    }

}

这两种方法基本效果都OK,接下来是我们举一反三的阶段了,我要封装一个支持横向纵向都可以滑动的ViewPager,基本思路就是自定义一个属性,来选择代码到底走垂直ViewPager代码还是水平ViewPager代码 

package com.xiaowu.banner.demo;

import android.content.Context;
import android.content.res.TypedArray;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class HorizonVerticalViewPager extends MyViewPager{
	private boolean isVertical = false;
	
	public HorizonVerticalViewPager(Context context) {
        super(context);
        init();
    }

    public HorizonVerticalViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
        initIsVertical(attrs, 0);
        init();
    }
    
    public HorizonVerticalViewPager(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs);
        initIsVertical(attrs, defStyle);
        init();
    }
    
    private void initIsVertical(AttributeSet attrs, int defStyle){
    	final TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.MyViewPager, defStyle, 0);
    	isVertical = a.getBoolean(R.styleable.MyViewPager_isVertical, false);
    	System.out.println("isVertical=>" + isVertical);
    	a.recycle();
    }
    

    private void init() {
    	if(isVertical){
    		// The majority of the magic happens here
    		setPageTransformer(true, new VerticalPageTransformer());
    		// The easiest way to get rid of the overscroll drawing that happens on the left and right
    		setOverScrollMode(OVER_SCROLL_NEVER);
    	}
    }

    private class VerticalPageTransformer implements ViewPager.PageTransformer {

        @Override
        public void transformPage(View view, float position) {

            if (position < -1) { // [-Infinity,-1)
                // This page is way off-screen to the left.
                view.setAlpha(0);

            } else if (position <= 1) { // [-1,1]
                view.setAlpha(1);

                // Counteract the default slide transition
                view.setTranslationX(view.getWidth() * -position);

                //set Y position to swipe in from top
                float yPosition = position * view.getHeight();
                view.setTranslationY(yPosition);

            } else { // (1,+Infinity]
                // This page is way off-screen to the right.
                view.setAlpha(0);
            }
        }
    }

    /**
     * Swaps the X and Y coordinates of your touch event.
     */
    private MotionEvent swapXY(MotionEvent ev) {
        float width = getWidth();
        float height = getHeight();

        float newX = (ev.getY() / height) * width;
        float newY = (ev.getX() / width) * height;

        ev.setLocation(newX, newY);

        return ev;
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev){
    	if (isVertical) {
    		boolean intercepted = super.onInterceptTouchEvent(swapXY(ev));
    		swapXY(ev); // return touch coordinates to original reference frame for any child views
    		return intercepted;
		}else {
			return super.onInterceptTouchEvent(ev);
		}
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
    	if (isVertical) {
    		return super.onTouchEvent(swapXY(ev));
		}else {
			return super.onTouchEvent(ev);
		}
    }
}

自定义属性定义在res/values/attr.xml中 , 具体如下:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="MyViewPager">
        <attr name="isVertical" format="boolean" />
    </declare-styleable>
</resources>

使用代码如下

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    <span style="color:#ff0000;">xmlns:app="http://schemas.android.com/apk/res-auto"</span>
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <com.xiaowu.banner.demo.HorizonVerticalViewPager
        android:id="@+id/vp"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent" 
        <span style="color:#ff0000;">app:isVertical="false"</span>
        />
    <xxxxx
        />
</LinearLayout>

看官们估计又要有疑问了,那个MyViewPager是个什么鬼,大概解释一下,这个MyViewPager是为了解决ViewPager不能响应onTouchListener的问题

主要是复写了其中的dispatchTouchEvent函数,然后在分发之前,先自己做点事情,具体代码见传送门

源码已上传 地址 源码

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/163233.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Android 关闭多个视图Intent.FLAG_ACTIVITY_CLEAR_TOP用法「建议收藏」

    Android 关闭多个视图Intent.FLAG_ACTIVITY_CLEAR_TOP用法「建议收藏」如果已经启动了四个Activity:A,B,C和D。在DActivity里,我们要跳到BActivity,同时希望Cfinish掉,可以在startActivity(intent)里的intent里添加flags标记,如下所示:[java] viewplaincopyIntent intent = new Intent(this, B.cla

  • C++中set用法详解

    C++中set用法详解1.关于setC++STL之所以得到广泛的赞誉,也被很多人使用,不只是提供了像vector,string,list等方便的容器,更重要的是STL封装了许多复杂的数据结构算法和大量常用数据结构操作。vector封装数组,list封装了链表,map和set封装了二叉树等,在封装这些数据结构的时候,STL按照程序员的使用习惯,以成员函数方式提供的常用操作,如:插入、排序、删除、查找等。让用户…

  • 设计模式:组合模式

    设计模式:组合模式

  • 十项新技术包括哪些技术?_建筑十项新技术那些

    十项新技术包括哪些技术?_建筑十项新技术那些  当今世界,科技发展日新月异,科学新概念层出不穷,新技术工艺相继闪亮登场。纳米材料、信息技术、生物制药、节能环保科技领域的创新和研发引人注目,鼓舞人心。一项新的科技发明会在不知不觉中改变我们的生活,影响社会发展的历程。  近日,俄罗斯《大众机械》杂志撰文指出,以下科技新技术会使人类生活因此而更加完美无缺。  相变随机闪存(PRAM)  手机、手提电脑等移动设备对存储器的要求,与

  • nessus中文版使用教程_svn中文使用教程

    nessus中文版使用教程_svn中文使用教程https://www.wangan.com/docs/nessus

    2022年10月10日
  • pycharm配置python运行环境_C中调用Python

    pycharm配置python运行环境_C中调用Python目录前言一、系统路径说明二、环境配置1.在VS中选择ReleaseX642.菜单栏中选择:项目->属性3.生成dll答疑python程序目录下没有Numpy路径?具体代码参考博客前言本文主要讲解在Python程序中调用C(C++)程序的方法。主要思路是:在VS中配置好环境后,将C语言程序打包生成动态库文件.dll。将.dll改名成.pyd之后,装入相应路径,在pycharm中直接import即可环境:win10Pycharm(python3.6)(64位)VS2017(社区版)

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号