在 ViewPager 内设计一个 Horizo​​ntalScrollView 或使用片段: [英] Design a HorizontalScrollView inside of ViewPager or use fragments:

问题描述

我需要设计以下屏幕，我需要你的建议:

说明:

标题是静态的/固定的，我不需要对它做任何事情.

黄色:这是有趣的部分，我需要设计一个类似 ViewPager 的屏幕，它能够左右滚动最多 4 个屏幕.

红色:我需要在每个屏幕中添加一个表格/网格，如果它不适合屏幕大小，它也可以滚动.

绿色:可以使用屏幕底部的绿色按钮或滚动ViewPager来完成页面切换.

问题是:这种行为可以使用 ViewPager 实现还是应该使用 Fragments?如果 Fragment 是要走的路，那么我将如何使用滑动手势实现页面切换?如果是 ViewPager 那么如何添加内部滚动以及如何使用底部的按钮来控制它?

任何帮助将不胜感激，谢谢.

解决方案

我认为这应该通过 Non Swipeable ViewPager 来解决.视图分页器 和 底层 Fragment 无法响应滑动手势.在 ViewPager 中覆盖以禁用滑动的方法是:

1. .抱歉，我自己没有使用过.

   I need to design the following screen, and I need your advice:

   Explanation:

   The title is static/fixed and I don't need to do anything with it.

   Yellow: this is the interesting part, I need to design a ViewPager like screen that has the capability to scroll left/right for Max 4 screens.

   Red: In every screen I need to add a Table/Grid that can be scrollable as well if it's not fits screen size.

   Green: The page switching can be done using the green buttons in the bottom of the screen or by scrolling the ViewPager.

   The Question Is: Can this behavior be achieve using a ViewPager or should I use Fragments? If Fragment is the way to go, then how would I implement the page switching using the sliding gesture? if it's a ViewPager then how to add the inside scrolling and how to control it using the buttons at the bottom?

   Any help would be appreciated, Thanks.

   解决方案

   I think this should be tackled with a Non Swipeable ViewPager. There is no way the view pager and the underlying Fragments should respond to the swiping gesture. The methods to override to disable swiping within the ViewPager are:

   1. onTouchEvent() - returns false.
   2. onInterceptTouchEvent()- returns false.

   Refer to this SO question for more information on how to achieve this.

   Next up you want to be using Fragments within each of your pager holders. So we're building the following layout:

   Within the parent activity a FragmentPagerAdapter is instantiated and your tabs added with a tag:

   Activity changes

   @Override
   protected void onCreate(final Bundle saveInstanceState) {
       final FragmentPagerAdapter myTabAdapter = new MyFragmentPagerAdapter(
               <Your ViewPager View>, <Your activity context, this>);
       myTabAdapter.addTab(getActionBar().newTab(), "YOUR TAG", "Your Title");
       // etc...
   }
   

   So this gives us the frame of the diagram above. A hosting activity, containing a ViewPager and the underlying tabs. Next up is getting the Fragments (containing your tables) into each of the respective tabs. This is handled by the FragmentPagerAdapter implementation:

   Fragment adapter (inner class to activity):

   private class MyFragmentPagerAdapter extends FragmentPagerAdapter implements
           ActionBar.TabListener, ViewPager.OnPageChangeListener {
   
       /**
        * Constructs a pager adapter to back a {@link ViewPager}.
        * 
        * @param pager
        *            The {@link ViewPager} widget.
        * @param activityContext
        *            The context the widget is being added under.
        */
       public SpotMenuFragmentPagerAdapter(final ViewPager pager,
               final Context activityContext) {
           super(getFragmentManager());
           pager.setAdapter(this);
           this.context = activityContext;
       }
   
       /**
        * Adds a tab to the hosting activity action bar.
        * 
        * @param newTab
        *            The tab to add.
        * @param tag
        *            The tab tag for id purposes.
        * @param label
        *            The label of the tab displayed to the user.
        */
       public void addTab(final ActionBar.Tab newTab, final String tag,
               final String label) {
           newTab.setTag(tag);
           newTab.setText(label);
           newTab.setTabListener(this);
           getSupportActionBar().addTab(newTab);
       }
   
       /**
        * This is where you do the work of building the correct fragment based
        * on the tab currently selected.
        * 
        * @see FragmentPagerAdapter#getItem(int)
        */
       @Override
       public Fragment getItem(final int position) {
           final Tab tab = getActionBar().getTabAt(position);
           if ("MY TAG".equals(tab.getTag().toString()) {
               // instantiate the fragment (table) for "MY TAG"
           } else {
               // instantiate something else...
           }
       }
   
       /**
        * One fragment per tab.
        * 
        * @see android.support.v4.view.PagerAdapter#getCount()
        */
       @Override
       public int getCount() {
           return getSupportActionBar().getTabCount();
       }
   
       /**
        * @see ViewPager.OnPageChangeListener#onPageScrollStateChanged(int)
        */
       @Override
       public void onPageScrollStateChanged(final int arg0) {
           // No-op.
       }
   
       /**
        * @see ViewPager.OnPageChangeListener#onPageScrolled(int, float, int)
        */
       @Override
       public void onPageScrolled(final int arg0, final float arg1,
               final int arg2) {
           // No-op.
       }
   
       /**
        * @see ViewPager.OnPageChangeListener#onPageSelected(int)
        */
       @Override
       public void onPageSelected(final int position) {
           getSupportActionBar().setSelectedNavigationItem(position);
       }
   
       /**
        * @see TabListener#onTabSelected(app.ActionBar.Tab,
        *      app.FragmentTransaction)
        */
       @Override
       public void onTabSelected(final Tab tab, final FragmentTransaction ft) {
           viewPager.setCurrentItem(tab.getPosition());
       }
   
       /**
        * @see TabListener#onTabUnselected(ActionBar.Tab,
        *      app.FragmentTransaction)
        */
       @Override
       public void onTabUnselected(final Tab tab, final FragmentTransaction ft) {
           // No-op.
       }
   
       /**
        * @see TabListener#onTabReselected(ActionBar.Tab,app.FragmentTransaction)
        */
       @Override
       public void onTabReselected(final Tab tab, final FragmentTransaction ft) {
           // No-op.
       }
   }
   

   So hopefully by this point we have an activity hosting a 'non-swipeable' view pager and a mechanism for switching tabs in the form of the tab bar underneath the title (or alongside depending on the screen size). From this point I am sure you could customise to replace the tab bar with some navigational arrows.

   Note: A lot of that was written from memory but hopefully I've conveyed the gist of where I would go with this.

   Update

   In response to the updated question: you can set the tab to be any old view. Set the TabSpec accordingly. Apologies I haven't used this myself.

   这篇关于在 ViewPager 内设计一个 Horizo​​ntalScrollView 或使用片段:的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！