网格视图中一项的卡片翻转动画答案

【问题标题】：Card flip animation for one item in a gridview网格视图中一项的卡片翻转动画
【发布时间】：2015-10-01 19:24:19
【问题描述】：

所以我正在为 restaurant 制作一个应用程序，该应用程序使用 gridview 显示项目每个项目视图都有一个用于购买餐点的按钮和 3 个文本视图和图像视图来显示餐点图像及其名称，详细信息和价格。

我在这里尝试做的是一个翻转动画到网格视图中的一个项目，以在背面显示有关这顿饭的更多详细信息。

来自 Google android 开发者网站的 卡片翻转动画 示例使用框架布局中的 2 个片段来翻转整个片段我不需要我只需要翻转一个作为gridview一部分的项目已经在一个在片段中调用的baseadapter中包含它们全部

我搜索了很多并找到了示例，但是当我尝试实现它们时，我在我的 sdk 中找不到“android.animation”包，提到我已经从 sdk manger 更新了支持库。

请帮帮我，我真的需要它。谢谢。

这是应用的一些屏幕截图还有代码。

https://drive.google.com/folder/d/0B9ZvWspyBhx1RUNydFFIei1qdm8/edit

【问题讨论】：

标签： android card-flip

【解决方案1】：

感谢本教程，我确实找到了问题的答案

http://icetea09.com/blog/2014/10/21/android-card-flip-animation/

flight_left_in.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Rotate. -->
<objectAnimator
    android:valueFrom="-180"
    android:valueTo="0"
    android:propertyName="rotationY"
    android:interpolator="@android:interpolator/accelerate_decelerate"
    android:duration="500" />

<!-- When the roration reach half of animation, show the card -->
<objectAnimator
    android:valueFrom="0.0"
    android:valueTo="1.0"
    android:propertyName="alpha"
    android:duration="1"
    android:startOffset="250"/>
</set>

flip_right_out.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Rotate. -->
<objectAnimator
    android:valueFrom="0"
    android:valueTo="180"
    android:propertyName="rotationY"
    android:interpolator="@android:interpolator/accelerate_decelerate"
    android:duration="500" />

<!-- Half-way through the rotation, hide the front card -->
<objectAnimator
    android:valueFrom="1.0"
    android:valueTo="0.0"
    android:propertyName="alpha"
    android:startOffset="250"
    android:duration="1" />
</set>

fav_grid_single.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:padding="10dp"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin" >

<LinearLayout
    android:id="@+id/fav_grid_single_Front"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/view_dropshadow" >

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/rounded_corner"
        android:padding="10dp"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin" >

        <ImageView
            android:id="@+id/fav_grid_image"
            android:layout_width="312dp"
            android:layout_height="212dp"
            android:padding="10dp" />

        <TextView
            android:id="@+id/fav_grid_detialsText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/fav_grid_nameText"
            android:padding="10dp"
            android:text="ههههههههههههههههههههههههههههه"
            android:textColor="#111"
            android:textSize="17dp" />

        <TextView
            android:id="@+id/fav_grid_priceText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBaseline="@+id/fav_grid_buyButton"
            android:layout_alignBottom="@+id/fav_grid_buyButton"
            android:layout_alignRight="@+id/fav_grid_nameText"
            android:padding="5dp"
            android:text="500 SDG"
            android:textColor="#111"
            android:textSize="18dp" />

        <TextView
            android:id="@+id/fav_grid_nameText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/fav_grid_detialsText"
            android:layout_below="@+id/fav_grid_image"
            android:layout_marginLeft="18dp"
            android:padding="5dp"
            android:text="الاسم"
            android:textColor="#111"
            android:textSize="25dp"
            android:textStyle="bold" />

        <RatingBar
            android:id="@+id/fav_ratingBar"
            android:layout_width="260dp"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/fav_grid_detialsText"
            android:layout_below="@+id/fav_grid_detialsText"
            android:paddingLeft="10dp" />

        <Button
            android:id="@+id/fav_grid_buyButton"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignLeft="@+id/fav_grid_nameText"
            android:layout_below="@+id/fav_ratingBar"
            android:background="@drawable/buy"
            android:padding="5dp"
            android:textSize="0dp" />
    </RelativeLayout>
</LinearLayout>

<LinearLayout
    android:id="@+id/fav_grid_single_Back"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:alpha="0"
    android:background="@drawable/view_dropshadow"
    android:orientation="horizontal" >

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/rounded_corner"
        android:padding="10dp"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin" >

        <TextView
            android:id="@+id/fav_grid_morespaText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="5dp" />

        <TextView
            android:id="@+id/fav_grid_moreNameText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/fav_grid_morespaText"
            android:padding="5dp"
            android:text="الاسم"
            android:textColor="#111"
            android:textSize="25dp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/fav_grid_moreDetialsText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/fav_grid_moreNameText"
            android:padding="5dp"
            android:text="التفاصيل"
            android:textColor="#111"
            android:textSize="20dp" />
    </RelativeLayout>
</LinearLayout>

<Button
    android:id="@+id/fav_grid_flipButton"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:background="@drawable/info3" />

</RelativeLayout>

FavGrid.java

final Button info = (Button) grid.findViewById(R.id.fav_grid_flipButton);
        info.setOnClickListener(new OnClickListener() {
            public void onClick(View arg0) {
            setRightOut = (AnimatorSet) AnimatorInflater.loadAnimator(context,
            R.animator.flip_right_out);


            setLeftIn = (AnimatorSet) AnimatorInflater.loadAnimator(context,
            R.animator.flight_left_in);
                View v = parent.getChildAt(Integer.parseInt(buy.getText().toString()));
                imgFront = (LinearLayout)v.findViewById(R.id.fav_grid_single_Front);
                imgBack = (LinearLayout)v.findViewById(R.id.fav_grid_single_Back);
                if(!isBackVisible){
                    setRightOut.setTarget(imgFront);
                    setLeftIn.setTarget(imgBack);
                    setRightOut.start();
                    setLeftIn.start();
                    isBackVisible = true;
                }
                else{
                    setRightOut.setTarget(imgBack);
                    setLeftIn.setTarget(imgFront);
                    setRightOut.start();
                    setLeftIn.start();
                    isBackVisible = false;
                }
            }
        });

【讨论】：

【解决方案2】：

好的，如果我理解了这个问题，你应该确保在 GridView 中点击项目，所以首先在 Layout xml 上的 GridView 项目中设置这个：

android:focusable="false"
android:focusableInTouchMode="false"
android:clickable="false"

然后，在你的 gridView 上设置 OnItemClickListener()：

myGridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {
            flipTheView(view, position);
        }
    });

视图对象是在 GridView 上单击的项目，位置（猜猜是什么？）是来自适配器的项目的位置（显示在 Grid 上）

private void flipTheView(View view) {
  AnimatorSet setFlipInFront = (AnimatorSet) AnimatorInflater.loadAnimator(context, R.animator.flip_in_front);

  setFlipInFront.setTarget(view);
  setFlipInFront.start();
}

还有flip_in_front.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator">
<!-- Rotate. -->1000
<objectAnimator
    android:valueFrom="0"
    android:valueTo="-180"
    android:propertyName="rotationY"

    android:duration="@integer/card_flip_time_full" />

<!-- When the rotation reach half of animation, show the card -->
<objectAnimator
    android:valueFrom="0.0"
    android:valueTo="1.0"
    android:propertyName="alpha"
    android:duration="1"
    android:startOffset="@integer/500"/>
</set>

【讨论】：

我的问题是如何制作翻转动画而不改变项目的视图。我想让它像纸牌游戏一样翻转......是的，它显示在网格中查看链接中的代码
我详细回答了...现在更容易理解了吗？
对不起，但我已经告诉过你，当我输入 import 时我找不到包 android.animation 我只能找到 android.view.animation 并且它没有 AnimatorSet .. 请帮帮我在这个我搜索它但从未找到它。它应该在这里:'(