Как добавить поле страницы сверху для вертикального просмотра?

1

Я пытаюсь реализовать вертикальный вид пейджер, как приложение "Happn"

Изображение 174551

Вот мой пользовательский класс ViewPager

VerticalViewPager.java

import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class VerticalViewPager extends ViewPager {

    public VerticalViewPager(Context context) {
        super(context);
        init();
    }

    public VerticalViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        // The majority of the magic happens here
        setPageTransformer(true, new VerticalPageTransformer());
        // The easiest way to get rid of the overscroll drawing that happens on the left and right
        setOverScrollMode(OVER_SCROLL_NEVER);
    }

    private class VerticalPageTransformer implements ViewPager.PageTransformer {

        @Override
        public void transformPage(View view, float position) {

            if (position < -1) { // [-Infinity,-1)
                // This page is way off-screen to the left.
                view.setAlpha(0);

            } else if (position <= 1) { // [-1,1]
                view.setAlpha(1);

                // Counteract the default slide transition
                view.setTranslationX(view.getWidth() * -position);

                //set Y position to swipe in from top
                float yPosition = position * view.getHeight();
                view.setTranslationY(yPosition);

            } else { // (1,+Infinity]
                // This page is way off-screen to the right.
                view.setAlpha(0);
            }
        }
    }


    private MotionEvent swapXY(MotionEvent ev) {
        float width = getWidth();
        float height = getHeight();

        float newX = (ev.getY() / height) * width;
        float newY = (ev.getX() / width) * height;

        ev.setLocation(newX, newY);

        return ev;
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev){
        boolean intercepted = super.onInterceptTouchEvent(swapXY(ev));
        swapXY(ev); // return touch coordinates to original reference frame for any child views
        return intercepted;
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        return super.onTouchEvent(swapXY(ev));
    }

}

Я могу показать вертикальный вид пейджера. Но я не могу поддерживать поле страницы сверху, так что соседние элементы также могут частично видны. Ниже метод setPageMargin() работает для горизонтального viewpager. Я хочу, чтобы аналогичные зияли в вертикальном просмотре пейджера. Пожалуйста, помогите мне, я действительно поражен.

mPager.setPageMargin(-100);
Теги:
android-viewpager
android-layout

2 ответа

0 
**my viewpager item xml**

    <?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:background="@color/dim_white"
    android:layout_height="match_parent">

    <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/card_view"
        style="@style/CardStyle.ContactList"
        android:layout_width="match_parent"
        android:layout_marginBottom="60dp"
        android:layout_marginTop="60dp"
        android:layout_marginLeft="22dp"
        android:layout_marginRight="22dp"
        app:cardCornerRadius="20dp"
        android:layout_height="match_parent">
    <ImageView

        android:id="@+id/profile_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:adjustViewBounds="true"
        android:src="@drawable/logo_3_1" />

    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="80dp"
        android:gravity="center_horizontal"
        android:text="Sardar"
        android:textColor="@color/white"
        android:textSize="@dimen/letter_large" />
    </android.support.v7.widget.CardView>
</FrameLayout>


**My parent layout :**

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
   ">

    <RelativeLayout
        android:id="@+id/empty_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/dim_white"
        android:visibility="gone">

        <ImageView
            android:id="@+id/add_photo"
            android:layout_width="72dp"
            android:layout_height="72dp"
            android:layout_centerInParent="true"
            android:layout_centerHorizontal="true"
            android:src="@drawable/favpholder"
            android:textSize="@dimen/verify_phone_number_text_size" />

        <TextView
            android:id="@+id/no_fav_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/add_photo"
            android:layout_marginLeft="@dimen/spacing_24_dp"
            android:layout_marginTop="@dimen/spacing_medium"
            android:layout_marginRight="@dimen/spacing_24_dp"
            android:gravity="center"
            android:text="@string/no_followers"
            android:textAlignment="center"
            android:textAppearance="@style/TextStyle.Medium"
            android:textColor="@color/slate"
            android:textSize="@dimen/letter_large" />


    </RelativeLayout>

    <android.support.v7.widget.CardView
        android:id="@+id/search_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/search_bar_height"
        android:layout_below="@id/empty_layout"
        android:layout_margin="@dimen/spacing_medium">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/search_icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="@dimen/spacing_small"
                android:src="@drawable/ic_search_black_24dp" />

            <TextView
                android:id="@+id/search_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_margin="@dimen/spacing_xsmall"
                android:layout_toEndOf="@id/search_icon"
                android:gravity="center"
                android:text="@string/search_contacts" />
        </RelativeLayout>
    </android.support.v7.widget.CardView>


    <custom.VerticalViewPager
        android:layout_below="@id/search_bar"
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>
Поделиться
0

Попробуйте этот код ниже

    viewPager.setClipToPadding(false);
    viewPager.setPadding(70, 30, 170, 30);//left,top,right,bottom in px
    viewPager.setPageMargin(30);

Это установит отступы по желанию, этот работает для меня. Попробуйте и дайте мне знать, если это сработало для вас

Поделиться
  • 0
    Привет, спасибо за твой добрый ответ. К сожалению, это не сработало.
  • 0
    Можете ли вы попробовать этот код один раз, используя ViewPager по умолчанию, а не пользовательский?
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню