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]

我确实看到了这个相关的post here，其中的答案提供了一些提示和参考信息..但不幸的是，我仍在努力解决这个问题。

Answer 1

您有两种可能的方法：采用一些开源项目并根据您的需要进行调整，否则，请从详细教程中将卡刷卡构建为图像滑块。

对于第一个选项，请查看Github，在那里您可以找到几个小型项目，通常在垂直或水平滚动时使用features进行卡组。我想你可能会发现以下项目很有趣：

CardDeck： Deck of Cards for Android
DeckPicker：一个完整的Android anki droid项目，在浏览器屏幕中有一些Card Preview功能。在预览中，屏幕卡将显示为card browser窗口上的审核模式。

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

对于第二种选择，对于您喜欢从头开始实施它的情况，然后采取简单的步骤，将您的项目增加到更自需的自定义的更具体/复杂的细节。全屏图像滑块适合帐单，该帐单将包含视图页面的活动：

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，例如： enter image description here

要添加垂直动作，只需添加其他垂直布局：

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：

enter image description here

在一天结束时，你想要的是一个网格，例如垂直和水平滚动在一起。为此，您必须将垂直和水平滑动组合成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>

采取这些步骤并将其组合起来，可以让你达到你想要的效果。

Answer 2

试试这个示例代码 -

public class Main extends Activity {

    int position=0;
    LinearLayout full;
    Intent intent;

    public Integer[] images= {
                R.drawable.image1, R.drawable.image2,
                R.drawable.image3, R.drawable.image4,
                R.drawable.image5, R.drawable.image6
    };

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);      
        full = (LinearLayout) findViewById(R.id.full);
        changeImage();
        ActivitySwipeDetector activitySwipeDetector = new ActivitySwipeDetector(this);
        full.setOnTouchListener(activitySwipeDetector);
    }



    private void changeImage(){
        full.setBackgroundResource(images[position]);
   }

    public class ActivitySwipeDetector implements View.OnTouchListener {

        static final String logTag = "ActivitySwipeDetector";
        static final int MIN_DISTANCE = 100;
        private float downX, upX;
        Activity activity;

        public ActivitySwipeDetector(Activity activity){
            this.activity = activity;
        }

        public void onRightToLeftSwipe(){
            Log.i(logTag, "RightToLeftSwipe!");
            if(position < images.length - 1){
                position++;
                 changeImage();
            }
    }

        public void onLeftToRightSwipe(){
            Log.i(logTag, "LeftToRightSwipe!");
            if(position > 0){
                position--;
                changeImage();
           }
        }

        public boolean onTouch(View v, MotionEvent event) {
            switch(event.getAction()){
                case MotionEvent.ACTION_DOWN: {
                    downX = event.getX();
                    return true;
                }
                case MotionEvent.ACTION_UP: {
                    upX = event.getX();

                    float deltaX = downX - upX;

                    // swipe horizontal?
                    if(Math.abs(deltaX) > MIN_DISTANCE){
                        // left or right
                        if(deltaX < 0) { this.onLeftToRightSwipe(); return true; }
                        if(deltaX > 0) { this.onRightToLeftSwipe(); return true; }
                    }
                    else {
                            Log.i(logTag, "Swipe was only " + Math.abs(deltaX) + " long, need at least " + MIN_DISTANCE);
                            return false; // We don't consume the event
                    }


                    return true;
                }
            }
            return false;
        }
    }

    @Override
    protected void onPause() {
        super.onPause();
    }

    @Override 
    public void onResume()
    {
        super.onResume();
    }

    @Override
    protected void onStop() {
        super.onStop();
    }

    @Override 
    public void onBackPressed() {
        super.onBackPressed();
    }       
}

XML -

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/full"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerInside"
    android:orientation="vertical" />

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

2 个答案: