web-dev-qa-db-ja.com

Googleマップの下部パネルを複製する上にスワイプ

Googleマップの下部パネルのスワイプアップアニメーションを複製しようとしています。

  1. マップマーカーをタップすると、下部パネル（ヘッダー）の小さな部分が表示されます
  2. ヘッダーパネルを上にスワイプすると、詳細情報を含むフルサイズのパネルが表示されます。
  3. フルサイズのパネルを下にスワイプすると、表示がヘッダーのみに復元されます
  4. マーカーをタップすると、下部パネルが表示されなくなります

TranslationAnimationを使用して、マーカーをタップしたときに下部パネルをアニメーション化することができました。私が抱えている問題は、アニメーションの最後に、パネルが表示されるようにビューをVISIBLEに設定する必要があることですが、パネル全体が表示され、上部のヘッダー部分だけではありません。

現在、下部パネルビューとしてLinearLayoutを含むFrameLayoutを使用しています。

<FrameLayout
        Android:id="@+id/viewBottomPane"
        Android:layout_width="match_parent"
        Android:visibility="gone"
        Android:background="#000000"
        Android:layout_height="wrap_content"
        Android:layout_gravity="center_horizontal|bottom">
        <LinearLayout
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:orientation="vertical">
            <include
                Android:id="@+id/paneHeader"
                layout="@layout/headerPanel" />
            <TextView
                Android:id="@+id/paneFooter"
                Android:text=""
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"/>
            </LinearLayout>
    </FrameLayout>

マップマーカータップにpaneHeaderを表示してから、上にスワイプして完全なviewBottomPaneを表示し、下にスワイプしてpaneHeaderを表示し、マーカーをタップしてすべてを非表示にします。

androidanimationandroid-animation
13
mraviator

私は以前にその目的のためにこのライブラリを使用し、かなりうまく機能しました。

https://github.com/umano/AndroidSlidingUpPanel

ドキュメントにはこれが書かれています

このコードは、Androidサポートライブラリのr13からのオープンソースのSlidingPaneLayoutコンポーネントに大きく基づいています。ありがとうAndroidチーム！

Android 2.3.6を試してみましたが、完全に機能します。下位互換性が必要かどうかはわかりませんが、必要な場合は役立ちます。

あなたはxml部分を持っています

<com.sothree.slidinguppanel.SlidingUpPanelLayout
    Android:id="@+id/sliding_layout"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:layout_gravity="bottom">

    <TextView
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:gravity="center"
        Android:text="Main Content"
        Android:textSize="16sp" />

    <TextView
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:gravity="center|top"
        Android:text="The Awesome Sliding Up Panel"
        Android:textSize="16sp" />
</com.sothree.slidinguppanel.SlidingUpPanelLayout>

そしてあなたのクラスのリスナー

SlidingUpPanelLayout layout = (SlidingUpPanelLayout) findViewById(R.id.sliding_layout);
        layout.setShadowDrawable(getResources().getDrawable(R.drawable.above_shadow));
        layout.setAnchorPoint(0.3f);
        layout.setPanelSlideListener(new PanelSlideListener() {
            @Override
            public void onPanelSlide(View panel, float slideOffset) {
                Log.i(TAG, "onPanelSlide, offset " + slideOffset);
                if (slideOffset < 0.2) {
                    if (getActionBar().isShowing()) {
                        getActionBar().hide();
                    }
                } else {
                    if (!getActionBar().isShowing()) {
                        getActionBar().show();
                    }
                }
            }

            @Override
            public void onPanelExpanded(View panel) {
                Log.i(TAG, "onPanelExpanded");

            }

            @Override
            public void onPanelCollapsed(View panel) {
                Log.i(TAG, "onPanelCollapsed");

            }

            @Override
            public void onPanelAnchored(View panel) {
                Log.i(TAG, "onPanelAnchored");

            }
        });

また、ビューで状態を設定すると、ペインアップイベントがトリガーされます。

それが役に立てば幸い！ :)

18
axierjhtjz