Android之自定View－最简单的可拖拽式层叠卡片

最新推荐文章于 2024-05-16 16:04:37 发布
最新推荐文章于 2024-05-16 16:04:37 发布
阅读量3.2w 收藏 25
点赞数 8
分类专栏： ［ Android自定义控件 ］ Android开发笔记 文章标签： android 控件 卡片 卡片层叠 动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hai_qing_xu_kong/article/details/72935315
版权

转载请标明出处:
http://blog.csdn.net/hai_qing_xu_kong/article/details/72935315
本文出自：【顾林海的博客】

前言

记得两年多前在同程旅游的时候，第一个周边游的项目要求做一款卡片类，可左右拖拽，当初实现的比较粗糙，而且实现方式也相对复杂，今天有空翻看之前写的卡片控件，突然有了更好的实现思路，下面看看实现后的效果：

这里写图片描述


使用说明

下面有github地址，下载下来后，把相关源码拷贝到自己的项目中接着在自己的layout文件中放入CardGroupView控件：

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

    <com.glh.cardview.card.CardGroupView
        android:id="@+id/card"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

CardGroupView控件提供了以下方法：

	/**
     * 移除顶部卡片(无动画)
     */
    public void removeTopCard()

	 /**
     * 移除顶部卡片（有动画）
     *
     * @param left 向左吗
     */
    public void removeTopCard(boolean left)
    
	/**
     * 当剩余卡片等于size时，加载更多
     */
	public void setloadSize(int size)

	/**
     * 加载更多监听
     *
     * @param listener {@link LoadMore}
     */
    public void setLoadMoreListener(LoadMore listener)

	 /**
     * 左右滑动监听
     *
     * @param listener {@link LeftOrRight}
     */
    public void setLeftOrRightListener(LeftOrRight listener)

在Activity中设置CardGroupView并添加卡片：

package com.glh.cardview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Toast;

import com.glh.cardview.card.CardGroupView;

public class MainActivity extends AppCompatActivity {

    private CardGroupView mCardGroupView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initEvent();
        addCard();
    }


    private void initView() {
        mCardGroupView = (CardGroupView) findViewById(R.id.card);
        mCardGroupView.setloadSize(3);
    }

    private void initEvent() {
        mCardGroupView.setLoadMoreListener(new CardGroupView.LoadMore() {
            @Override
            public void load() {
                mCardGroupView.addView(getCard());
                mCardGroupView.addView(getCard());
                mCardGroupView.addView(getCard());
                mCardGroupView.addView(getCard());
                mCardGroupView.addView(getCard());

            }
        });
        mCardGroupView.setLeftOrRightListener(new CardGroupView.LeftOrRight() {
            @Override
            public void leftOrRight(boolean left) {
                if (left) {
                    Toast.makeText(MainActivity.this, "向左滑喜欢！", Toast.LENGTH_SHORT).show();
                } else {
                    Toast.makeText(MainActivity.this, "向右滑不喜欢！", Toast.LENGTH_SHORT).show();
                }
            }
        });
    }

    private void addCard() {
        mCardGroupView.addView(getCard());
        mCardGroupView.addView(getCard());
        mCardGroupView.addView(getCard());
        mCardGroupView.addView(getCard());
        mCardGroupView.addView(getCard());

    }

    private View getCard() {
        View card = LayoutInflater.from(this).inflate(R.layout.layout_card, null);
        View view = card.findViewById(R.id.remove);
        view.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mCardGroupView.removeTopCard(true);
            }
        });
        return card;
    }
}

实现原理

大家在实现自定义View时，千万不要想一口吃成胖子，一步一步的实现是最稳妥的，上面卡片显示的时候可以看出是层叠样式的，那怎样才能让卡片层叠呢？这里我想到的方式是：

1、用RelativeLayout作为卡片的容器，为什么呢？因为在RelativeLayout中，我们将所有的卡片居中对齐，这时所有卡片会以下列方式展示：

这里写图片描述

2、我们发现上图中的卡片全部层叠在一起了，但我们的效果图中底部是有层叠样式的，因此我们在将卡片添加到RelativeLayout时，设置它距离底部的位置：

这里写图片描述

代码实现：

 @Override
    public void addView(View card) {
		this.mCardList.add(card);
        LayoutParams layoutParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
			        layoutParams.addRule(RelativeLayout.CENTER_VERTICAL);
        this.addView(card, 0, layoutParams);
        card.setOnTouchListener(onTouchListener);
        this.setLayoutParams(card, mCardList.size());
    }

/**
     * 设置卡片LayoutParams
     *
     * @param card 卡片
     */
    private void setLayoutParams(View card, int index) {
        LayoutParams params = new LayoutParams(card.getLayoutParams());
        params.topMargin = (int) (DensityUtil.getDisplayMetrics(mContext).heightPixels * 0.1) + getResources().getDimensionPixelSize(
                R.dimen.card_item_margin) * index;
        params.bottomMargin = (int) (DensityUtil.getDisplayMetrics(mContext).heightPixels * 0.1) - getResources().getDimensionPixelSize(
                R.dimen.card_item_margin) * index;
        params.leftMargin = (int) (DensityUtil.getDisplayMetrics(mContext).widthPixels * 0.1);
        params.rightMargin = (int) (DensityUtil.getDisplayMetrics(mContext).widthPixels * 0.1);
        card.setLayoutParams(params);
    }

代码一目了然，就是往RelativeLayout中不停的添加View，并设置每个添加进来的View的LayoutParams属性。

卡片的层叠我们已经实现了，剩下的就是拖拽了，View的拖拽其实就是对View触摸事件做出响应的操作，这里需要借助OnTouchListener，并给每个View设置touch事件：

	private int mLastY = 0;
    private int mLastX = 0;
    private int mCardLeft;
    private int mCardTop;
    private int mCardRight;
    private int mCardBottom;
    private boolean mLeftOut = false;
    private boolean mRightOut = false;
    private boolean mOnTouch = true;

    OnTouchListener onTouchListener = new OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            if (mOnTouch) {
                int rawY = (int) event.getRawY();
                int rawX = (int) event.getRawX();
                switch (event.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                        getLayout();
                        mLastY = (int) event.getRawY();
                        mLastX = (int) event.getRawX();
                        break;
                    case MotionEvent.ACTION_MOVE:
                        int offsetY = rawY - mLastY;
                        int offsetX = rawX - mLastX;
                        mCardList.get(0).layout(mCardList.get(0).getLeft() + offsetX, mCardList.get(0).getTop() + offsetY, mCardList.get(0).getRight() + offsetX, mCardList.get(0).getBottom() + offsetY);
                        mRightOut = mCardList.get(0).getLeft() > DensityUtil.getDisplayMetrics(mContext).widthPixels / 2;
                        mLeftOut = mCardList.get(0).getRight() < DensityUtil.getDisplayMetrics(mContext).widthPixels / 2;
                        mLastY = rawY;
                        mLastX = rawX;
                        break;
                    case MotionEvent.ACTION_UP:
                        change();
                        break;
                }
            }
            return true;
        }
    };

View的拖拽是通过layout方法来实现的，那么如何判别View 是向左滑动还是向右滑动，上面有定义了两个属性mRightOut和mLeftOut，mRightOut表示当卡片左边线距离屏幕左边缘的距离超出屏幕一半时认为卡片向右滑出；mLeftOut表示当卡片右边线距离屏幕右边缘的距离小于屏幕一半时认为卡片向左滑出。

滑出的动作交由change()这个方法来实现：

private void change() {
        if (mLeftOut) {
           /*
            往左边滑出
             */
            out(true);
        } else if (mRightOut) {
             /*
            往右边滑出
             */
            out(false);

        } else {
            //复位
            reset();
        }
    }

当mRightOut和mLeftOut都为false时，说明滑动时卡片并没有超出屏幕一半，这时手指离开屏幕时，就应该复位，我们看相关方法：

	 /**
     * 卡片复位
     */
    private void reset() {
        CardIndex oldCardIndex = new CardIndex(mCardLeft, mCardTop, mCardRight, mCardBottom);
        CardIndex newCardIndex = new CardIndex(mCardList.get(0).getLeft(), mCardList.get(0).getTop(), mCardList.get(0).getRight(), mCardList.get(0).getBottom());
        animator(newCardIndex, oldCardIndex);
    }

oldCardIndex是卡片原有位置，newCardIndex是卡片移动后当位置，如果直接通过layout方法来实现复位，会发现卡片复位动作是瞬间就完成的，从视觉效果上来看，感觉比较生硬，因此我们要用到android属性动画中的ValueAnimator.ofObject静态方法，并实现一个TypeEvaluator接口的类：

    class CardIndex {
        int left;
        int top;
        int right;
        int bottom;

        CardIndex(int left, int top, int right, int bottom) {
            this.left = left;
            this.top = top;
            this.right = right;
            this.bottom = bottom;
        }

        int getLeft() {
            return left;
        }

        int getTop() {
            return top;
        }

        int getRight() {
            return right;
        }

        int getBottom() {
            return bottom;
        }
    }

    class PointEvaluator implements TypeEvaluator {

        @Override
        public Object evaluate(float fraction, Object startValue, Object endValue) {
            CardIndex startPoint = (CardIndex) startValue;
            CardIndex endPoint = (CardIndex) endValue;
            int left = (int) (startPoint.getLeft() + fraction * (endPoint.getLeft() - startPoint.getLeft()));
            int top = (int) (startPoint.getTop() + fraction * (endPoint.getTop() - startPoint.getTop()));
            int right = (int) (startPoint.getRight() + fraction * (endPoint.getRight() - startPoint.getRight()));
            int bottom = (int) (startPoint.getBottom() + fraction * (endPoint.getBottom() - startPoint.getBottom()));
            return new CardIndex(left, top, right, bottom);
        }

    }

实现TypeEvaluator接口，然后重写evaluate()方法。evaluate()方法当中传入了三个参数，第一个参数fraction，这个参数用于表示动画的完成度的，我们应该根据它来计算当前动画的值应该是多少，第二第三个参数分别表示动画的初始值和结束值。利用startValue+fraction*(endValue-startValue)公式得到我们的动画值。CardIndex用于保存卡片layout值。


 private void animator(CardIndex newCard, CardIndex oldCard) {

        ValueAnimator animator = ValueAnimator.ofObject(new PointEvaluator(), newCard, oldCard);
        animator.setDuration(200);
        animator.setInterpolator(new AccelerateDecelerateInterpolator());
        animator
                .addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        CardIndex value = (CardIndex) animation.getAnimatedValue();
                        mCardList.get(0).layout(value.left, value.top, value.right, value.bottom);
                    }
                });
        animator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                if (mRightOut || mLeftOut) {
                    removeTopCard();
                    if (mLeftOrRight != null) {
                        mLeftOrRight.leftOrRight(mLeftOut);
                    }
                }
                mOnTouch = true;
            }
        });
        animator.start();
    }

看完了复位操作，我们再来看看滑出操作： 
    /**
     * 卡片滑出
     *
     * @param left 是否向左滑出
     */
    private void out(boolean left) {
        CardIndex oldCardIndex;
        CardIndex newCardIndex;
        if (left) {
            /*
            向左滑出
             */
            oldCardIndex = new CardIndex(-mCardRight, mCardTop, 0, mCardBottom);
            newCardIndex = new CardIndex(mCardList.get(0).getLeft(), mCardList.get(0).getTop(), mCardList.get(0).getRight(), mCardList.get(0).getBottom());
        } else {
            /*
            向右滑出
             */
            oldCardIndex = new CardIndex(DensityUtil.getDisplayMetrics(mContext).widthPixels, mCardTop, DensityUtil.getDisplayMetrics(mContext).widthPixels + (mCardRight - mCardLeft), mCardBottom);
            newCardIndex = new CardIndex(mCardList.get(0).getLeft(), mCardList.get(0).getTop(), mCardList.get(0).getRight(), mCardList.get(0).getBottom());
        }

        animator(newCardIndex, oldCardIndex);
    }

和上面复位的操作类似，只是上面的代码实现了通过动画将卡片滑出屏幕。




具体的实现原理差不多就这些，下面贴出完整源码：

package com.glh.cardview.card;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.TypeEvaluator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.widget.RelativeLayout;

import com.glh.cardview.R;
import com.glh.cardview.util.DensityUtil;
import com.glh.cardview.util.ListUtil;

import java.util.ArrayList;

/**
 * 卡片容器
 * Created by glh on 2017-06-08.
 */
public class CardGroupView extends RelativeLayout {

    private Context mContext;

    //指定剩余卡片还剩下多少时加载更多
    private int mLoadSize = 2;
    //是否执行加载更多，加载更多时，卡片依次添加在后面的；而添加卡片时，卡片是依次添加在上面
    private boolean isLoadMore = false;
    //保存当前容器中的卡片
    private ArrayList<View> mCardList = new ArrayList<>();
    //加载更多监听器
    private LoadMore mLoadMore;
    //左右滑动监听器
    private LeftOrRight mLeftOrRight;

    public CardGroupView(Context context) {
        this(context, null);
    }

    public CardGroupView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CardGroupView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.mContext = context;

    }

    @Override
    public void addView(View card) {
        if (isLoadMore) {
            this.mCardList.add(ListUtil.getSize(mCardList), card);
        } else {
            this.mCardList.add(card);
        }
        LayoutParams layoutParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        layoutParams.addRule(RelativeLayout.CENTER_VERTICAL);
        this.addView(card, 0, layoutParams);
        card.setOnTouchListener(onTouchListener);
        if (!isLoadMore) {
            this.setLayoutParams(card, mCardList.size());
        }

    }

    /**
     * 设置卡片LayoutParams
     *
     * @param card 卡片
     */
    private void setLayoutParams(View card, int index) {
        LayoutParams params = new LayoutParams(card.getLayoutParams());
        params.topMargin = (int) (DensityUtil.getDisplayMetrics(mContext).heightPixels * 0.1) + getResources().getDimensionPixelSize(
                R.dimen.card_item_margin) * index;
        params.bottomMargin = (int) (DensityUtil.getDisplayMetrics(mContext).heightPixels * 0.1) - getResources().getDimensionPixelSize(
                R.dimen.card_item_margin) * index;
        params.leftMargin = (int) (DensityUtil.getDisplayMetrics(mContext).widthPixels * 0.1);
        params.rightMargin = (int) (DensityUtil.getDisplayMetrics(mContext).widthPixels * 0.1);
        card.setLayoutParams(params);
    }

    /**
     * 每次移除时需要重置剩余卡片的位置
     */
    private void resetLayoutParams() {
        for (int i = 0; i < mCardList.size(); i++) {
            setLayoutParams(mCardList.get(i), i);
        }
    }

    private int mLastY = 0;
    private int mLastX = 0;
    private int mCardLeft;
    private int mCardTop;
    private int mCardRight;
    private int mCardBottom;
    private boolean mLeftOut = false;
    private boolean mRightOut = false;
    private boolean mOnTouch = true;

    OnTouchListener onTouchListener = new OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            if (mOnTouch) {
                int rawY = (int) event.getRawY();
                int rawX = (int) event.getRawX();
                switch (event.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                        getLayout();
                        mLastY = (int) event.getRawY();
                        mLastX = (int) event.getRawX();
                        break;
                    case MotionEvent.ACTION_MOVE:
                        int offsetY = rawY - mLastY;
                        int offsetX = rawX - mLastX;
                        mCardList.get(0).layout(mCardList.get(0).getLeft() + offsetX, mCardList.get(0).getTop() + offsetY, mCardList.get(0).getRight() + offsetX, mCardList.get(0).getBottom() + offsetY);
                        mRightOut = mCardList.get(0).getLeft() > DensityUtil.getDisplayMetrics(mContext).widthPixels / 2;
                        mLeftOut = mCardList.get(0).getRight() < DensityUtil.getDisplayMetrics(mContext).widthPixels / 2;
                        mLastY = rawY;
                        mLastX = rawX;
                        break;
                    case MotionEvent.ACTION_UP:
                        change();
                        break;
                }
            }
            return true;
        }
    };

    private void getLayout() {
        mCardLeft = mCardList.get(0).getLeft();
        mCardTop = mCardList.get(0).getTop();
        mCardRight = mCardList.get(0).getRight();
        mCardBottom = mCardList.get(0).getBottom();
    }

    private void change() {
        if (mLeftOut) {
           /*
            往左边滑出
             */
            out(true);
        } else if (mRightOut) {
             /*
            往右边滑出
             */
            out(false);

        } else {
            //复位
            reset();
        }
    }

    class CardIndex {
        int left;
        int top;
        int right;
        int bottom;

        CardIndex(int left, int top, int right, int bottom) {
            this.left = left;
            this.top = top;
            this.right = right;
            this.bottom = bottom;
        }

        int getLeft() {
            return left;
        }

        int getTop() {
            return top;
        }

        int getRight() {
            return right;
        }

        int getBottom() {
            return bottom;
        }
    }

    class PointEvaluator implements TypeEvaluator {

        @Override
        public Object evaluate(float fraction, Object startValue, Object endValue) {
            CardIndex startPoint = (CardIndex) startValue;
            CardIndex endPoint = (CardIndex) endValue;
            int left = (int) (startPoint.getLeft() + fraction * (endPoint.getLeft() - startPoint.getLeft()));
            int top = (int) (startPoint.getTop() + fraction * (endPoint.getTop() - startPoint.getTop()));
            int right = (int) (startPoint.getRight() + fraction * (endPoint.getRight() - startPoint.getRight()));
            int bottom = (int) (startPoint.getBottom() + fraction * (endPoint.getBottom() - startPoint.getBottom()));
            return new CardIndex(left, top, right, bottom);
        }

    }

    /**
     * 卡片复位
     */
    private void reset() {
        CardIndex oldCardIndex = new CardIndex(mCardLeft, mCardTop, mCardRight, mCardBottom);
        CardIndex newCardIndex = new CardIndex(mCardList.get(0).getLeft(), mCardList.get(0).getTop(), mCardList.get(0).getRight(), mCardList.get(0).getBottom());
        animator(newCardIndex, oldCardIndex);
    }

    /**
     * 卡片滑出
     *
     * @param left 是否向左滑出
     */
    private void out(boolean left) {
        CardIndex oldCardIndex;
        CardIndex newCardIndex;
        if (left) {
            /*
            向左滑出
             */
            oldCardIndex = new CardIndex(-mCardRight, mCardTop, 0, mCardBottom);
            newCardIndex = new CardIndex(mCardList.get(0).getLeft(), mCardList.get(0).getTop(), mCardList.get(0).getRight(), mCardList.get(0).getBottom());
        } else {
            /*
            向右滑出
             */
            oldCardIndex = new CardIndex(DensityUtil.getDisplayMetrics(mContext).widthPixels, mCardTop, DensityUtil.getDisplayMetrics(mContext).widthPixels + (mCardRight - mCardLeft), mCardBottom);
            newCardIndex = new CardIndex(mCardList.get(0).getLeft(), mCardList.get(0).getTop(), mCardList.get(0).getRight(), mCardList.get(0).getBottom());
        }

        animator(newCardIndex, oldCardIndex);
    }

    private void animator(CardIndex newCard, CardIndex oldCard) {

        ValueAnimator animator = ValueAnimator.ofObject(new PointEvaluator(), newCard, oldCard);
        animator.setDuration(200);
        animator.setInterpolator(new AccelerateDecelerateInterpolator());
        animator
                .addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        mOnTouch = false;
                        CardIndex value = (CardIndex) animation.getAnimatedValue();
                        mCardList.get(0).layout(value.left, value.top, value.right, value.bottom);
                    }
                });
        animator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                if (mRightOut || mLeftOut) {
                    removeTopCard();
                    if (mLeftOrRight != null) {
                        mLeftOrRight.leftOrRight(mLeftOut);
                    }
                }
                mOnTouch = true;
            }
        });
        animator.start();
    }


    /**
     * 移除顶部卡片(无动画)
     */
    public void removeTopCard() {
        if (!ListUtil.isEmpty(this.mCardList)) {
            removeView(this.mCardList.remove(0));
            if (mCardList.size() == mLoadSize) {
                if (mLoadMore != null) {
                    this.isLoadMore = true;
                    this.mLoadMore.load();
                    this.isLoadMore = false;
                    this.resetLayoutParams();
                }
            }

        }
    }

    /**
     * 移除顶部卡片（有动画）
     *
     * @param left 向左吗
     */
    public void removeTopCard(boolean left) {
        if (this.mOnTouch) {
            this.mLeftOut = left;
            this.mRightOut = !this.mLeftOut;
            this.getLayout();
            this.out(left);
        }
    }

    /**
     * 当剩余卡片等于size时，加载更多
     */
    public void setloadSize(int size) {
        this.mLoadSize = size;
    }

    /**
     * 加载更多监听
     *
     * @param listener {@link LoadMore}
     */
    public void setLoadMoreListener(LoadMore listener) {
        this.mLoadMore = listener;
    }

    /**
     * 左右滑动监听
     *
     * @param listener {@link LeftOrRight}
     */
    public void setLeftOrRightListener(LeftOrRight listener) {
        this.mLeftOrRight = listener;
    }

    public interface LoadMore {
        void load();
    }

    public interface LeftOrRight {
        void leftOrRight(boolean left);
    }

}

下载地址


以下是完整的github项目地址，欢迎多多star和fork。
github项目源码地址：点击【项目源码】

IT界的吉祥物
关注
  • 8
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
Android代码-Android 层叠卡片控件，仿"探探app"
08-06
效果图 功能 自定义卡片的堆叠效果 自定义卡片移除动画 支持加载更多 使用方式 gradle dependency // 1. Add it in your root build.gradle at the end of repositories: allprojects { repositories { ... maven { url 'https://jitpack.io' } } } // 2. Add the dependency in your app/build.gradle dependencies { compile 'com.github.fashare2015:StackLayout:1.0.0' } xml布局 父布局使用clipChildren="false", 使之能全屏拖动 <RelativeLayout ... android:clipChildren="false"> <com.fashare.stack_layout.StackLayout android:
Android 可拖拽层叠式卡片列表——WeakView系列
大K的博客
04-27 4673
    什么是层叠式卡片列表，千言万语不如直接看下图：                               不知道为什么在真机上的效果跟制作的git图有差别，大家可以运行代码查看真机上的效果。对，层叠式卡片就是这样，可以向屏幕的任何方向拖动，当拖动的超过一定范围，松手后它会继续延续这个方向滑出屏幕 ，否则会恢复到原点位置。效果向任意方向拖动卡片，当拖动的卡片有一半超出父布局，松手后则按拖动...
Android RecyclerView实现卡片堆叠视图
最新发布
qq_41341864的博客
05-16 775
最近需求里面要实现一个卡片堆叠的视图，通过卡片上下移动来切换阅读的条目，github和csdn找了不少都不能完全符合需求，所以最后还是看着别人代码一步步学着怎么实现的需要完全实现主要是需要自定义以下几个类：LayoutManager 用于实现堆叠视图以及视图的滑动SnapHelper 用于帮助视图定位，可以让视图能够向前或者向后停留在刚好一页的位置。
android卡片层叠效果_Vue|Nuxt仿探探层叠卡片|vue卡牌滑动
weixin_39968309的博客
11-20 400
最近一直在捣鼓NuxtJs项目，有个需求是实现类似探探卡片切换效果。实现左滑unlike | 右滑like、点击按钮能左右切换及拖拽距离不足有回弹动画等功能。如上图：最终实现效果就是这样。哈哈，效果还行吧！下面就来简单讲解下实现过程，如果是感兴趣的话可以接着往下看下哈！整体布局卡片页面整体分为 顶部导航、卡片层叠区、底部标签栏 三个部分。<template> <d...
Android仿探探卡片拖拽,android-card-slide-panel
weixin_39589511的博客
05-30 414
有图有真相模仿探探首页的卡片滑动效果：不得不说，探探的 ui 效果真的很赞。在着手这个 project 之前，我没有参考过 github 上其它类似的开源项目。所以，如果这个 project 重复造了轮子，请不要打我。在这个仓库竣工之时，有一个小伙伴发了我另一个开源工程，颇有相似之处。我下载了源码，导入了 studio，apk 跑起来的时候，发现它存在一些问题：卡片飞到两侧，如果动画没有结束，则不...
android卡片层叠效果_3个超秀的 Vue 卡片翻动组件Vue-Card-Slide
weixin_39772652的博客
11-20 982
今天给大家分享3个超丝滑Vue卡片左右、上下滑动层叠组件VueCardSlide。1、vue-tantan-stack一款基于 vue.js 制作的仿探探效果滑动组件。支持左右拖动或点击按钮切换效果。功能分析堆叠滑动的功能很简单，用一张图概括就是堆叠效果堆叠图片效果在网上有大量的实例，实现的方法大同小异，主要通过在父层设定 perspective 及 perspective-origin，来实现子...
Android-各种方向的ViewPager层叠卡片
08-12
在标题“Android-各种方向的ViewPager层叠卡片”中，提到的层叠卡片效果是`ViewPager`的一种独特视觉表现，它可以为用户提供更丰富的交互体验。`CardView` 是Android设计支持库中的一个组件，用于创建具有圆角、阴影...
Android 卡片层叠式可动态切换布局-IT计算机-毕业设计.zip
04-05
在Android开发领域，卡片层叠式可动态切换布局是一种常见的用户界面设计模式，它能够提供丰富的视觉效果和交互体验。这种布局方式常用于展示信息集合，例如新闻、图片或者产品列表，用户可以通过滑动或者点击来切换...
Android实现3D层叠式卡片图片展示
08-25
现Android的3D层叠式卡片图片展示，我们需要掌握以下几个关键知识点： 1. 自定义ViewGroup：在Android中，为了实现复杂布局或特殊效果，通常需要自定义ViewGroup。在这个案例中，我们创建了一个自定义的面板，它...
Android 自定义可拖拽View界面渲染刷新后不会自动回到起始位置
08-31
在Android开发中，自定义可拖拽View是一个常见的需求，比如创建浮动操作按钮、可移动的图片视图等。在本文中，我们将深入探讨如何实现一个可拖拽的ImageView，并解决在界面渲染刷新后，该View不会自动回到起始位置的...
Android-CardStackView-实现类似Tinder的Android滑动式卡片视图
08-12
通过以上步骤，你就可以在你的Android应用中实现类似Tinder的滑动式卡片视图了。`CardStackView`库提供了一个简单且灵活的框架，可以轻松地定制卡片样式和交互行为，从而为用户带来独特的体验。记得定期更新库版本，...
Android控件: 仿探探首页 相册侧滑层叠加载
lidec的专栏
02-19 6159
探探首页样式 探探，百合网等神器的首页有一个相册加载个控件，通过左滑右滑加载新的照片，同时左滑丢弃这个照片，右滑则表明对这个照片感兴趣。
android堆叠效果相册_毕业相册视频制作教程
weixin_31725659的博客
01-07 482
大学四年，手机内存占位最多的就是照片，今天小喵就教大家结合喵影的帧定格功能制作青春回忆录，先看一下效果。知乎视频​www.zhihu.com下方是文字教程，视频教程在文末，小伙伴根据习惯自己选读。1、导入素材首先需要将要回忆的素材片段导入到万兴喵影。喵影自带了许多关于回忆相册的预设效果可供大家自由选择，如【回忆相册】特效包。2、选预设效果选择带相框的预设效果，选中并拖拽到视频轨道上，在这个相框下层...
android 实现2张图片层叠效果
weixin_34032827的博客
07-01 513
如图：   代码： &lt;RelativeLayout android:layout_width="match_parent" android:layout_height="130dp" android:orientation="vertical" &gt; ...
Android自定义view--图形叠加Xfermode与PorterDuff
王温暖的博客
04-29 1916
首先来看下各个场景的效果，项目完整代码：https://github.com/buder-cp/CustomView/tree/master/buder_DN_view/buderdn04 上述效果的实现主要是使用图形的fermode与PorterDuff属性的叠加，下面是18中图形叠加模式 运行效果图： 1）PorterDuff.Mode.ADD： 饱和度叠加 2）Porte...
android堆叠效果相册_Android自定义ViewGroup实现堆叠头像的点赞Layout
weixin_42356073的博客
12-23 133
简介这样的点赞列表怎么样？之前做社区的时候也有类似的点赞列表，但是没有这样重叠，一个小小的改变，个人感觉逼格提高不少。这个很有规则，就是后一个头像会覆盖一部分到前一个头像上，头像多了就像一串糖葫芦了。这个实现起来不难，自定义ViewGroup，关键重写onLayout方法。实现自定义属性属性名说明默认值vertivalSpace行距4dppileWidth重叠宽度10dponMeasure方法,每...
android堆叠效果相册_Android 堆叠式布局实现（一）简单堆叠式布局
weixin_42484898的博客
12-23 811
写在前面的几句话堆叠式布局，顾明思议，堆在一起的布局，我百度了一下好像还真没有太多关于这个方面的讲解，刚好最近学习的时候有看到这个方面的知识，那就把学习相关的东西记录下来，方便别人的学习，也对自己后面知识的巩固和温习有帮助。首先给大家看看使用到堆叠式布应用的场景，图1 大街App堆叠式布应用场景图2 易信App堆叠式布应用场景图3 某个Gif设计图实现效果看完以后大家是不是还是觉得蛮酷炫的，有的其...
android堆叠效果相册_android 图片叠加效果——两种方法
weixin_39917437的博客
01-13 1160
效果图：第一种：第二种：第一种是通过canvas画出来的效果:public void first(View v) {// 防止出现Immutable bitmap passed to Canvas constructor错误Bitmap bitmap1 = BitmapFactory.decodeResource(getResources(),R.drawable.apple).copy(Bitm...
Android 自定View 分段式进度条
07-14
您好！对于自定义分段式进度条，您可以按照以下步骤进行操作： 1. 创建一个自定义的View类，继承自View或者ProgressBar类。假设这个类叫做SegmentedProgressBar。 2. 在SegmentedProgressBar类中，定义一个用于存储分段信息的数据结构，比如使用一个List来保存每个分段的进度。 3. 添加一个方法来设置分段信息，比如setSegments(List<Float> segmentList)，其中segmentList是一个包含每个分段进度的列表。 4. 在SegmentedProgressBar的onDraw方法中，根据分段信息绘制进度条。可以使用Canvas和Paint类来实现绘制。 5. 在onMeasure方法中，根据实际需要设置View的大小。 6. 实现一些其他的方法，比如更新进度、获取分段信息等。 7. 在布局文件中使用自定义的SegmentedProgressBar，并设置相应的属性和样式。 通过以上步骤，您就可以创建一个自定义的分段式进度条了。您可以根据实际需求对SegmentedProgressBar进行扩展和优化，比如添加动画效果、改变颜色等。希望对您有所帮助！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值