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

ViewPage 实现卡片效果相关推荐

android自动生成cardview,学习使用Material Design控件（三）使用CardView实现卡片效果...
本文主要介绍CardView的使用,CardView是继承自FrameLayout,使用比较简单,只需要用CardView包含其他View就可以实现卡片效果了. 实现效果如下: 加入依赖库 depen ...
Android横向滚动卡片,Android实现横向滑动卡片效果
Android实现横向滑动卡片效果发布时间:2020-09-04 22:51:17 来源:脚本之家阅读:255 作者:itbobby 最近项目上需要实现这样效果的一个页面,本来想找个现成的两下搞定 ...
[100天挑战100个前端效果]第十九天---人物介绍卡片效果(猜猜是哪三个大佬？)
人物介绍卡片效果让我们先来看看实现的效果 html代码 css代码今日份知识总结让我们先来看看实现的效果 html代码 <!DOCTYPE html> <html lang=& ...
HTML+CSS制作人物介绍卡片效果
HTML+CSS制作人物介绍卡片效果效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="zh-Hans">&l ...
简单玩转ViewPager+Fragment动画效果，实现京东淘宝物流卡片效果 (附源码)
物流卡片Demo 新版的京东和淘宝有一个交互感觉不错, 待收货订单会有类似探探那样的卡片效果, 滑动查看下一条物流的信息, 近期UI部门说要做这个效果, 于是我就写了一个Demo, 现在分享出来和大家 ...
SwiftUI 视图切换之自定义modal控制Card卡片效果
本文价值与收获看完本文后,您将能够作出下面的界面 Jietu20200507-092122@2x.jpg Jietu20200507-092136.gif 看完本文您将掌握的技能掌握ZStack使 ...
C# dev控件色卡说明颜色卡片实现，运用TextEdit控件实现颜色卡片效果
运用TextEdit控件实现颜色卡片效果: 1.右键设置TextEdit属性Image and Text 2.属性CanOpenEdit 设置true 属性Caption 为文字说明属性Captio ...
【Shader\j简单\Unity】Flowmap与光栅立体卡片效果
Flowmap与光栅立体卡片效果前言 FlowMap 代码前言实际上是尝试复原ta101第五课的一个小demo,目前还没有开课,我也穷,既然大纲给出来了,如果有时间摸鱼那么就可以慢慢磨,前面一大 ...
uni-app实现一个循环卡片效果
ColorUI-UniApp是一款适应于H5.微信小程序.安卓.ios.支付宝的高颜值,高度自定义的Css组件库,项目里好多地方都用的到这个UI组件今天记录一个ColorUI-UniApp的使用和实 ...

ViewPage 实现卡片效果

ViewPage 实现卡片效果相关推荐

最新文章

热门文章