ViewPage 实现卡片效果

在实际开发中我们可能需要实现卡片效果，一个页面显示一个卡片，左右各半个，这种的ui效果，如图：

这种效果的实现也不难。
如何实现一个页面上，显示一个卡片呢，左右各半个，
我们就要用一个属性了

  <com.test.scrolltransptoolbar.CardViewPageandroid:id="@+id/vp"android:layout_width="match_parent"android:layout_height="330dp"android:clipToPadding="false"android:layout_centerInParent="true"android:overScrollMode="never"android:paddingBottom="20dp"android:paddingLeft="60dp"android:paddingRight="60dp"></com.test.scrolltransptoolbar.CardViewPage>

CardViewPage 是我继承ViewPage实现的类。

最总要的属性

 android:clipToPadding="false"

• clipToPadding就是说控件的绘制区域是否在padding里面的，true的情况下如果你设置了padding那么绘制的区域就往里缩，如果为false ，那么绘制区域会包含 之前设置到padding部分。

进一步分析， 下面padding 设置区域范围有效是正对中间的卡片， 如果设置android:clipToPadding=”false”，那么左右padding 设置区域就会是上一个卡片或者是下一个卡片的绘制区域，不知道你们懂了没。

     android:paddingBottom="20dp"android:paddingLeft="60dp"android:paddingRight="60dp"

如果你，设置了上面代码，然后加入下面代码

    viewPager.setOffscreenPageLimit(3);//预加载3页

很简单的实现上面效果，一个卡片，然后左右部分各显示上个与下个图片的的部分。

ViewPage复杂的使用。
1.卡片效果
2.滑动卡片，增加阴影
3.点击卡片自定切换
5.选种或者滑动到本页面时候，卡片放大

效果：

因为，csdn只能上传2m内图片，所以压缩了，有点快，看不出来点击切换效果。

• 实现卡片效果，CardView
  引入：

def SUPPORT = "25.3.1"
dependencies {..compile "com.android.support:appcompat-v7:$SUPPORT"compile "com.android.support:cardview-v7:$SUPPORT"testCompile 'junit:junit:4.12'
}

常用方法：

app:cardBackgroundColor="#ffffff"  
cardView.setCardBackgroundColor(int);//设置CardView的background的颜色 app:cardCornerRadius="5dp"  
cardView.setRadius(float);//设置CardView的圆角半径 app:cardElevation="2sp"  
cardView.setMaxCardElevation(float)//设置CardView的elevation（阴影，值越大，阴影效果越强）  app:cardMaxElevation="2sp"//设置CardView的最大Elevation  app:cardPreventCornerOverlap="true|false"  
cardView.setPreventCornerOverlap(boolean);//在Android5.0以前的版本上防止子控件和CardView的圆角之间的重叠交接 app:cardUseCompatPadding="true|false"  
cardView.setUseCompatPaddin(boolean);//在Android5.0和以上版本添加padding让其和之前的版本有相同的测量形式 app:contentPadding=""  
cardView.setContentPadding(int,int,int,int);//设置Card边缘和CardView的子控件之间的内边距 app:contentPaddingTop=""  
app:contentPaddingBottom=""  
app:contentPaddingLeft=""  
app:contentPaddingRight=""  

ViewPagerCardViewActivity 代码：

package com.test.scrolltransptoolbar;import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v7.widget.CardView;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;import java.util.ArrayList;
import java.util.List;/*** Created by Administrator on 2017/9/11.*/
public class ViewPagerCardViewActivity extends Activity {
    private  List<CardView>   views=new ArrayList<>();private List<ImgBean> imgBeens;private MyAdapter adapter;private CardViewPage viewPager;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_view_pager_card_view);findViewById();}//初始化控件private void findViewById() {viewPager = (CardViewPage) findViewById(R.id.vp);imgBeens = getList();adapter = new MyAdapter();viewPager.setAdapter(adapter);//预加载3页viewPager.setOffscreenPageLimit(3);}/*** 初始化数据* @return*/public List<ImgBean> getList() {List<ImgBean>  imgBeen=new ArrayList<>();views.add(null);views.add(null);views.add(null);views.add(null);views.add(null);imgBeen.add(new ImgBean(R.mipmap.img2,"西斯美女"));imgBeen.add(new ImgBean(R.mipmap.img3,"漂亮美女"));imgBeen.add(new ImgBean(R.mipmap.img4,"混血美女"));imgBeen.add(new ImgBean(R.mipmap.img5,"韩国美女"));imgBeen.add(new ImgBean(R.mipmap.img6,"日本美女"));return imgBeen;}private  class MyAdapter extends PagerAdapter implements CardAdapter{
    private float mBaseElevation;@Overridepublic int getCount() {return imgBeens.size();}@Overridepublic boolean isViewFromObject(View view, Object object) {return view == object;//固定写法}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {container.removeView((View) object);//固定写法//当前卡片消失就移除views.set(position,null);}@Overridepublic Object instantiateItem(ViewGroup container, int position) {View  view= LayoutInflater.from(container.getContext()).inflate(R.layout.item_vp_view,container,false);container.addView(view);//必须这么写，要不然显示不出来CardView card_view  = (CardView) view.findViewById(R.id.card_view);ImageView  img= (ImageView) view.findViewById(R.id.img);TextView context= (TextView) view.findViewById(R.id.context);ImgBean  imgBean=  imgBeens.get(position);img.setImageResource(imgBean.getImg());context.setText(imgBean.getShuoming());if (mBaseElevation == 0) {mBaseElevation = card_view.getCardElevation();//获取卡片阴影Log.i("mBaseElevation","mBaseElevation=="+mBaseElevation);}// 设置z轴的最大高度值card_view.setMaxCardElevation(mBaseElevation*MAX_ELEVATION_FACTOR);//保留每一个卡片实体类views.set(position, card_view);view.setTag(position);view.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {int position= (int) v.getTag();viewPager.setCurrentItem(position);}});return view;}@Overridepublic float getBaseElevation() {return  mBaseElevation;}@Overridepublic CardView getCardViewAt(int position) {return views.get(position);}}
}

activity_view_pager_card_view.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><com.test.scrolltransptoolbar.CardViewPage  android:id="@+id/vp"android:layout_width="match_parent"android:layout_height="330dp"android:clipToPadding="false"android:layout_centerInParent="true"android:overScrollMode="never"android:paddingBottom="20dp"android:paddingLeft="60dp"android:paddingRight="60dp"></com.test.scrolltransptoolbar.CardViewPage>
</RelativeLayout>

CardViewPage 代码

package com.test.scrolltransptoolbar;import android.content.Context;
import android.support.v4.view.ViewPager;
import android.support.v7.widget.CardView;
import android.util.AttributeSet;/*** Created by Administrator on 2017/9/12.*/public class CardViewPage extends ViewPager{
    private   float  mLastOffset;private CardAdapter cardAdapter;public CardViewPage(Context context) {super(context);}public CardViewPage(Context context, AttributeSet attrs) {super(context, attrs);}@Overrideprotected void onPageScrolled(int position, float positionOffset, int offsetPixels) {super.onPageScrolled(position, positionOffset, offsetPixels);cardAdapter = (CardAdapter) getAdapter();if (cardAdapter ==null){return;}// If we're going backwards, onPageScrolled receives the last position// instead of the current oneint realCurrentPosition;int nextPosition;float realOffset;//positionOffset 如果往左边滑动就是逐渐变大 0->1 ，然后归0，如果往右滑动 1-》0 ，最后归0。//下面这个判断区分左右，boolean goingLeft = mLastOffset > positionOffset;if (goingLeft) {realCurrentPosition = position + 1;nextPosition = position;realOffset = 1 - positionOffset;} else {nextPosition = position + 1;realCurrentPosition = position;realOffset = positionOffset;}if (nextPosition > getAdapter().getCount() - 1|| realCurrentPosition > cardAdapter.getCount() - 1) {return;}CardView currentCard = cardAdapter.getCardViewAt(realCurrentPosition);if (currentCard!=null){float  scclex=(float) (1 + 0.1 * (1 - realOffset));float  sccley=(float)(1 + 0.1 * (1 - realOffset));currentCard.setScaleX(scclex);currentCard.setScaleY(sccley);currentCard.setCardElevation((cardAdapter.getBaseElevation() + cardAdapter.getBaseElevation()* (CardAdapter.MAX_ELEVATION_FACTOR - 1) * (1 - realOffset)));}CardView nextCard = cardAdapter.getCardViewAt(nextPosition);// We might be scrolling fast enough so that the next (or previous) card// was already destroyed or a fragment might not have been created yetif (nextCard != null) {nextCard.setScaleX((float) (1 + 0.1 * (realOffset)));nextCard.setScaleY((float) (1 + 0.1 * (realOffset)));nextCard.setCardElevation((cardAdapter.getBaseElevation() + cardAdapter.getBaseElevation()* (CardAdapter.MAX_ELEVATION_FACTOR - 1) * (realOffset)));}mLastOffset = positionOffset;}}

CardAdapter 代码

package com.test.scrolltransptoolbar;import android.support.v7.widget.CardView;/*** Created by Administrator on 2017/9/12.* 卡片接口类*/public interface CardAdapter {
    //数值越大间距越大int MAX_ELEVATION_FACTOR = 8;float getBaseElevation();CardView getCardViewAt(int position);int getCount();
}

item_vp_view.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/card_view"android:layout_width="match_parent"xmlns:app="http://schemas.android.com/apk/res-auto"app:cardUseCompatPadding="true"app:cardPreventCornerOverlap="false"android:layout_height="wrap_content"><RelativeLayout  android:layout_width="match_parent"android:layout_height="wrap_content"><ImageView  android:id="@+id/img"android:layout_width="fill_parent"android:layout_height="match_parent"android:scaleType="fitXY" /><TextView  android:id="@+id/context"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="dsfsd"android:layout_alignParentBottom="true"android:layout_centerHorizontal="true"android:layout_gravity="center_horizontal" /></RelativeLayout></android.support.v7.widget.CardView >

demo地址：
https://github.com/Followk/scrolltransptoolbar

参考大神：
https://github.com/rubensousa/ViewPagerCards

http://blog.csdn.net/fxdes/article/details/50804354