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

问题描述

我试图复制谷歌地图底部面板向上滑动动画：

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

1. 点击地图上的标记显示小，底板部分（头）
2. 向上滑动头面板上显示更多的信息一个全尺寸的面板。
3. 在向下滑动全尺寸面板恢复视图只有标题
4. 点击关闭标记，底部面板diasappears

使用 TranslationAnimation ，我已经能够得到一个底板上的标记敲击时的动画了。要问题我有，是在动画的最后，我必须将其视图可见使面板显示，但完整的液晶面板显示，而不是只是顶端报头部分。

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.

推荐答案

从来就利用这个库之前purpouse和工作pretty的好。

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

<一个href="https://github.com/umano/AndroidSlidingUpPanel">https://github.com/umano/AndroidSlidingUpPanel

该文件说，这个

这code在很大程度上基于打开来源SlidingPaneLayout   组件从Android支持库的R13。谢谢你的Andr​​oid   球队！

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

从来就试图在的Andr​​oid 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.

You've得到了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屋！