如何把垂直刷卡ViewPager在水平刷卡ViewPager [英] How to put Vertically swiped ViewPager in a Horizontally swiped ViewPager

查看:131
本文介绍了如何把垂直刷卡ViewPager在水平刷卡ViewPager的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我定制我的Andr​​oid应用在四个方向轻扫,我使用 ViewPager 来刷卡的横向 VerticalViewPager 垂直刷卡的(这是像的 DirectionalViewPager 和原来的是德precated)的。问题是包含当 ViewPager VerticalViewPager ,在垂直刷卡作品仅包含在 VerticalViewPager ViewPager 横向刷卡只能工作,这是我的code为第一状态:

  VerticalViewPager verticalViewPager =(VerticalViewPager)findViewById(R.id.vertical_pager);
        verticalViewPager.setAdapter(新TabPagerAdapter(getSupportFragmentManager()));
        verticalViewPager.setPageTransformer(真,新ViewPager.PageTransformer(){
            @覆盖
            公共无效transformPage(查看视图,浮动位){
                INT页宽= view.getWidth();
                INT pageHeight = view.getHeight();                如果(位置< -1){// [-Infinity,-1)
                    //该页面的方式关闭屏幕左侧。
                    view.setAlpha(0);                }否则如果(仓位< = 1){// [-1,1]
                    //修改默认的幻灯片过渡收缩的页面,以及
                    浮动比例因子= Math.max(MIN_SCALE,1 - Math.abs(位置));
                    浮vertMargin = pageHeight *(1 - 比例因子)/ 2;
                    浮horzMargin =页宽*(1 - 比例因子)/ 2;
                    如果(位置℃,){
                        view.setTranslationY(vertMargin - horzMargin / 2);
                    }其他{
                        view.setTranslationY(-vertMargin + horzMargin / 2);
                    }                    //缩放页面向下(MIN_SCALE和1之间)
                    view.setScaleX(比例因子);
                    view.setScaleY(比例因子);                    //淡出相对于它的大小页面。
                    view.setAlpha(MIN_ALPHA +
                            (比例因子 - MIN_SCALE)/
                                    (1 - MIN_SCALE)*(1 - MIN_ALPHA));                }其他{//(1 +无限远]
                    //该页面的方式关闭屏幕右侧。
                    view.setAlpha(0);
                }
            }
        });        verticalViewPager.setCurrentItem(1);        TabPagerAdapter TabAdapter =新TabPagerAdapter(getSupportFragmentManager());
        ViewPager片=(ViewPager)findViewById(R.id.pager);
        Tab.setAdapter(TabAdapter);
        Tab.setCurrentItem(1);

TabPagerAdapter 类:

 公共类TabPagerAdapter扩展FragmentStatePagerAdapter {
    公共TabPagerAdapter(FragmentManager FM){
        超(FM);
    }    @覆盖
    公共片段的getItem(int i)以{
        开关(ⅰ){
        情况下0:
            //片段对左侧
            返回新AC_Left();
        情况1:
           //片段对中心侧
            返回新AC_Center();
        案例2:
            //片段对右侧
            返回新AC_Right();
        }
        返回null;    }    @覆盖
    公众诠释的getCount(){
        返回3;
    }
}

AC_Left AC_Right AC_Center 类似于片段除的布局返回:

 公共类AC_Center扩展片段{
  @覆盖
      公共查看onCreateView(LayoutInflater充气器,容器的ViewGroup,
              捆绑savedInstanceState){
          查看ac_center_frag = inflater.inflate(R.layout.ac_center_fragment,集装箱,FALSE);
          返回ac_center_frag;  }
}

以及 XML 文件:

 <的RelativeLayout的xmlns:机器人=htt​​p://schemas.android.com/apk/res/android
    的xmlns:工具=htt​​p://schemas.android.com/tool​​s
    机器人:layout_width =match_parent
    机器人:layout_height =match_parent
    机器人:背景=@绘制/ BG>  <的LinearLayout
            的xmlns:机器人=htt​​p://schemas.android.com/apk/res/android
            机器人:layout_width =match_parent
            机器人:layout_height =match_parent
            机器人:layout_below =@ + ID /按钮栏
            机器人:方向=垂直
            机器人:weightSum =1>  < com.example.myapp.VerticalViewPager
            机器人:ID =@ + ID / vertical_pager
            机器人:layout_width =match_parent
            机器人:layout_height =0dp
            机器人:layout_weight =1>            < android.support.v4.view.ViewPager
                的xmlns:机器人=htt​​p://schemas.android.com/apk/res/android
                机器人:ID =@ + ID /寻呼机
                机器人:layout_width =match_parent
                机器人:layout_height =match_parent/>  < /com.example.myapp.VerticalViewPager> < / LinearLayout中>
< / RelativeLayout的>


解决方案

我创建了这个库,一个示例应用程序,并把它放在GitHub上。基本上,它保持了视口并更新在每一页变化的观点寻呼机。还有,你必须实现给它片段的每一行,列索引的适配器。它固然有点砍死在一起,但应在平均时间工作。还有,你可以设置有它在任何你需要的方向敷位掩码。将其设置为GRID_WRAP_NONE有它不换的。

https://github.com/btate/BTGridPager-Android

这可能不是正是你需要的,但它应该让你开始。

I'm customizing my Android app to swipe in the four directions, I'm using ViewPager to swipe Horizontally and VerticalViewPager to swipe vertically (this is like a modification of DirectionalViewPager as the original one is deprecated) . the problem is When containing the ViewPager in the VerticalViewPager, the Vertical swiping works only and when containing VerticalViewPager in the ViewPager the Horizontal swipe works only, this is my code for the first state:

VerticalViewPager verticalViewPager = (VerticalViewPager) findViewById(R.id.vertical_pager);
        verticalViewPager.setAdapter(new TabPagerAdapter(getSupportFragmentManager()));
        verticalViewPager.setPageTransformer(true, new ViewPager.PageTransformer() {
            @Override
            public void transformPage(View view, float position) {
                int pageWidth = view.getWidth();
                int pageHeight = view.getHeight();

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

                } else if (position <= 1) { // [-1,1]
                    // Modify the default slide transition to shrink the page as well
                    float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
                    float vertMargin = pageHeight * (1 - scaleFactor) / 2;
                    float horzMargin = pageWidth * (1 - scaleFactor) / 2;
                    if (position < 0) {
                        view.setTranslationY(vertMargin - horzMargin / 2);
                    } else {
                        view.setTranslationY(-vertMargin + horzMargin / 2);
                    }

                    // Scale the page down (between MIN_SCALE and 1)
                    view.setScaleX(scaleFactor);
                    view.setScaleY(scaleFactor);

                    // Fade the page relative to its size.
                    view.setAlpha(MIN_ALPHA +
                            (scaleFactor - MIN_SCALE) /
                                    (1 - MIN_SCALE) * (1 - MIN_ALPHA));

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

        verticalViewPager.setCurrentItem(1);

        TabPagerAdapter TabAdapter = new TabPagerAdapter(getSupportFragmentManager());
        ViewPager Tab = (ViewPager) findViewById(R.id.pager);
        Tab.setAdapter(TabAdapter);
        Tab.setCurrentItem(1);

The TabPagerAdapter class:

public class TabPagerAdapter extends FragmentStatePagerAdapter {
    public TabPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int i) {
        switch (i) {
        case 0:
            //Fragment for Left side
            return new AC_Left();
        case 1:
           //Fragment for Center side
            return new AC_Center();
        case 2:
            //Fragment for Right side
            return new AC_Right();
        }
        return null;

    }

    @Override
    public int getCount() {
        return 3;
    }
}

AC_Left, AC_Right, and AC_Center are similar fragments except of the layout returned:

public class AC_Center extends Fragment {
  @Override
      public View onCreateView(LayoutInflater inflater, ViewGroup container,
              Bundle savedInstanceState) {
          View ac_center_frag = inflater.inflate(R.layout.ac_center_fragment, container, false);
          return ac_center_frag;

  }
}

And the XML file:

<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"
    android:background="@drawable/bg" >

  <LinearLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/buttonBar"
            android:orientation="vertical"
            android:weightSum="1" >

  <com.example.myapp.VerticalViewPager
            android:id="@+id/vertical_pager"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" >

            <android.support.v4.view.ViewPager
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/pager"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

  </com.example.myapp.VerticalViewPager>

 </LinearLayout>
</RelativeLayout>

解决方案

I created a library for this with a sample application and put it on github. Basically it maintains a view port and updates the view pager on each page change. There's an adapter you have to implement to give it fragments for each row, column index. It's admittedly a little hacked together, but should work in the mean time. There's a bit mask you can set to have it wrap in whatever directions you need. Set it to GRID_WRAP_NONE to have it not wrap at all.

https://github.com/btate/BTGridPager-Android

This might not be exactly what you need but it should get you started.

这篇关于如何把垂直刷卡ViewPager在水平刷卡ViewPager的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆