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

Question

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

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

1)垂直滑动支持:

列出可以垂直滚动/滑动的一副牌.StackView做到了这一点,但我对任何运行良好的解决方案持开放态度(例如,一些CardUI项目)

2)水平滑动支持:

对于任何卡,有2个字典定义:

• 如果我们进行左侧滑动 - 那么我们可以看到定义A.
• 如果我们进行正确的滑动,我们会看到定义B.
• 水平滑动更新不会更新整个屏幕布局,只会刷新刷卡.因此,如果我将Card2向右滑动以查看A2,我仍然将Card1置于A2之后

例:

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

我确实在这里看到了这个相关的帖子,那里的答案提供了一些提示和参考信息..但不幸的是,我仍然想弄明白.

Answer 1

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

对于第一个选项,请查看Github,在那里您可以找到几个小型项目,这些项目通常在垂直或水平滚动上进行功能.我想你可能会发现以下项目很有意思:

• CardDeck:适用于Android 的卡片组

• DeckPicker:一个完整的Android anki droid项目,在浏览器屏幕中具有Card Preview的一些附加功能.在预览屏幕卡中将显示为卡浏览器窗口上的查看模式.

最后,如果您所做的其他更改看起来不错,则可以将补丁提交到原始项目.

对于第二种选择,对于您喜欢从头开始实施的情况,然后采取简单的步骤,将您的项目发展为更具体/复杂的细节,随意定制.全屏图像滑块适合帐单,该帐单将包含视图页面的活动:

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类:

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);

    }
}

然后,您可以实现水平滑动的图像,例如:

要添加垂直运动,只需添加其他垂直布局:

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>

这将允许您垂直滑动:

在一天结束时,您想要的是一个网格,例如垂直和水平滚动在一起.为此,您必须将垂直和水平滑动组合成表格布局:

<?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>

采取这些步骤并将其组合起来,可以实现您想要的效果.