如何使用保證金或不同設計顯示viewpager

Question

我正在使用視圖尋呼機顯示一些片段。

我試圖參照這個來實現這一目標：Android ViewPager - Smooth Transition for this Design

我的尋呼機查看包含它的佈局：

<LinearLayout 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="match_parent" 
android:background="@color/white" 
android:orientation="vertical" 
android:weightSum="1" 
tools:context="com.tpayerapp.Fragments.DepositMoneyFragment"> 


<android.support.v4.view.ViewPager 
    android:id="@+id/viewpager" 
    android:layout_width="match_parent" 
    android:layout_height="200dp" 
    android:layout_centerInParent="true" 
    android:clipToPadding="false" 
    android:layout_above="@+id/indicator" 
    android:layout_below="@+id/tabs" 
    android:padding="80dp" /> 

<me.relex.circleindicator.CircleIndicator 
    android:id="@+id/indicator" 
    android:layout_width="fill_parent" 
    android:layout_height="40dp" 
    android:layout_alignParentBottom="true" 
    android:layout_centerInParent="false" 
    app:ci_drawable="@drawable/radius" 
    app:ci_drawable_unselected="@drawable/grey_radius" 
    app:ci_height="6dp" 
    app:ci_width="6dp"> 


</me.relex.circleindicator.CircleIndicator> 

片段1個佈局：

<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="match_parent" 
android:layout_marginLeft="40dp" 
android:layout_marginRight="40dp" 
tools:context="com.tpayerapp.Fragments.PayPalFragment"> 


<ImageView 
    android:id="@+id/imageView25" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_alignParentBottom="false" 
    android:layout_alignParentRight="false" 
    android:layout_alignParentTop="false" 
    android:layout_alignWithParentIfMissing="false" 
    android:layout_centerHorizontal="false" 
    android:layout_centerInParent="true" 
    android:background="@color/colorAccent" 
    app:srcCompat="@drawable/paypal" /> 

查看傳呼機片段java代碼：

public class DepositMoneyFragment extends Fragment { 
    private ViewPager viewPager; 

    @Override 
    public View onCreateView(LayoutInflater inflater, ViewGroup container, 
          Bundle savedInstanceState) { 
     // Inflate the layout for this fragment 
     View view = inflater.inflate(R.layout.fragment_deposit_money, container, false); 


     setUpUI(view); 

     return view; 
    } 

    public void setUpUI(View view) { 


     viewPager = (ViewPager) view.findViewById(R.id.viewpager); 
     setupViewPager(viewPager); 


     CircleIndicator indicator = (CircleIndicator) view.findViewById(R.id.indicator); 
     indicator.setViewPager(viewPager); 

     viewPager.setPageTransformer(false, new ViewPager.PageTransformer() { 
      @Override 
      public void transformPage(View page, float position) { 
       int pageWidth = viewPager.getMeasuredWidth() - viewPager.getPaddingLeft() - viewPager.getPaddingRight(); 
       int pageHeight = viewPager.getHeight(); 
       int paddingLeft = viewPager.getPaddingLeft(); 
       float transformPos = (float) (page.getLeft() - (viewPager.getScrollX() + paddingLeft))/pageWidth; 

       final float normalizedposition = Math.abs(Math.abs(transformPos) - 1); 
       page.setAlpha(normalizedposition + 0.5f); 

       int max = -pageHeight/10; 

       if (transformPos < -1) { // [-Infinity,-1) 
        // This page is way off-screen to the left. 
        page.setTranslationY(0); 
       } else if (transformPos <= 1) { // [-1,1] 
        page.setTranslationY(max * (1-Math.abs(transformPos))); 

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


      } 

     }); 
    } 

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

     ((OnFragmentTitleChangeListener) getActivity()).onFragmentTitle(getResources().getString(R.string.deposite)); 
    } 

    private void setupViewPager(ViewPager viewPager) { 
     ViewPagerAdapter adapter = new ViewPagerAdapter(getChildFragmentManager()); 
     adapter.addFragment(new PayPalFragment(), ""); 
     adapter.addFragment(new PayStackFragment(), ""); 
     adapter.addFragment(new NIBBSFragment(), ""); 

     viewPager.setAdapter(adapter); 
    } 
} 

需要做的事情來獲得這樣的設計是什麼？請幫忙。謝謝..

Answer 1

嘗試更改保證金填補

<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="match_parent" 
android:paddingLeft="40dp" 
android:paddingRight="40dp" 
tools:context="com.tpayerapp.Fragments.PayPalFragment"> 


<ImageView 
android:id="@+id/imageView25" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:layout_alignParentBottom="false" 
android:layout_alignParentRight="false" 
android:layout_alignParentTop="false" 
android:layout_alignWithParentIfMissing="false" 
android:layout_centerHorizontal="false" 
android:layout_centerInParent="true" 
android:background="@color/colorAccent" 
app:srcCompat="@drawable/paypal" /> 

Answer 2

嘗試此鏈接carousel layout with viewpager，如果您需要更多與此視圖相關的代碼，這是您需要的主要類。

CarouselLinearLayout.java

import android.content.Context; 
import android.graphics.Canvas; 
import android.util.AttributeSet; 
import android.util.Log; 
import android.widget.LinearLayout; 

public class CarouselLinearLayout extends LinearLayout { 
private float scale = CarouselPagerAdapter.BIG_SCALE; 

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

public CarouselLinearLayout(Context context) { 
    super(context); 
} 

public void setScaleBoth(float scale) { 
    this.scale = scale; 
    this.invalidate(); 
} 

@Override 
protected void onDraw(Canvas canvas) { 
    super.onDraw(canvas); 

    // The main mechanism to display scale animation, you can customize it as your needs 
    int w = this.getWidth(); 
    int h = this.getHeight(); 
    canvas.scale(scale, scale, w/2, h/2); 
} 

}

CarouselPagerAdapter.java

import android.support.v4.app.Fragment; 
import android.support.v4.app.FragmentManager; 
import android.support.v4.app.FragmentPagerAdapter; 
import android.support.v4.view.ViewPager; 

public class CarouselPagerAdapter extends FragmentPagerAdapter implements 
ViewPager.OnPageChangeListener { 

public final static float BIG_SCALE = 1.0f; 
public final static float SMALL_SCALE = 0.7f; 
public final static float DIFF_SCALE = BIG_SCALE - SMALL_SCALE; 
private MainActivity context; 
private FragmentManager fragmentManager; 
private float scale; 

public CarouselPagerAdapter(MainActivity context, FragmentManager fm) { 
    super(fm); 
    this.fragmentManager = fm; 
    this.context = context; 
} 

@Override 
public Fragment getItem(int position) { 
    // make the first pager bigger than others 
    try { 
     if (position == MainActivity.FIRST_PAGE) 
      scale = BIG_SCALE; 
     else 
      scale = SMALL_SCALE; 

     position = position % MainActivity.count; 

    } catch (Exception e) { 
     e.printStackTrace(); 
    } 
    return ItemFragment.newInstance(context, position, scale); 
} 

@Override 
public int getCount() { 
    int count = 0; 
    try { 
     count = MainActivity.count * MainActivity.LOOPS; 
    } catch (Exception e) { 
     // TODO: handle exception 
     e.printStackTrace(); 
    } 
    return count; 
} 

@Override 
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { 
    try { 
     if (positionOffset >= 0f && positionOffset <= 1f) { 
      CarouselLinearLayout cur = getRootView(position); 
      CarouselLinearLayout next = getRootView(position + 1); 

      cur.setScaleBoth(BIG_SCALE - DIFF_SCALE * positionOffset); 
      next.setScaleBoth(SMALL_SCALE + DIFF_SCALE * positionOffset); 
     } 
    } catch (Exception e) { 
     e.printStackTrace(); 
    } 
} 

@Override 
public void onPageSelected(int position) { 

} 

@Override 
public void onPageScrollStateChanged(int state) { 

} 

@SuppressWarnings("ConstantConditions") 
private CarouselLinearLayout getRootView(int position) { 
    return (CarouselLinearLayout) fragmentManager.findFragmentByTag(this.getFragmentTag(position)) 
      .getView().findViewById(R.id.root_container); 
} 

private String getFragmentTag(int position) { 
    return "android:switcher:" + context.pager.getId() + ":" + position; 
} 

}

Answer 3

我看到你已經將viewPager高度硬編碼爲android:layout_height="200dp"。你可以嘗試使用android:layout_height="match_parent"代替嗎？