具有水平滑动的 Android StackView 布局类型

Question

我正在构建一个需要“Card Deck”UI 小部件的 Android 应用程序。

这是对可以执行以下操作的 Activity/布局示例的请求:

1) 垂直滑动支持:

列出一副可以垂直滚动/滑动的纸牌。 StackView 会这样做，但我愿意接受任何运行良好的解决方案(例如，某些 CardUI 项目)

2) 水平滑动支持:

对于任何一张牌，都有两个字典定义:

• 如果我们向左滑动 - 那么我们可以看到定义 A。
• 如果我们向右滑动，我们会看到定义 B
• 水平滑动更新不会更新整个屏幕布局，只会更新被滑动的卡片。所以如果我向右滑动 Card2 可以看到 A2，我仍然在 A2 后面有 Card1

例子:

[A1][Card1][B1]
[A2][Card2][B2]
[A3][Card3][B3]

我确实看到了这个相关的 post here ，那里的答案提供了一些提示和引用信息。但不幸的是，我仍在努力弄清楚。

Answer 1

您有两种可能的方法:采用一些开源项目并根据您的需要进行调整，或者根据详细教程将您的卡片刷卡构建为图像 slider 。

对于第一个选项，请查看 Github，您会在其中找到几个用 features 做纸牌的小项目。通常在垂直或水平滚动。我想您可能会对以下项目感兴趣:

• CardDeck: Deck of Cards安卓

• DeckPicker:一个完整的 android anki droid 项目，在浏览器屏幕中具有卡片预览的一些附加功能。在预览中，屏幕卡将像审查模式一样显示在 card browser 上窗口。

最后，如果您所做的额外更改看起来不错，则值得向原始项目提交补丁。

对于第二种选择，如果您希望从头开始实现它，然后采取简单的步骤，将您的项目扩展为更具体/更复杂的细节，并根据您的意愿对其进行自定义。全屏图像 slider 符合要求，它包含 View 页面的 Activity :

activity_fullscreen_view.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

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

</LinearLayout>

还有一个 Java class使用全屏查看器:

public class FullScreenImageAdapter extends PagerAdapter {

    private Activity _activity;
    private ArrayList<String> _imagePaths;
    private LayoutInflater inflater;

    // constructor
    public FullScreenImageAdapter(Activity activity,
            ArrayList<String> imagePaths) {
        this._activity = activity;
        this._imagePaths = imagePaths;
    }

    @Override
    public int getCount() {
        return this._imagePaths.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == ((RelativeLayout) object);
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        ImageView imgDisplay;
        Button btnClose;

        inflater = (LayoutInflater) _activity
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View viewLayout = inflater.inflate(R.layout.layout_fullscreen_image, container,
                false);

        imgDisplay = (ImageView) viewLayout.findViewById(R.id.imgDisplay);
        btnClose = (Button) viewLayout.findViewById(R.id.btnClose);

        BitmapFactory.Options options = new BitmapFactory.Options();
        options.inPreferredConfig = Bitmap.Config.ARGB_8888;
        Bitmap bitmap = BitmapFactory.decodeFile(_imagePaths.get(position), options);
        imgDisplay.setImageBitmap(bitmap);

        // close button click event
        btnClose.setOnClickListener(new View.OnClickListener() {           
            @Override
            public void onClick(View v) {
                _activity.finish();
            }
        });

        ((ViewPager) container).addView(viewLayout);

        return viewLayout;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        ((ViewPager) container).removeView((RelativeLayout) object);

    }
}

然后就实现了图片滑动horizontally ， 如:

要添加垂直运动，只需包括额外的垂直布局:

main.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical" >

    <TextView

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:text="Swipe Demo"

        android:gravity="center"

        android:layout_margin="10dip" />

        <LinearLayout

            android:layout_width="fill_parent"

            android:layout_height="fill_parent"

            android:orientation="vertical"

            android:gravity="center">

                 <ImageView

                     android:layout_width="wrap_content"

                     android:layout_height="wrap_content"

                     android:layout_gravity="center"

                     android:gravity="center"

                     android:layout_margin="10dip"

                     android:id="@+id/image_place_holder"/>

           </LinearLayout>

</LinearLayout>

这将允许您滑动东西 vertically :

归根结底，你想要的是一个网格，比如垂直和水平一起滚动。为此，您必须将垂直和水平滑动结合到 table layout 中。 :

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content">

    <HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
                  android:layout_width="wrap_content"
                  android:layout_height="fill_parent">

         <TableLayout
                  android:id="@+id/amortization"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content">

              <TableRow
                  android:background="#ffff00">
                  <TextView
                       android:text="@string/amortization_1"
                       android:padding="3dip"/>
                  <TextView
                       android:text="@string/amortization_2"
                       android:padding="3dip"/>
                  <TextView
                       android:text="@string/amortization_3"
                       android:padding="3dip"/>
                  <TextView
                       android:text="@string/amortization_4"
                       android:padding="3dip"/>
                  <TextView
                       android:text="@string/amortization_5"
                       android:padding="3dip"/>
                  <TextView
                       android:text="@string/amortization_6"
                       android:padding="3dip"/>
                  <TextView
                       android:text="@string/amortization_7"
                       android:padding="3dip"/> 
              </TableRow>
         </TableLayout>
    </HorizontalScrollView>
</ScrollView>

采取这些步骤并将其结合起来，将使您达到您想要的效果。