2015-11-23 19 views
12

私は現在カスタムエキスパンドアニメーションを作成する方法を理解しようとしており、これを使用するための最良の方法はActivityOptionsCompatのようです。しかし、私は本当に私が望む効果を行うためにカスタムトランジションアニメーションを書く方法について本当に分かりません。Android - ActivityOptionsCompat - カスタムエキスパンドを展開

「開く」リストの上にボタンがあります。このボタンを押すと、その下のリストビューが下にシフトし、オプション付きの画面が表示されます。このイメージが私が達成しようとしていることを説明してくれることを願っています。

Expand Transition Animation

私は何をしようとしていることである:

  • は、2番目の画面「タイトル」のトップバーにトップ「開く」バーを設定し いわゆる「FILTERS」
  • 「開く」バーの直下にある0ピクセルの高さのビューを「フレーム」という拡張オプションリストに設定する
  • 拡大表示されたオプションの下にViewPagerを0ピクセルの高さに設定します "リスト"と呼ばれています

しかし、リストは押し出されず、新しい画面がその上にオーバーレイされます。

ViewCompat.setTransitionName(filters, "FILTERS"); 
ViewCompat.setTransitionName(frame, "FRAME"); 
ViewCompat.setTransitionName(viewPager, "LIST"); 

ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(
      getActivity(), new Pair<>(filters, "FILTERS"), new Pair<>(frame, "FRAME"), new Pair<>((View)viewPager, "LIST")); 


ActivityCompat.startActivity(getActivity(), new Intent(getActivity(), Filters.class), 
      options.toBundle()); 

どのようにこのスタイルのトランジションアニメーションを実現するのか知っていますか?

ご協力いただきありがとうございます。

+0

どのAPIレベルをテストしていますか? API 21以降でのみ動作します。 – GPack

+0

私は15歳以上をターゲットにしようとしています。 –

答えて

3

別のアクティビティである必要がない場合は、これまで私が使っていたumanoでnice library hereを使用することもできます。

compile 'com.sothree.slidinguppanel:library:3.2.0' 

をそして、あなたはこのようにそれを使用することができます:

enter image description here

はあなたのGradleの依存関係でそれを含める必要があり、それを使用するには

<com.sothree.slidinguppanel.SlidingUpPanelLayout 
    xmlns:sothree="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/sliding_layout" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:gravity="bottom" 
    sothree:umanoPanelHeight="68dp" 
    sothree:umanoShadowHeight="4dp" 
    sothree:umanoParallaxOffset="100dp" 
    sothree:umanoDragView="@+id/dragView" 
    sothree:umanoOverlay="true" 
    sothree:umanoScrollableView="@+id/list"> 

    <!-- MAIN CONTENT --> 
    <FrameLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:orientation="vertical"> 
     <android.support.v7.widget.Toolbar 
      xmlns:sothree="http://schemas.android.com/apk/res-auto" 
      xmlns:android="http://schemas.android.com/apk/res/android" 
      android:id="@+id/main_toolbar" 
      android:layout_height="?attr/actionBarSize" 
      android:background="?attr/colorPrimary" 
      sothree:theme="@style/ActionBar" 
      android:layout_width="match_parent"/> 
     <TextView 
      android:id="@+id/main" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_marginTop="?attr/actionBarSize" 
      android:gravity="center" 
      android:text="Main Content" 
      android:clickable="true" 
      android:focusable="false" 
      android:focusableInTouchMode="true" 
      android:textSize="16sp" /> 
    </FrameLayout> 

    <!-- SLIDING LAYOUT --> 
    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="#ffffff" 
     android:orientation="vertical" 
     android:clickable="true" 
     android:focusable="false" 
     android:id="@+id/dragView"> 

     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="68dp" 
      android:orientation="horizontal"> 

      <TextView 
       android:id="@+id/name" 
       android:layout_width="0dp" 
       android:layout_height="match_parent" 
       android:layout_weight="1" 
       android:textSize="14sp" 
       android:gravity="center_vertical" 
       android:paddingLeft="10dp"/> 

      <Button 
       android:id="@+id/follow" 
       android:layout_width="wrap_content" 
       android:layout_height="match_parent" 
       android:textSize="14sp" 
       android:gravity="center_vertical|right" 
       android:paddingRight="10dp" 
       android:paddingLeft="10dp"/> 

     </LinearLayout> 

     <ListView 
      android:id="@+id/list" 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_weight="1"> 
     </ListView> 
    </LinearLayout> 
</com.sothree.slidinguppanel.SlidingUpPanelLayout> 
+0

私はそれがまさに私が探しているものだとは思わない。私はそれが0pxから画面を満たすまでビューを伸ばしているように見えるようにしたい、それはオーバーレイの多くです。 –

0

ActivityOptionsCompat.makeSceneTransitionAnimation()は唯一の実行中の効果がありますAPI 21以上のデバイス。それがスタイルレベル

<!-- enable window content transitions --> 
<item name="android:windowContentTransitions">true</item> 

で遷移を可能にする必要があり、それは先のレイアウトのビューを呼び出すと呼ばれるために同じTransitionNameを設定する必要がアニメーションを表示するには 。

とにかく、スクロールするのではなく、スケールイン/スケールアウトのようになります。