如何在垂直视图寻呼机的顶部添加页边距? [英] How to add page margin on top for Vertical view pager?

问题描述

我正在尝试实现"Happn"应用之类的垂直视图传呼机

I am trying to implement vertical view pager like "Happn" app

这是我自定义的ViewPager类

Here is my custom ViewPager class

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.我想在垂直视图寻呼机中使用类似的间隙.请帮助我，我真的很震惊.

I am able to show vertical view pager. But I am not able to maintain page margin on top, So that adjacent items also can partially visible. Below setPageMargin() method is working for horizontal viewpager. I want similar gaping in vertical view pager. Please help me, I am really struck.

mPager.setPageMargin(-100);

推荐答案

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

这篇关于如何在垂直视图寻呼机的顶部添加页边距?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！