复制谷歌地图底部面板向上滑动 [英] Replicate Google Maps Bottom Panel Swipe Up

问题描述

我正在尝试复制 Google 地图底部面板向上滑动的动画:

I'm trying to replicate Google Maps' bottom panel swipe up animation:

1. 点按地图标记会显示底部面板的一小部分(标题)
2. 在标题面板上向上滑动会显示一个包含更多信息的全尺寸面板.
3. 在全尺寸面板上向下滑动仅将视图恢复到标题
4. 点击标记，底部面板消失

使用TranslationAnimation，我已经能够在点击标记时获得一个底部面板来设置动画.我遇到的问题是，在动画结束时，我必须将其视图设置为 VISIBLE 以便面板显示，但随后整个面板显示而不仅仅是顶部标题部分.

Using TranslationAnimation, I've been able to get a bottom panel to animate up when tapping on the marker. To problem I'm having, is that at the end of the animation, I must set its View to VISIBLE so that the panel shows, but then the full panel shows and not just the top header portion.

我目前使用包含 LinearLayout 的 FrameLayout 作为我的底部面板视图:

I'm currently using a FrameLayout containing a LinearLayout as my bottom panel view:

<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并点击标记以隐藏所有内容.

I'd like to just show paneHeader on Map marker tap, then swipe up to show full viewBottomPane, swipe down to show paneHeader and tap off marker to hide all.

推荐答案

我以前为此目的使用过这个库，并且效果很好.

I´ve used this library for that purpouse before and worked pretty good.

https://github.com/umano/AndroidSlidingUpPanel

文档说明了这一点

此代码很大程度上基于开源的 SlidingPaneLayout来自 Android 支持库 r13 的组件.感谢安卓团队！

This code is heavily based on the opened-sourced SlidingPaneLayout component from the r13 of the Android Support Library. Thanks Android team!

我已经在 Android 2.3.6 上尝试过，它运行良好.不知道您是否需要它向后兼容，但如果您这样做会有所帮助.

I´ve tried on Android 2.3.6 and it works perfectly. Don't know if you need it to be backwards compatible but if you do this will be helpful.

您已经获得了 xml 部分

You´ve got the xml part

<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");

            }
        });

您也可以使用视图声明将触发窗格向上事件.

Also you can state with view will trigger the pane up event.

希望有帮助！:)

这篇关于复制谷歌地图底部面板向上滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！