Тип StackView для Android с горизонтальным прокруткой

Я создаю приложение для Android, которому нужен виджет пользовательского интерфейса "Card Deck".

Это запрос для примера активности/макета, который может выполнять следующие действия:

1) Поддержка вертикального разворота:

Перечислите колоду карт, которые можно вертикально прокручивать/прокручивать. StackView делает это, но я открыт для любого решения, которое работает хорошо (например, какой-то проект CardUI)

2) Поддержка горизонтального прокрутки:

Для любой карты есть 2 словарных определения:

  • Если мы сделаем левый салфетки - тогда мы можем увидеть определение A.
  • Если мы сделаем правильный салфетки, мы увидим определение B
  • Горизонтальное обновление салфетки не обновляет весь макет экрана, а только карту, которая была пробита. Поэтому, если я проведу карту2 справа, чтобы увидеть A2, у меня все еще есть Card1 за A2

Пример:

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

Я видел это связанное сообщение здесь, ответы там содержат некоторые подсказки и справочную информацию.. но, к сожалению, я все еще пытаюсь понять это.

ОТВЕТЫ

Ответ 1

У вас есть два возможных подхода: возьмите проект с открытым исходным кодом и приспособите его к вашим потребностям или, иначе, постройте прокрутку своей карты в качестве слайдера изображения из подробного руководства.

Для первого варианта, посмотрите в Github, где вы найдете несколько небольших проектов, которые делают колоду карт с функциями обычно на вертикальная или горизонтальная прокрутка. Я думаю, вы можете найти интересные проекты:

  • CardDeck: Палуба карт для Android

  • DeckPicker: полный андроидный анки-дроид-проект с дополнительной функцией просмотра карты в окне браузера. На экране предварительного просмотра карта будет отображаться как режим просмотра на обозреватель карт.

В конце концов, если дополнительные изменения, которые вы сделали, выглядят красиво, возможно, стоит отправить патч в исходный проект.

Для второго варианта, для случая, который вы предпочитаете внедрять с нуля, выполните простые шаги, увеличив свой проект на более конкретные/сложные детали, настраивая его по своему желанию. Ползунок полноэкранного изображения будет соответствовать счету, который будет включать активность для страницы просмотра:

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

    }
}

Затем вы достигнете изображения, скользящего по горизонтали, например: 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>

Это позволит вам перемещать объекты по вертикали:

enter image description here

В конце дня то, что вы хотите иметь, это сетка, например, вертикальная и горизонтальная прокрутки. Для этого вам нужно объединить вертикальное и горизонтальное скольжение в макет таблицы :

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

Выполняя такие шаги и объединяя его, вы сможете достичь желаемого эффекта.

Ответ 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" />