ViewPage 实现卡片效果

最新推荐文章于 2023-05-30 10:01:47 发布

逐流间隔年

最新推荐文章于 2023-05-30 10:01:47 发布

阅读量908

点赞数

分类专栏：安卓笔记文章标签： android 卡片

本文链接：https://blog.csdn.net/senkai123/article/details/77945316

版权

安卓笔记专栏收录该内容

38 篇文章 0 订阅

订阅专栏

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

这里写图片描述

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

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

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;

    @Override
    protected 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;
        @Override
        public int getCount() {
            return imgBeens.size();
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;//固定写法
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);//固定写法

            //当前卡片消失就移除
            views.set(position,null);
        }

        @Override
        public 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() {
                @Override
                public void onClick(View v) {
                int position= (int) v.getTag();

                        viewPager.setCurrentItem(position);


                }
            });
            return view;
        }

        @Override
        public float getBaseElevation() {
            return  mBaseElevation;
        }

        @Override
        public 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);
    }


    @Override
    protected 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 one
        int 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 yet
        if (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

逐流间隔年

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ViewPage 实现卡片效果

在实际开发中我们可能需要实现卡片效果，一个页面显示一个卡片，左右各半个，这种的ui效果，如图：这种效果的实现也不难。如何实现一个页面上，显示一个卡片呢，左右各半个，我们就要用一个属性了 <com.test.scrolltransptoolbar.CardViewPage android:id="@+id/vp" android:layout_width="m
复制链接

扫一扫

专栏目录