广告位联系
返回顶部
分享到

android实现扑克卡片翻转的代码

Android 来源:互联网 作者:秩名 发布时间:2022-05-10 18:26:19 人浏览
摘要

首先,说一下布局,是FrameLayout,这个布局设置一点点击方法,要设置id,之后会用到。这个布局还包括两个子布局,分别是Poke的正面和反面布局。上代码: 还需额外注意一点:这是刚刚

首先,说一下布局,是FrameLayout,这个布局设置一点点击方法,要设置id,之后会用到。这个布局还包括两个子布局,分别是Poke的正面和反面布局。上代码:

还需额外注意一点:这是刚刚才发现的问题,在主activity中,正反面那个xml文件放在后面就会优先默认显示那个xml文件,所以,如果我需要一打开app就看到正面的话,那么正面xml文件需要放到反面xml文件的下面,就是

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:paddingBottom="@dimen/activity_vertical_margin"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    android:onClick="flipCard"

    android:id="@+id/main_fl_container"

    tools:context="com.example.chenxuanhe.poketest.MainActivity">

 

    <include layout="@layout/cell_card_back"

        />

    <include layout="@layout/cell_card_front"

        />

</FrameLayout>

根据代码的逻辑线走,则是接下来的两个layout:
这两个FrameLayout也是需要写id的,之后会用到。

cell_card_back.xml:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:id="@+id/main_fl_card_back"

    >

 

    <ImageView

        android:src="@drawable/rectangle_back"

        android:contentDescription="@null"

        android:padding="16dp"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        />

 

    <TextView

        android:textColor="@color/colorAccent"

        android:text="反面"

        android:textSize="40dp"

        android:layout_gravity="center"

        android:gravity="center"

        android:layout_width="match_parent"

        android:layout_height="match_parent" />

 

</FrameLayout>

cell_card_front.xml:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:id="@+id/main_fl_card_front">

 

    <ImageView

        android:src="@drawable/rectangle_front"

        android:padding="16dp"

        android:contentDescription="@null"

        android:layout_width="match_parent"

        android:layout_height="match_parent" />

 

    <TextView

        android:textSize="40dp"

        android:textColor="@color/colorPrimary"

        android:text="正面"

        android:gravity="center"

        android:layout_gravity="center"

        android:layout_width="match_parent"

        android:layout_height="match_parent" />

 

</FrameLayout>

继续顺着上面两个布局的逻辑线来走,就需要用到两个Drawable的文件作为背景图,所以接着看drawable文件:

rectangle_back.xml:

大概是一个黑边红底色带圆角的卡片界面

1

2

3

4

5

6

7

8

9

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="rectangle">

    <corners android:radius="16dp"/>

    <solid android:color="@color/cardBack"/>

    <stroke android:width="2dp"

        android:color="@android:color/black"/>

 

</shape>

rectangle_front.xml:

大概是一个黑边灰底色带圆角的卡片界面

1

2

3

4

5

6

7

8

9

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="rectangle">

    <corners android:radius="16dp"/>

    <solid android:color="@color/cardFront"/>

    <stroke android:width="2dp"

        android:color="@android:color/black"/>

 

</shape>

走完界面UI的逻辑线之后,就去看Java代码,发现需要两个Animator,于是在res文件下创建一个animator资源文件夹,在下创建两个动画文件:

anim-in.xml:

这是一个从左边进入的动画,一开始是隐藏的,逆向旋转,当旋转到一半时,显示卡片

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android">

 

    <!--消失-->

    <objectAnimator

        android:duration="0"

        android:propertyName="alpha"

        android:valueFrom="1.0"

        android:valueTo="0.0"/>

 

    <!--旋转-->

    <objectAnimator

        android:duration="3000"

        android:propertyName="rotationY"

        android:valueFrom="-180"

        android:valueTo="0"/>

 

    <!--出现-->

    <objectAnimator

        android:duration="0"

        android:propertyName="alpha"

        android:startOffset="1500"

        android:valueFrom="0.0"

        android:valueTo="1.0"/>

 

</set>

anim_out.xml:

这是一个右边出去的动画,旋转180度,旋转到一半时,卡片就消失了。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android">

 

    <objectAnimator

        android:duration="3000"

        android:propertyName="rotationY"

        android:valueFrom="0"

        android:valueTo="180"/>

 

    <!--消失-->

    <objectAnimator

        android:duration="0"

        android:propertyName="alpha"

        android:startOffset="1500"

        android:valueFrom="1.0"

        android:valueTo="0.0"/>

</set>

接着看Java代码:

MainActivity:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

public class MainActivity extends AppCompatActivity {

 

    @Bind(R.id.main_fl_card_back)

    FrameLayout mFlCardBack;

    @Bind(R.id.main_fl_card_front)

    FrameLayout mFlCardFront;

    @Bind(R.id.main_fl_container)

    FrameLayout mFlContainer;

    private AnimatorSet mLeftInSet;

    private AnimatorSet mRightOutSet;

 

    private boolean mIsShowBack;

 

 

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        ButterKnife.bind(this);

 

        setAnimation();//设置动画

        setCameraDistance();//设置镜头距离,在这里不是太懂

    }

 

    private void setAnimation() {

    //mLeftInSet是左边进入的动画

        mLeftInSet = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.anim_in);

   //mRightOutSet是右边出去的动画

        mRightOutSet = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.anim_out);

 

        //点击事件

        //通过ListenerAdapter就不需重写所有方法,只需写需要写的方法

        mRightOutSet.addListener(new AnimatorListenerAdapter() {

        //动画开始时候

            @Override

            public void onAnimationStart(Animator animation) {

                super.onAnimationStart(animation);

                mFlContainer.setClickable(false);

            }

        });

        //动画结束的时候

        mLeftInSet.addListener(new AnimatorListenerAdapter() {

            @Override

            public void onAnimationEnd(Animator animation) {

                super.onAnimationEnd(animation);

                mFlContainer.setClickable(true);//主布局中framelayouy的就允许你去点击了

            }

        });

 

    }

 

//一直不是很懂的设置镜头距离,

//帖子上的注释写着:改变视角距离,贴近屏幕

    private void setCameraDistance() {

        int distance = 16000;

        float scale = getResources().getDisplayMetrics().density*distance;

        mFlCardFront.setCameraDistance(scale);//设置距离

        mFlCardBack.setCameraDistance(scale);//设置距离

    }

 

//这是主Framelayout的点击方法

    public void flipCard(View view){

    //mIsShowBack可以理解为互斥,所以为boolean

        if(!mIsShowBack){

        //右出动画设置在正面卡片界面

            mRightOutSet.setTarget(mFlCardFront);

        //左入动画设置在反面卡片界面    

            mLeftInSet.setTarget(mFlCardBack);

            //开始动画 

            mRightOutSet.start();

            mLeftInSet.start();

            mIsShowBack = true;

        }else {

        //右出动画设置在卡片背面界面

            mRightOutSet.setTarget(mFlCardBack);

         //左入动画设置在卡片正面界面

            mLeftInSet.setTarget(mFlCardFront);

            mRightOutSet.start();

            mLeftInSet.start();

            mIsShowBack = false;

        }

    }

    //这一点我一直没想到,还可以在onDestroy方法中解绑ButterKnife

    protected void onDestroy(){

        super.onDestroy();

        ButterKnife.unbind(this);

    }

}

到这一步,基本就全部完成了。


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 : https://blog.csdn.net/chenxuanhe1995/article/details/54927071
相关文章
  • Kotlin的Collection与Sequence操作异同点介绍

    Kotlin的Collection与Sequence操作异同点介绍
    在Android开发中,集合是我们必备的容器,Kotlin的标准库中提供了很多处理集合的方法,而且还提供了两种基于容器的工作方式:Collection 和
  • 实现一个Kotlin函数类型方法

    实现一个Kotlin函数类型方法
    接口与函数类型 业务开发中,经常会有实现一个函数式接口(即接口只有一个方法需要实现)的场景,大家应该都会不假思索的写出如下代
  • Android10 App启动Activity源码分析
    ActivityThread的main方法 让我们把目光聚焦到ActivityThread的main方法上。 ActivityThread的源码路径为/frameworks/base/core/java/android/app/ActivityThread。 1 2
  • Android10客户端事务管理ClientLifecycleManager源码解析

    Android10客户端事务管理ClientLifecycleManager源码解析
    在Android 10 App启动分析之Activity启动篇(二)一文中,简单地介绍了Activity的生命周期管理器是如何调度Activity进入onCreate生命周期的流程。这
  • Kotlin对象的懒加载方式by lazy与lateinit异同介绍

    Kotlin对象的懒加载方式by lazy与lateinit异同介绍
    属性或对象的延时加载是我们相当常用的,一般我们都是使用 lateinit 和 by lazy 来实现。 他们两者都是延时初始化,那么在使用时那么他们两
  • Android类加载流程分析

    Android类加载流程分析
    本文分析的代码基于Android8.1.0源码。 流程分析 从loadClass开始,我们来看下Android中类加载的流程 /libcore/ojluni/src/main/java/java/lang/ClassLoader.ja
  • Android实现读写USB串口数据的代码

    Android实现读写USB串口数据的代码
    最近在研究USB方面的内容;先后做了关于Android读写HID、串口设备的DEMO。本文比较简单,主要介绍的是Android实现读取串口数据的功能 废话不
  • Epoxy - 在RecyclerView中构建复杂界面
    Diffing 对于复杂数据结构支持的多个视图类型展示在屏幕上, Epoxy此时是尤其有用的. 在这些场景中, 数据可能会被网络请求, 异步 Observable, 用
  • Android性能优化的详细介绍

    Android性能优化的详细介绍
    性能优化是一个app很重要的一部分,一个性能优良的app从被下载到启动到使用都能给用户到来很好的体验。自然我们做性能优化也是从被下
  • Android进阶宝典-插件化2(Hook启动插件中四大组件

    Android进阶宝典-插件化2(Hook启动插件中四大组件
    在上一节,我们主要介绍了如果通过反射来加载插件中的类,调用类中的方法;既然插件是一个apk,其实最重要的是启动插件中的Activity、
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计