Question

所以我正在制作一个餐厅的应用程序，它使用gridview显示项目，每个项目视图都有一个按钮用于购买餐食，3个textview和imageview显示用餐图像及其名称，细节和价格。

我在这里尝试做的是对gridview中的一个项目进行翻转动画，以便在背面显示有关该餐的更详细信息。

来自Google android开发者网站的卡片翻转动画示例在framelayout中使用2个片段来翻转整个片段我不需要我只需要翻转作为gridview的一部分的项目，它已经在一个调用片段的baseadapter中保存了所有这些

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

请帮助我真正需要它的人。的感谢

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

The Gridview that i made

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

Answer 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;
                }
            }
        });

before the flip after the flip

Answer 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);
        }
    });

view对象是在GridView上单击的项目和位置（猜猜是什么？）是来自适配器的项目位置（显示在网格上）

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>

在gridview中的一个项目的卡片翻转动画

2 个答案: