アンドロイドで「カートに追加」する方法は？

Question

私のアプリは多少このように見えます（）

同様に、製品のスナップショットを以下のカートに移動したいと思います。私はこれまでにアニメーションを扱ったことがないので、これを理解するために少し苦労しています。あなたの答えのために

は、製品の画像はImageViewの中で、カートボタンが右下にあるフローティング操作ボタンであることを前提としています。

ページのための私のコードはここにある：事前に

 

<?xml version="1.0" encoding="utf-8"?> 
<layout xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    xmlns:android="http://schemas.android.com/apk/res/android"> 
    <data> 
     <variable name="product" type="com.example.irtazasafi.ilovezappos.Result"/> 
    </data> 

<LinearLayout 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:orientation="vertical" 
    android:weightSum="1" 
    android:background="@color/cardview_light_background" 
    android:gravity="center"> 

<ImageView 
    android:layout_width="fill_parent" 
    android:layout_height="50dp" 
    android:background="@color/cardview_light_background" 
    android:src="@mipmap/zappos" 
    android:textAlignment="center"/> 

<TextView 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="@{product.getProductId()}" 
    android:textAlignment="center" /> 

<android.support.design.widget.CoordinatorLayout 
    android:id="@+id/test" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"> 

    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="@{product.getPercentOff()}" 
     android:textSize="20sp" 
     android:layout_marginRight="250dp" 
     android:textColor="@color/colorAccent" 
     android:id="@+id/discountAmount"/> 

</android.support.design.widget.CoordinatorLayout> 

<ImageView 
    android:layout_width="200dp" 
    android:layout_height="200dp" 
    android:layout_marginTop="10dp" 
    android:id="@+id/productImage" 
    android:scaleType="centerCrop" 
    android:backgroundTint="@color/cardview_light_background" 
    android:background="@color/cardview_light_background" /> 

<TextView 
    android:layout_marginTop="5dp" 
    android:layout_width="fill_parent" 
    android:layout_height="43dp" 
    android:background="?android:attr/colorPrimary" 
    android:text="@{product.getBrandName()}" 
    android:textColor="@android:color/black" 
    android:textSize="35sp" 
    android:textAlignment="center"/> 

<TextView 
    android:layout_marginTop="0dp" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:background="?android:attr/colorPrimary" 
    android:text="@{product.getProductName()}" 
    android:textColor="@android:color/black" 
    android:textSize="15sp" 
    android:textAlignment="center"/> 
<TextView 
    android:layout_marginTop="0dp" 
    android:layout_width="fill_parent" 
    android:layout_height="25dp" 
    android:background="?android:attr/colorPrimary" 
    android:text="@{product.getOriginalPrice()}" 
    android:textColor="@android:color/black" 
    android:textSize="20sp" 
    android:textAlignment="center" 
    android:id="@+id/origPrice"/> 
<TextView 
    android:layout_marginTop="0dp" 
    android:layout_width="fill_parent" 
    android:layout_height="25dp" 
    android:background="?android:attr/colorPrimary" 
    android:text="@{product.getPrice()}" 
    android:textColor="@android:color/black" 
    android:textSize="15sp" 
    android:textAlignment="center" 
    android:id="@+id/currPrice"/> 


    <android.support.design.widget.CoordinatorLayout 
     android:id="@+id/main_content" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"> 

     <android.support.design.widget.FloatingActionButton 
      android:layout_width="54dp" 
      android:layout_height="54dp" 
      android:layout_gravity="bottom|right" 
      android:src="@mipmap/ic_add_shopping_cart_black_24dp" 
      android:layout_marginBottom="40dp" 
      android:layout_marginRight="30dp" 
      app:backgroundTint="@android:color/holo_blue_light" 
      android:id="@+id/cartadd" 
      android:onClick="addToCart"/> 

    </android.support.design.widget.CoordinatorLayout> 
</LinearLayout> 

layout> 

ありがとう！

Answer 1

理論的には、私はsomethinkなどをしようとするだろう：あなたのRecyclerViewに1つ、FAB（XMLレイアウトで）と同じ階層レベルで1：

1. 2 ImageViewのを持っています。第2のものを隠す。

2. 製品をクリックすると、二ImageViewのにあなたのクリックされた画像のビットマップをコピー

3. があなたのFABコンテナにあなたの商品画像の相対的なXとYを取得する - あなたのビューの再帰のgetXとのgetYあなたが親にしているまで、その親にXに

4. 置きます第2の画像を（RecyclerViewにscrollXとscrollYを削除することを忘れないでください）とYはにあなたのイメージのために

5. 待ちを取得しレイアウトする（getViewTreeObserver（）。addOnPr edrawListener（））、アニメーションを適用してFABの中央に移動します。あなたは適用FAB

6. の上に+1を表示onAnimationEndListenerを追加

7. （目的地を知るためにFABのxとyを取得）画像を縮小し、それを翻訳する必要があります。 1ビュー（+1は、FABの上ではなく、アイコンので、描画され、1が白、それは問題ないはずです）

幸運への翻訳アニメーションダウン、それはかなりの量です仕事の！

Answer 2

私はこれがあなたに特にプログラマのためのより良い

link fly to cart animation