Android - 多个可查看项目的水平滚动-Java 学习之路

编辑：看看我自己的答案，以便于解决

IMPORTANT ：提供Bounty以明确修改ViewPager以满足下面概述的方案 . 请不要提供HorizontalScrollView - 我需要覆盖完整的Fragment生命周期场景

我需要实现基于 Fragments 的视图的水平滚动，其中一个项目位于中心，右侧/左侧的项目部分或完全可见 . ViewPager 不适合该任务，因为它专注于每次显示一个项目 .

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

我不打算在屏幕上说出3个项目，只要显示中心项目，其他项目就可以被裁剪 . 在小屏幕上可以有1个中心项目，并且当屏幕增大时，应显示多个（裁剪为OK）项目

我知道这看起来像一个画廊但是这些项目不是简单的图像，而是 Fragments ，每个片段都有一个可垂直滚动的列表

附：在@Commonsware找到了这个博客帖子list 3 different approaches . 根据我的需要，我喜欢＃3

enter image description here

7 回答

0
这个答案非常容易，我马上就发布了 . 为了获得确切的效果，我需要做的就是覆盖 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;
    }
```
回复于 2024-05-18T20:13:31+08:00

有一次我写了类似模板的东西 . 在我的例子中，我可以使用按钮上下和侧面滚动 . 您可以稍微修改它以满足您的要求 . 在我的例子中，我有4个像这样排列的视图：

1 2
3 4

看起来像这样 . 在图片上，我从视图1向右滚动到视图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;
//          }
//      });
    }
}

每个屏幕上的大数字都是黑色背景图像，上面画着这些数字 . （我没有在这里发布，因为你可能会修改代码） .

回复于 2024-05-18T20:13:31+08:00

0

我们正在做的事情与您描述使用带有 Fragments 的 Gallery 以及扩展 BaseAdapter 的图库适配器非常相似 . 我建议你去画廊去实现你的目标（我们也使用 ViewPager 作为我们不需要看其他片段的视图） .

回复于 2024-05-18T20:13:31+08:00
0
我可以想到两种可能实现这一点的方法 .
- 由ViewSwitcher . 这是一个很好的YouTube video，显示它如何与onGestureListener一起使用 . 但是，我不确定这是否适用于您的图片显示的多个视图 .
- 作为替代方案，您可以使用HorizontalScrollView . 但是，如果您在另一个内部有一个ScrollView，这通常会导致问题，但它可能值得一试！
让我知道它是怎么回事，祝你好运！
回复于 2024-05-18T20:13:31+08:00
2

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

回复于 2024-05-18T20:13:31+08:00
1

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

回复于 2024-05-18T20:13:31+08:00
0

如果要扩展ViewPager，只需覆盖draw方法和setOffscreenPageLimit（int limit） . 但是，如果您的片段本身很复杂，我建议使用 FragmentPageAdapter .

您可以检查源代码 here ，或者如果要检查支持包中的代码，可以执行 here .

回复于 2024-05-18T20:13:31+08:00

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

7 回答

相关问题