FragmentPagerAdapter 滑动显示 ListView 1/3 屏幕宽度

Question

编辑： See my answer below-->

我想要一个视图，当向右滑动时，会显示 listView。非常类似于在新的 Google Play 商店中实现的内容（下图示例）。我认为它是一个 ViewPager，但我尝试复制它而不占优势。我在想可能只是'listView Page'宽度属性设置为特定的dp，但这不起作用。我也试过修改pakerfeldt's viewFlow，不知道谷歌是怎么做的

我在正确的轨道上吗？如果有人知道如何复制它，我将不胜感激。我认为这可能会成为一种流行的在平板电脑上显示导航视图的新方式......？代码将是最好的帮助。谢谢！！

向右滑动：

完成滑动；布局显示列表和第二个片段的一部分（完全如图所示）列表片段没有填满屏幕：

当用户向左滑动时，仅显示主页，如果用户再次向左滑动，viewPager 将继续到下一页。

Answer 1

下面的代码达到了预期的效果：

在PageAdapter：

@Override
public float getPageWidth(int position) {
if (position == 0) {
    return(0.5f);
} else {
    return (1.0f);       
}

Answer 2

最后一次阅读您的问题...确保您还为每种尺寸的设备设置了特定的布局。在您的屏幕截图中，您似乎正在尝试在平板电脑上运行它。您在手机上获得相同的结果吗？

设置布局

确保您的布局与此类似并具有 ViewPager：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:orientation="vertical"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:background="@color/body_background">

<include layout="@layout/pagerbar" />
<include layout="@layout/colorstrip" />

<android.support.v4.view.ViewPager
        android:id="@+id/example_pager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1" />

</LinearLayout>

设置您的活动

在“FragmentActivity”中设置 PagerAdapter 并确保实现“OnPageChangeListener”。然后在 onCreate 中正确设置 PagerAdapter。

public class Activity extends FragmentActivity 
             implements ViewPager.OnPageChangeListener { 
   ...

    public void onCreate(Bundle savedInstanceState) {

       PagerAdapter adapter = new PagerAdapter(getSupportFragmentManager());
       pager = (ViewPager) findViewById(R.id.example_pager);

       pager.setAdapter(adapter);
       pager.setOnPageChangeListener(this);
       pager.setCurrentItem(MyFragment.PAGE_LEFT);

       ...
   }


   /* setup your PagerAdapter which extends FragmentPagerAdapter */

   static class PagerAdapter extends FragmentPagerAdapter {
       public static final int NUM_PAGES = 2;

       private MyFragment[] mFragments = new MyFragment[NUM_PAGES];

          public PagerAdapter(FragmentManager fragmentManager) {
           super(fragmentManager);
       }

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

       @Override
       public Fragment getItem(int position) {
           if (mFragments[position] == null) {
               /* this calls the newInstance from when you setup the ListFragment */
               mFragments[position] = MyFragment.newInstance(position);
           }

           return mFragments[position];
       }
   }

 ...

设置您的片段

当您设置实际的 ListFragment（您的 listViews）时，您可以使用如下参数创建多个实例：

  public static final int PAGE_LEFT = 0;
  public static final int PAGE_RIGHT = 1;

  static MyFragment newInstance(int num) {
       MyFragment fragment = new MyFragment();

       Bundle args = new Bundle();
       args.putInt("num", num);

       fragment.setArguments(args);
       return fragment;
   }

当您重新加载 listViews（无论您决定如何实现它）时，您可以使用如下参数确定您正在使用哪个片段实例：

    mNum = getArguments() != null ? getArguments().getInt("num") : 1;

如果您单步执行您的代码，您会注意到它将单步执行每个实例，因此上述代码仅在您的 onCreate 中需要，并且 reload 方法可能如下所示：

private void reloadFromArguments() {
    /* mNum is a variable which was created for each instance in the onCreate */
    switch (mNum) {
        case PAGE_LEFT:
            /* maybe a query here would fit your needs? */
            break;

        case PAGE_RIGHT:
            /* maybe a query here would fit your needs? */
            break;
    }
}

很少有资源可以帮助您提供可以构建而不是从头开始的示例：

来自游乐场的更多解释和示例。 http://blog.peterkuterna.net/2011/09/viewpager-meets-swipey-tabs.html 这是参考： http://code.google.com/p/android-playground/

更多信息和一些良好的联系。 http://www.pushing-pixels.org/2012/03/16/responsive-mobile-design-on-android-from-view-pager-to-action-bar-tabs.html

如果您发布了更具体的问题，我可以随时编辑（更新）我的答案以解决您的问题。祝你好运！ :)

Answer 3

抱歉更新晚了。我几乎没有修改就实现了this from walkingice on Gethub。仅当 ViewPager id 为“0”时，才使用 GestureDetector 的条件语句将其滑动到视图中。我还在我的 ActionBar 中添加了一个切换按钮

Answer 4

ViewPager 是Compatibly Package 的一部分

如果您使用的是Fragments，那么您可以使用ViewPager 在它们之间滑动。

Here's an example 结合Fragments 和ViewPager

在您的特定情况下，您可能希望创建一个ListFragment，然后实现ViewPager。

Answer 5

我认为您希望在标准 ViewPager 旁边实现“侧边导航”。

我已经阅读了 2 篇关于这种模式的不同文章：

模式本身的第一个：

Android Ui Pattern Emerging UI Pattern - Side Navigation

第二个更详细的构建方式：

Cyril Mottier Fly-in 应用菜单 #1 #2 #3

Android Ui Pattern 博客中引用了第二篇文章。

Answer 6

通过一点 Trick，可以通过 ViewPager 中的 ScrollView-Behavior 来实现该行为。如果只想限制最左边fragment的区域，可以限制ScrollView的滚动范围。

在您的情况下： 在 ViewPager 的 onPageChangeListener 中做这样的事情：

@Override
public void onPageScrollStateChanged(int arg0) {
    restrictLeftScroll();
}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
    restrictLeftScroll();
}

@Override
public void onPageSelected(int arg0) {

}

private void restrictLeftScroll() {

    if (display != null) {

        /* get display size */
        Point size = new Point();
        display.getSize(size);

        /* get desired Width of left fragment */
        int fragmentWidth = getResources().getDimensionPixelSize(R.dimen.category_fragment_width);

        if (mViewPager.getScrollX() < size.x - fragmentWidth) {
            mViewPager.scrollTo(size.x - fragmentWidth, mViewPager.getScrollY());
        }
    }
}

这段代码对我来说没有问题。 ;)