android - Android-複数の表示可能なアイテムの水平スクロール

Question

編集：簡単な解決策については私自身の答えを参照してください

重要：以下に概説するシナリオを満たすようにViewPagerを変更する明確な方法として、報奨金が提供されます。水平スクロールビューを提供しないでください-完全なフラグメントライフサイクルシナリオをカバーする必要があります

Fragments1つのアイテムが中央にあり、右/左のアイテムが部分的または完全に表示されるベースのビューの水平スクロールを実装する必要があります。ViewPager一度に1つのアイテムを表示することに重点が置かれているため、このタスクには適していません。

以下の理解を容易にするために、アイテム1、5、および6が表示可能領域の外側にある簡単なスケッチを示します。そして、この表示可能な数を構成可能にしたいので、たとえば縦向きのビューでは、2つ（または1つだけ）のアイテムのみを表示します。

中央のアイテムが表示されている限り、他のアイテムをトリミングできる限り、画面に3つのアイテムを収めようとはしていません。小さな画面では、中央に1つのアイテムを配置しても問題ありません。画面のサイズが大きくなると、複数のアイテムが表示されます（トリミングしても問題ありません）。

これはギャラリーのように見えますが、アイテムは単純な画像ではなくFragments、各フラグメントに垂直方向にスクロール可能なリストが含まれていることを理解しています

PSは、@ Commonswareによるこのブログ投稿を見つけました。このブログ投稿には、 3つの異なるアプローチがリストされています。私の必要性のために私は＃3が好きです

ここに画像の説明を入力してください

score 24 · Accepted Answer

これには驚くほど簡単な答えがあります。なぜすぐに投稿されなかったのかさえわかりません。正確な効果を得るために必要だったのは、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;
    }

score 2 · Accepted Answer

テンプレートに似たものを書いたら。私の例では、ボタンを上下左右にスクロールできます。要件を満たすために少し変更することができます。私の例では、次のように配置された 4 つのビューがあります。

1 2
3 4

このように見えます。画像では、ビュー 1 から右にスクロールしてビュー 2 に移動します。

Android ビューのスクロール

コードは次の 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;
//          }
//      });
    }
}

すべての画面の大きな数字は、それらの数字が描かれた黒い背景画像です。（とにかくコードを変更する可能性があるため、ここには投稿しませんでした）。

score 1 · Accepted Answer

GallerywithとFragments、を拡張するギャラリーアダプタを使用して説明しているのとほぼ同じように実行していBaseAdapterます。私はあなたの目標を達成するためにギャラリーに行くことをお勧めします（私たちViewPagerは他の断片を見る必要がないビューにもを使用します）。

score 0 · Accepted Answer

ViewPagerを拡張する場合は、drawメソッドをオーバーライドし、setOffscreenPageLimit（int limit）をオーバーライドします。ただし、FragmentPageAdapterフラグメント自体が複雑な場合は、使用することをお勧めします。

ここでソースコードを確認できます。サポートパッケージのソースコードを確認したい場合は、ここで確認できます。

score 0 · Accepted Answer

これを実装するには、2 つの方法が考えられます。

ViewSwitcher による。これがonGestureListenerでどのように機能するかを示す優れたYouTube ビデオです。ただし、これが写真のように複数のビューで機能するかどうかはわかりません。
代わりに、 HorizontalScrollViewを使用できます。ただし、ある ScrollView が別の内部にある場合、これはしばしば問題を引き起こしますが、試してみる価値があるかもしれません!

それがどうなるか教えてください、頑張ってください！

score 0 · Accepted Answer

カスタム水平スクロールビューを作成して同様のことを実現する方法については、このブログ投稿をご覧ください。この例では一度に 1 つの画面しか表示されませんが、必要に応じて簡単に変更できるはずです。

score 0 · Accepted Answer

MrZanderの2番目の回答に加えて、これを見てください https://stackoverflow.com/a/2655740/935075

android - Android-複数の表示可能なアイテムの水平スクロール

7 に答える 7

Related

Reference