Android的 - 多个可查看项目的水平滚动

问题描述:

编辑:见我自己的答案,方便的解决方案Android的 - 多个可查看项目的水平滚动

重要赏金供清晰的方式来修改ViewPager满足下面列出的场景。请不要提供Horizo​​ntalScrollView - 我需要完整的片段生命周期场景覆盖

我需要实现的Fragments,其中一个项目是在中心和项目左/右部分或完全可见的看法基于横向滚动。 ViewPager因为它专注于每次显示一个项目,所以不适合执行此任务。

为了便于理解,下面是一个快速草图,其中项目1,5和6位于可视区域之外。并且想要使这个可视数字可配置,例如在纵向视图中,我将只显示2个(或可能只是一个)项目。

我并不是想在屏幕上显示3个项目,只要显示*项目,其他人可以裁剪。在小屏幕上可以有1个*项目,并且随着屏幕长度增加(裁剪是OK)项目应显示

我知道这看起来像一个画廊,但再次项目不是简单的图像,但Fragments与每个片段中的垂直滚动列表

PS通过@Commonsware发现这个博客帖子list 3 different approaches。对于我的需要,我喜欢#3

enter image description here

+2

此链接将帮助您[Horizo​​ntalListView(http://www.dev-smart.com/archives/34) – surendra

+0

我需要有片段的水平滚动每个都有一个垂直ListView – Bostone

+0

我有一个非常相似的需求。我一直在使用Gallery,直到我开始在画廊项目视图中添加一个ListView后,开始在整个场所泄漏对象。目前正在考虑修复Gallery,因为它比试图修复ViewPager更容易。 –

这一个有令人惊讶的简单答案,我甚至不知道为什么不马上公布。为了得到确切的效果,我需要做的只是覆盖PagerAdapter#getPageWidth方法。默认情况下,它返回1,但如果你将它设置为0.5,你会得到2页,0.33会给你3等等。根据分页器项目之间的分隔符的宽度,你可能需要稍微减少值。

请参见下面的代码片段:

@Override 
    public float getPageWidth(final int position) { 
     // this will have 3 pages in a single view 
     return 0.32f; 
    } 

我能想到的两种方法可能实现这一点。

  1. 作者:ViewSwitcher。 这是一个很好的YouTube video显示它如何与onGestureListener工作。但是,我不确定这是否可以与您的图片显示的多个视图一起使用。可以使用HorizontalScrollView作为替代方案。 但是,如果您在另一个ScrollView中有一个ScrollView,则这通常会导致问题,但它可能值得一试!

让我知道怎么回事, 祝你好运!

+0

请阅读赏金笔记 – Bostone

除了MrZander的第二个答案来看看这个https://*.com/a/2655740/935075

+0

甚至没有关闭。我不需要“快速放置”或检测水平手势。所有这些都由ViewPager负责。请阅读赏金注释 – Bostone

Check out this blog post如何编写自定义的水平滚动视图来实现类似的东西。该示例一次只能显示一个屏幕,但您应该可以根据需要轻松修改它。

+0

我已经实现了基于ViewPager的功能,该功能在当时只有一个屏幕。我特别要求在赏金中使用多个/部分视图 – Bostone

+0

正确的是,该示例中的代码不会完全按照您想要的那样进行,但它是一个很好的开始。在这个例子中,内部视图与外部视图(水平滚动视图)具有相同的宽度,所以很自然地,一次只能看到其中的一个。你可以调整代码,使你的内部视图比外部滚动视图窄。这将允许它们中的多个同时可见。如果你这样做,你还需要调整“scrollTo”值,以便在发生“捕捉”时中间视图正确居中。 – Joel

+0

我正在看ViewPager做同样的事情。我不想去Horizo​​ntalScrollView路线,因为那样我就会丢失很多ViewPager相关的碎片功能 – Bostone

一旦我写了类似的模板。在我的例子中,我可以上下左右滚动按钮。您可以修改它以满足您的要求。在我的例子,我有4次安排是这样的:


它看起来像这样。在图像I从视图向右滚动来查看2:

Android View Scrolling

的代码由此XML的:

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    > 
     <LinearLayout 
     android:layout_height="350sp" 
     android:layout_width="320sp"> 
     <LinearLayout 
      android:id="@+id/viewContainer" 
      android:background="#CCCCCC" 
      android:layout_width="640sp" 
      android:layout_height="700sp"> 
     </LinearLayout> 
    </LinearLayout> 
     <TableLayout 
      android:id="@+id/tableLayout" 
      android:layout_width="320sp" 
      android:layout_height="fill_parent" 
      android:stretchColumns="1" 
      android:gravity="bottom" 
      android:layout_alignParentBottom="true"> 
      <TableRow 
      android:background="#333333" 
      android:gravity="bottom">  
      <Button 
       android:id="@+id/btnUp" 
       android:layout_width="60sp" 
       android:layout_height="50sp" 
       android:text="Lift U" 
       /> 
      <Button 
       android:layout_width="60sp" 
       android:layout_height="50sp" 
       android:visibility="invisible" 
      /> 
      <Button 
       android:layout_width="60sp" 
       android:layout_height="50sp" 
       android:visibility="invisible" 
      /> 
      <Button 
       android:id="@+id/btnScreenUp" 
       android:layout_width="60sp" 
       android:layout_height="50sp" 
       android:layout_gravity="right" 
       android:text="Scrn U" 
       /> 
      </TableRow> 
      <TableRow 
       android:background="#444444" 
       android:layout_gravity="right"> 
       <Button 
       android:id="@+id/btnDown" 
       android:layout_width="60sp" 
       android:layout_height="50sp" 
       android:text="Lift D" 
       /> 
       <Button 
       android:id="@+id/btnEnter" 
       android:layout_width="60sp" 
       android:layout_height="50sp" 
       android:text="Enter" 
       /> 
       <Button 
       android:id="@+id/btnScreenLeft" 
       android:layout_width="60sp" 
       android:layout_height="50sp" 
       android:layout_gravity="right" 
       android:text="Scrn L" 
       /> 
       <Button 
       android:id="@+id/btnScreenDown" 
       android:layout_width="60sp" 
       android:layout_height="50sp" 
       android:layout_gravity="right" 
       android:text="Scrn D" 
       /> 
       <Button 
       android:id="@+id/btnScreenRight" 
       android:layout_width="60sp" 
       android:layout_height="50sp" 
       android:layout_gravity="right" 
       android:text="Scrn R" 
       /> 
      </TableRow> 
    </TableLayout> 
</FrameLayout> 

和此Java代码:

import android.app.Activity; 
import android.os.Bundle; 
import android.util.DisplayMetrics; 
import android.view.Gravity; 
import android.view.View; 
import android.view.View.OnClickListener; 
import android.view.Window; 
import android.widget.Button; 
import android.widget.LinearLayout; 
import android.widget.TextView; 

public class ViewSwitcherTest extends Activity { 

    private TextView view1, view2, view3, view4; 
    private Button btnUp, btnEnter, btnDown, btnScreenDown, btnScreenUp, btnScreenLeft, btnScreenRight; 
    private LinearLayout viewContainer; 
// private TableLayout tableLayout; 
    private LinearLayout.LayoutParams layoutParams; 
    private DisplayMetrics metrics = new DisplayMetrics(); 
    private int top = 0, left = 0; 
    private float density = 1.0f; 
// private ViewSwitcher switcher; 

    /** Called when the activity is first created. */ 
    @Override 
    public void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     requestWindowFeature(Window.FEATURE_NO_TITLE); 
     getWindowManager().getDefaultDisplay().getMetrics(metrics); 
     density = metrics.density; 
     setContentView(R.layout.main); 
//  Buttons 
     btnEnter = (Button)findViewById(R.id.btnEnter); 
     btnUp = (Button)findViewById(R.id.btnUp); 
     btnDown = (Button)findViewById(R.id.btnDown); 
     btnScreenDown = (Button)findViewById(R.id.btnScreenDown); 
     btnScreenUp = (Button)findViewById(R.id.btnScreenUp); 
     btnScreenLeft = (Button)findViewById(R.id.btnScreenLeft); 
     btnScreenRight = (Button)findViewById(R.id.btnScreenRight); 
//  -------- 
//  tableLayout = (TableLayout)findViewById(R.id.tableLayout); 
     view1 = new TextView(this); 
     view1.setBackgroundResource(R.drawable.view1); 
     view1.setHeight((int)(350*density)); 
     view1.setWidth((int)(320*density)); 
     view1.setGravity(Gravity.CENTER_VERTICAL|Gravity.CENTER_HORIZONTAL); 
     layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT); 
     layoutParams.setMargins(left, top, 0, 0); 
     viewContainer = (LinearLayout)findViewById(R.id.viewContainer); 
     viewContainer.addView(view1, layoutParams); 
     //Add 2nd view 
     view2 = new TextView(this); 
     view2.setBackgroundResource(R.drawable.view2); 
     view2.setHeight((int)(350*density)); 
     view2.setWidth((int)(320*density)); 
     view2.setGravity(Gravity.CENTER_VERTICAL|Gravity.CENTER_HORIZONTAL); 
     layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT); 
     layoutParams.setMargins(left, top, 0, 0); 
     viewContainer.addView(view2, layoutParams); 
     //Add 3rd view 
     view3 = new TextView(this); 
     view3.setBackgroundResource(R.drawable.view3); 
     view3.setHeight((int)(350*density)); 
     view3.setWidth((int)(320*density)); 
     view3.setGravity(Gravity.CENTER_VERTICAL|Gravity.CENTER_HORIZONTAL); 
     top += 350*density; 
     left += 640*density*(-1); 
     layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT); 
     layoutParams.setMargins(left, top, 0, 0); 
     viewContainer.addView(view3, layoutParams);  
     //add 4th view 
     view4 = new TextView(this); 
     view4.setBackgroundResource(R.drawable.view4); 
     view4.setHeight((int)(350*density)); 
     view4.setWidth((int)(320*density)); 
     view4.setGravity(Gravity.CENTER_VERTICAL|Gravity.CENTER_HORIZONTAL); 
     top += 0; 
     left += 640*density; 
     layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT); 
     layoutParams.setMargins(left, top, 0, 0); 
     viewContainer.addView(view4, layoutParams);  
     btnEnter.setOnClickListener(new OnClickListener() { 
      @Override 
      public void onClick(View v) { 
       // Quit the application for now 
       finish(); 
      } 
     }); 
     btnScreenLeft.setOnClickListener(new OnClickListener() { 
      @Override 
      public void onClick(View v) { 
       viewContainer.scrollBy(-10,0); 
      } 
     }); 
     btnScreenRight.setOnClickListener(new OnClickListener() { 
      @Override 
      public void onClick(View v) { 
       viewContainer.scrollBy(10,0); 
      } 
     }); 
     btnScreenUp.setOnClickListener(new OnClickListener() { 
      @Override 
      public void onClick(View v) { 
       viewContainer.scrollBy(0,-10); 
      } 
     }); 
     btnScreenDown.setOnClickListener(new OnClickListener() { 
      @Override 
      public void onClick(View v) { 
       viewContainer.scrollBy(0,10); 
      } 
     }); 
//  view1.setOnKeyListener(new OnKeyListener() {    
//   @Override 
//   public boolean onKey(View v, int keyCode, KeyEvent event) { 
//    if (keyCode == KeyEvent.KEYCODE_DPAD_DOWN) 
//     viewContainer.scrollBy(0,10); 
//    return true; 
//   } 
//  }); 
    } 
} 

每个屏幕上的大数字都是带有这些数字的黑色背景图像。 (我没有在这里发布,因为你可能会修改代码)。

+0

不行,不能走这条路线。我有更复杂的设置,我使用ViewPager和FragmentStatePagerAdapter来处理碎片生命周期。在这一点上,我几乎设置了修改ViewPager的想法,并寻找哪些部分需要修改/扩展的提示 – Bostone

如果要扩展ViewPager,只需重写draw方法和setOffscreenPageLimit(int limit)即可。但是,如果你的碎片本身有点复杂,我推荐使用FragmentPageAdapter

您可以查看源代码here或者如果你想检查一个在支持包,你可以做到这一点here

+0

我正在使用FragmentStatePagerAdapter,但需要照顾一个单一的片段,我需要重组的方式列表在屏幕上放置多个片段。我知道代码的来源,谢谢 – Bostone

+0

如果除了主函数之外的代码片段不需要处于活动状态,只需使用缩放缩小*代码片段,并在代表组件/片段的任一侧添加图片即可。一次制作图像,然后在您滚动该区域时绘制它们。 –

+0

它的确如此。特别是如果你在平板电脑和侧片完全可见 – Bostone

我们正在做一件几乎完全如您所描述的使用GalleryFragments以及一个扩展了BaseAdapter的图库适配器。我会建议去一个画廊来实现你的目标(我们也使用ViewPager作为我们不需要看到其他片段的视图)。