如何反转 viewpager 滑动

Question

所以我的应用程序是在 RTL 中，因此，选项卡现在从右到左排序..！

..但是我在tabs之间滑动滑动的时候，违背了常识，所以我想反转一下..！看图看问题..!

我要的是..！ > 当我在 Tab1 中然后从左向右滑动时我希望它滑到 Tab 2 等等......！

这可能吗..!?

代码

我的客户 ViewPager

public class CustomViewPager extends android.support.v4.view.ViewPager{
private boolean enabled;

public CustomViewPager(Context context, AttributeSet attrs) {
    super(context, attrs);
    this.enabled = true;
}


@Override
public boolean onTouchEvent(MotionEvent event) {
    if (this.enabled) {
        return super.onTouchEvent(event);
    }

    return false;
}

@Override
public boolean onInterceptTouchEvent(MotionEvent event) {
    if (this.enabled) {
        return super.onInterceptTouchEvent(event);
    }

    return false;
}

public void setPagingEnabled(boolean enabled) {
    this.enabled = enabled;
 }
 }

我的标签Activity（助手Class）

  public class TabbedActivity extends BaseActivity { 

 //I extend BaseActivity to avoid repeating UI code like toolbar and stuff..

protected CustomViewPager viewPager;
public OrdersAdapter adapter;
public TabLayout tabs;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    tabs.setTabGravity(TabLayout.GRAVITY_FILL);
    viewPager.setAdapter(adapter);
    viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabs));


    tabs.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {

        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            setTabSelected(tab);
        }


        @Override
        public void onTabUnselected(TabLayout.Tab tab) {

        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {

        }
    });
  }


public void setTabSelected(TabLayout.Tab tab) {
    viewPager.setCurrentItem(tab.getPosition());
}

public void addTab(int title) {

    tabs.addTab(tabs.newTab().setText(getString(title)));

}

}

我的 Activity 包含 Tablayout 并具有三个片段，每个片段一个。

public class MyOrders extends TabbedActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    setContentView(R.layout.activity_orders);

    tabs = (TabLayout) findViewById(R.id.tab_layout);
    addTab(R.string.NewOrderTabTitle); //tab1
    addTab(R.string.MyOrderTabTitle); // tab2
    addTab(R.string.FinOrderTabTitle); //tab3

     adapter = new OrdersAdapter(getSupportFragmentManager(), tabs.getTabCount());
    viewPager = (CustomViewPager) findViewById(R.id.pager);
    viewPager.setPagingEnabled(true);

    tabs.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            viewPager.setCurrentItem(tab.getPosition());

        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {

        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {

        }
    });

    viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        }

        @Override
        public void onPageSelected(int position) {

        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });

    super.onCreate(savedInstanceState);


 }
}

更新

@regev avraham

adding the tabs in the reverse order, and then use viewPager.setCurrentItem(adapter.getCount() - 1); to select the last tab.

根据您的评论，这是我在具有 tablayout

的 Activity 中所做的

 //code...
 tabs = (TabLayout) findViewById(R.id.tab_layout);
    addTab(R.string.FinOrderTabTitle); //tab3
    addTab(R.string.MyOrderTabTitle); // tab2
    addTab(R.string.NewOrderTabTitle); //tab1
 //code...

 viewPager.setCurrentItem(adapter.getCount() - 1);

Answer 1

如果您的 minSdkVersion 年满 17 岁，您可以对选项卡布局执行此操作：

TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setLayoutDirection(View.LAYOUT_DIRECTION_RTL);

Answer 2

这有点棘手，android 从右到左的 viewPager 有一个小错误，只是页面标题是从右到左的，而页面本身不是。

为了解决这个问题，我所做的是使用常规的从左到右的布局并以相反的顺序添加选项卡，然后使用 viewPager.setCurrentItem(adapter.getCount() - 1); 到 select 最后一个选项卡。

结果应该是这样的： https://drive.google.com/open?id=0B0FzrLgjet7pSE9lMFFFT0JiekE

其中大小是第一个选项卡，显示是第二个选项卡，依此类推

要保持 RTL 行为和 LTR 行为，您应该使用：

Configuration config = getResources().getConfiguration();
if (config.getLayoutDirection() == View.LAYOUT_DIRECTION_RTL)
{
     //use the RTL trick here
}
else
{
     //use the regular case here
}

Answer 3

你可以查看这个库

https://github.com/diego-gomez-olvera/RtlViewPager

并如下实施

dependencies {
...
compile 'com.booking:rtlviewpager:1.0.1'
}

just add this instead of Viewpager

<com.booking.rtlviewpager.RtlViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

Answer 4

最简单的方法是使用这一行代码：

tabLayout.setLayoutDirection(View.LAYOUT_DIRECTION_LTR);

对于选项卡的 RTL 排序，您应该在寻呼机中进行：

viewPager.setCurrentItem(adapter.getCount());

感谢：arash-hatemi

Answer 5

我在开发 RTL 应用程序时遇到了这个问题。要做的是：

逆序添加tabs：

tabLayout.addTab(tabLayout.newTab().setText("Tab2"); tabLayout.addTab(tabLayout.newTab().setText("Tab1");

以相反的顺序将 ViewPager 适配器自定义为 return Fragments :

public Fragment getItem(int position) {
    switch (position) {
        case 0:
            Fragment2 f2 = new Fragment2();
            return f2;
        case 1:
            Fragment1 f1 = new Fragment1();
            return f1;
        default:
            return null;
    }
}

Select OnCreate 处的最后一个标签索引：

TabLayout.Tab tab = tabLayout.getTabAt(1);
tab.select();

将 TabLayout 的方向设置为 LTR :

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
    tabLayout.setLayoutDirection(View.LAYOUT_DIRECTION_LTR);
}

最后，您的 onTabSelected 活动应该如下所示：

public void onTabSelected(TabLayout.Tab tab) {
    viewPager.setCurrentItem(tab.getPosition());
}

效果很好。

Answer 6

现在，您可以使用类似的小部件（支持 RTL paging-swipe）以高效的方式完成此操作。会根据系统本地自动改变滑动方向，也可以手动设置。

Android 开发了一个名为 ViewPager2

的新小部件

ViewPager2 is an improved version of the ViewPager,it offers enhanced functionality and addresses common difficulties with using ViewPager.

您可以按照这些简单的步骤创建与 TabLayout 集成的 ViewPager2。

在layout_main.xml中使用此代码：

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

 <com.google.android.material.appbar.AppBarLayout
     android:id="@+id/app_bar_layout"
     android:layout_width="match_parent"
     android:layout_height="wrap_content">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:title="@string/app_name">
    </androidx.appcompat.widget.Toolbar>

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary" />

</com.google.android.material.appbar.AppBarLayout>

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layoutDirection="locale"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

创建名称为 PagerAdapter 的适配器 class:

public class PagerAdapter extends FragmentStateAdapter {
    public PagerAdapter(FragmentActivity fm) {
        super(fm);
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        switch (position) {
            case 0:
                return YourFragment1.newInstance();
            case 1:
                return YourFragment2.newInstance();
        }
        return null;
    }

    @Override
    public int getItemCount() {
        return 2;
    }
}

在MainActivity中（使用视图绑定从xml个文件获取视图）：

public class MainActivity extends AppCompatActivity {
     //Tabs titles
     private static final int[] TAB_TITLES = new int[]{R.string.tab_text_1, R.string.tab_text_2};
     //Binding object
     private ActivityMainBinding binding;

     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         //Inflate layout
         binding = ActivityMainBinding.inflate(getLayoutInflater());
         View view = binding.getRoot();
         setContentView(view);

         //Get TabLayout View
         TabLayout tabs = binding.tabs;
         //Get the viewPager View
         ViewPager2 viewPager = binding.viewPager;

         //Adapter for ViewPager
         PagerAdapter pagerAdapter = new PagerAdapter(this);
         //Set Adapter for ViewPager
         viewPager.setAdapter(pagerAdapter);

         //Integrate TabLayout with ViewPager
         //i use it to get tabs titles
         new TabLayoutMediator(tabs, viewPager, new TabLayoutMediator.TabConfigurationStrategy() {
             @Override
             public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
                 //set the title for the tab at position index
                 tab.setText(getResources().getString(TAB_TITLES[position]));
             }
         }).attach();
     }
}

我用过的这些资源（你可以阅读了解更多详情）：

从头开始创建 ViewPager2：this link。
从 ViewPager 迁移到 ViewPager2 : this link.

希望我对此有所帮助。

Answer 7

您可以将 ViewPager rotationY 设置为 180 度，并将 instantiateItem 方法的子视图的 rotationY 设置为 180 度.

示例：

ViewPager viewPager = new ViewPager(context);
viewPager.setRotationY(180F);
viewPagerMediaViewer.setAdapter(new PagerAdapter() {
    @Override
    public int getCount() {
        return 0;
    }

    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        LayoutInflater inflater = (LayoutInflater) getSystemService(LAYOUT_INFLATER_SERVICE);

        View childView = inflater.inflate(R.layout.model_view_pager_item, container, false);

        container.addView(currentView);
        childView.setRotationY(180F);
        return currentView;
    }

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

    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        container.removeView((LinearLayout)object);
    }
});

如何反转 viewpager 滑动

How to reverse viewpager swiping

android

android-fragments

android-viewpager

android-tablayout

swipe-gesture