复制Google地图底部面板向上滑动

Question

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

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

使用时TranslationAnimation,我已经能够使用底部面板在点击标记时进行动画制作.我遇到的问题是,在动画结束时,我必须将其View设置为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并点按标记以隐藏所有内容.

Answer 1

我之前使用过这个库,并且工作得非常好.

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

            }
        });

您也可以通过视图状态触发窗格向上事件.

希望能帮助到你!:)