bakerjq / android-infinitecards

An infinite card switching UI for Android, support custom animation 自定义实现神奇动效的卡片切换视图

InfiniteCards

An infinite card switching UI for Android, support custom animation
可自定义动效的卡片切换视图（中文文档）

Flutter version

https://github.com/BakerJQ/Flutter-InfiniteCards

Screenshot

Gradle via JitPack

Add it in your root build.gradle at the end of repositories:

allprojects {
	repositories {
		...
		maven { url 'https://jitpack.io' }
	}
}

Add the dependency

dependencies {
    implementation 'com.github.BakerJQ:Android-InfiniteCards:1.0.5'
}

Attrs

• animType : animation type
  • front : move the selected card to first
  • switchPosition : move the selected card to first, and the first card to the selected position
  • frontToLast : move the first card to last position
• cardRatio : ratio of the card
• animDuration : duration of each card's animation
• animAddRemoveDelay : delay of animation of add and remove between each card
• animAddRemoveDuration : duration of add and remove each card's animation

How to use

layout in xml

<com.bakerj.infinitecards.InfiniteCardView
        android:id="@+id/view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        infiniteCard:animDuration="1000"
        infiniteCard:cardRatio="1"/>

Set Adapter

Just extends the BaseAdapter

class MyAdapter extends BaseAdapter{
  ...
}
mAdapter = new MyAdapter(resId);
mCardView.setAdapter(mAdapter);

Animation transformers and interpolators

Default

If you just use all default animations, just do nothing.

mCardView.setAnimInterpolator(new LinearInterpolator());
mCardView.setTransformerToFront(new DefaultTransformerToFront());
mCardView.setTransformerToBack(new DefaultTransformerToBack());
mCardView.setZIndexTransformerToBack(new DefaultZIndexTransformerCommon());

Customisation

mCardView.setTransformerToBack(new AnimationTransformer() {
    @Override
    public void transformAnimation(View view, float fraction, int cardWidth, int cardHeight, int fromPosition, int toPosition) {
        int positionCount = fromPosition - toPosition;
        float scale = (0.8f - 0.1f * fromPosition) + (0.1f * fraction * positionCount);
        ViewHelper.setScaleX(view, scale);
        ViewHelper.setScaleY(view, scale);
        if (fraction < 0.5) {
            ViewCompat.setRotationX(view, 180 * fraction);
        } else {
            ViewCompat.setRotationX(view, 180 * (1 - fraction));
        }
    }

    @Override
    public void transformInterpolatedAnimation(View view, float fraction, int cardWidth, int cardHeight, int fromPosition, int toPosition) {
        int positionCount = fromPosition - toPosition;
        float scale = (0.8f - 0.1f * fromPosition) + (0.1f * fraction * positionCount);
        ViewHelper.setTranslationY(view, -cardHeight * (0.8f - scale) * 0.5f - cardWidth * (0.02f *
                fromPosition - 0.02f * fraction * positionCount));
    }
});
mCardView.setZIndexTransformerToBack(new ZIndexTransformer() {
    @Override
    public void transformAnimation(CardItem card, float fraction, int cardWidth, int cardHeight, int fromPosition, int toPosition) {
        if (fraction < 0.4f) {
            card.zIndex = 1f + 0.01f * fromPosition;
        } else {
            card.zIndex = 1f + 0.01f * toPosition;
        }
    }

    @Override
    public void transformInterpolatedAnimation(CardItem card, float fraction, int cardWidth, int cardHeight, int fromPosition, int toPosition) {

    }
});

License

InfiniteCards is released under the Apache 2.0 license.

Copyright 2017 BakerJ.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at following link.

     http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

android-infinitecards's Issues

关于动画效果

您好，我看了demo，发现了一个问题。就是我先用某个动画效果（setStyle1）完成动作后，紧接着设置另一个动画效果（setStyle2）。后面如果做动作的话，效果还是style1的。请问这是为什么？

Remove a card from stack

How to remove a card from stack? Is there any method for that?
Also can we get the current card-item/card-view in the CardAnimationListener

How to change the size of each card?

only show one card to view

How can I only show one card to view,, and the others hidden?

Show selected items from list on the view

I have two items in my adapter, let's assume that there are two credit cards there on the view, one of them is activated and one is not, so I want the activated one to show on the front and the inactive to go in the back.
.

这个可以左右滑动么？

这个可以左右滑动么？

Is it possible for the cards to be angled by default?

Apologies that this isn't an issue, but maybe you can advise how this can be done.

Do you think it's possible to have the cards angled slightly by default, as they appear in this example:

https://uimovement.com/ui/3782/credit-card/

Thanks for looking.

java.lang.NullPointerException:

Attempt to invoke virtual method 'int android.widget.BaseAdapter.getCount()' on a null object reference

private void firstSetAdapter(BaseAdapter adapter) {
if (mTransformerAnimAdd != null) {
mIsAddRemoveAnim = true;
}
mCards = new LinkedList<>();
// mCards4JudgeZIndex = new ArrayList<>();
mCardCount = adapter.getCount(); (issue)

It's leading me to your firstSetAdapter. Tried many times other infinite views are working properly but after many attempts, your code is crashing on CardAnimationHelper class line 463.

如果要循环滚动，怎么是性能消耗最低

现在是在外部开一个定时器，循环
mCardView.bringCardToFront(1);
调用这个方法，然后查看时，特别消耗性能

Does it support manual sliding

Does it support manual sliding？

Multiple card switches with 1 click?

Hi, I'm trying to implement a card stack using this library in which 1 button click can cause multiple card switches (i.e. multiple BringToFront actions)? But it seems like every time I clicked the button it only does 1 card switch. I'm wondering if the feature above is possible using this library? Any help would be appreciated!

Front to back animation

Hi. I would like the front-to-back animation to work exactly like the back-to-front animation. Meaning, the card at the front goes up, and over the top, to the back, with the rest of the stack moving forward (rather than swinging out to the side, as in your example).

I've played around with lots of options, but can't make this happen. Can you help please?

请问可以固定显示的个数吗？

您好，很喜欢你写的这个效果，但是有个小问题请教下：
目前是有多少图片就会显示多少个图片的堆叠效果，能不能固定只显示3个呢，或者能提供下思路吗，谢谢！

how to reverse the layout

how can i reverse the layout , i want put the outside card board in bottom .
in chinese ,我想把那些突出的卡片的边放到下面，应该怎么办？

动画效果问题

试了 设置 style 1 2 3 pre 和 next 切换动画都跟楼主gif上对不上
android 7.0 华为mate9 实测

Delay in swap animation due to late UI rendering.

Hi, I'm facing some issues with the swap animation. My adapter earlier was very long and inefficient so I had to put 1.5s delay so that the cards UI can render properly and then the swap animation took place. Now I have optimized the adapter to an extent where it can't be optimized more I guess and I see a much better performance boost. I have written all the necessary cases for the adapter in my model class and the adapter has just got to render the UI and nothing else, no complex conditions are present. But I'm still facing that issue even after such a fast operation, the swap animation doesn't work if I remove the delay or decrease it lesser than 1500ms. I'm using a Handler for this. Can you give me some insight into how can I lower the delay?. Thanks

View taking padding by default

I have implemented the view successfully and everything is working fine except that it takes additional padding and appears to be very small on high DPI devices.

Can I implement swipe action on the items.

My items have click listeners embedded in them, so I want the cards to change on swipe instead of a click action. Is the functionality available in the current version?

Can we add swipe action in cards?

I think it will be good if have swipe action in cards

How can i replace an element in an array keeping style?

Hi, I need to replace the already seen cards with new ones without seeing the discard animation.
Need replace, delete or add an element in the array "resId"

findViewById(R.id.next).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                if (mIsAdapter1) {

                    resId[1] = R.mipmap.pic10; // Replace item

                    mAdapter1.notifyDataSetChanged(); // here lost CardSizeRatio

                    //mCardView.setCardSizeRatio(1);  //It does not work fine
                    //setStyle2();  //It does not work fine
                    //mCardView.bringCardToFront(mAdapter1.getCount() - 1);

                }
                mCardView.bringCardToFront(1);
            }
        });

Thanks