Android自屏幕底部滑出更多面板的实现

效果图展示:
在这里插入图片描述
使用的第三方开源项目github地址:https://github.com/umano/AndroidSlidingUpPanel

SlidingUpPanelLayout只能有2个子view,一个sliding面板,一个主面板

demo核心代码如下:

<com.sothree.slidinguppanel.SlidingUpPanelLayout xmlns:sothree="http://schemas.android.com/apk/res-auto"
        android:id="@+id/sliding_layout"
        android:layout_width="wrap_content"
        android:layout_height="425dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:gravity="bottom"
        sothree:umanoDragView="@+id/dragView"
        sothree:umanoOverlay="false"
        sothree:umanoPanelHeight="120dp"
        sothree:umanoParallaxOffset="100dp"
        sothree:umanoScrollableView="@+id/list"
        sothree:umanoShadowHeight="0dp">

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/transparent" />
        <!-- SLIDING LAYOUT -->
        <RelativeLayout
            android:id="@+id/dragView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:clickable="true"
            android:focusable="false">
			<!-- 底部菜单内容,根据sothree:umanoPanelHeight大小分两层显示 -->
            <LinearLayout
                android:id="@+id/pull_layout"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:paddingLeft="10dp"
                android:paddingRight="10dp"
                android:paddingBottom="3dp">

                <ImageView
                    android:id="@+id/pull_imageview"
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:src="@drawable/pull_up" />
            </LinearLayout>

            <RelativeLayout
                android:id="@+id/bottom_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/pull_layout"
                android:background="@color/bg_lightblue"
                >

                <TextView
                    android:id="@+id/simple"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:layout_marginBottom="10dp"
                    android:layout_marginTop="10dp"
                    android:layout_marginLeft="10dp"
                    android:layout_marginRight="10dp"
                    android:text="蒙奇·D·路飞 日本漫画《航海王》及其衍生作品中的主角,外号“草帽”路飞,草帽一伙、草帽大船团船长,极恶的世代之一。 橡胶果实能力者的橡胶人,悬赏金15亿贝里。梦想是找到传说中的One Piece,成为海贼王" />

                <LinearLayout
                    android:id="@+id/list"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/simple"
                    android:layout_centerHorizontal="true"
                    android:orientation="vertical">

                    <TextView
                        android:layout_margin="10dp"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="路飞性格积极乐观,爱憎分明,而且十分重视伙伴,不甘屈居于他人之下,对任何危险的事物都超感兴趣。和其他传统的海贼所不同的是,他并不会为了追求财富而杀戮,而是享受着身为海贼的冒险和自由。" />

                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="100dp"
                        android:src="@drawable/luff"/>

                    <TextView
                        android:layout_margin="10dp"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="路飞(Luffy)这名字源自英语“Luff”,意即“逆风航行”,这是他想过最适合船长使用的名字。此外,他也指出路飞生下来就是运势非凡的人;只有实力和运气兼备的人,才能成就伟大功业。" />
                        
                </LinearLayout>

            </RelativeLayout>
        </RelativeLayout>
    </com.sothree.slidinguppanel.SlidingUpPanelLayout>

xml中关键的属性配置

sothree:umanoPanelHeight : 收缩状态下的面板高度
sothree:umanoOverlay : 是否显示阴影
sothree:umanoFadeColor : 设置阴影颜色,可设置透明,同setCoveredFadeColor
sothree:umanoScrollableView : 设置可展开的是哪个view
sothree:umanoDragView : 设置外层拖拽的view(包含umanoScrollableView)

java代码设置阴影颜色和滑动监听

 mLayout.setCoveredFadeColor(Color.parseColor("#00000000"));
 mLayout.addPanelSlideListener(new SlidingUpPanelLayout.PanelSlideListener() {
            @Override
            public void onPanelSlide(View panel, float slideOffset) {
                Log.i(TAG, "onPanelSlide, offset " + slideOffset);
            }

            @Override
            public void onPanelStateChanged(View panel, SlidingUpPanelLayout.PanelState previousState, SlidingUpPanelLayout.PanelState newState) {
                if(mLayout.getPanelState().toString().equals(SlidingUpPanelLayout.PanelState.COLLAPSED.toString())){
                    // 箭头
                    pullIV.setImageResource(R.drawable.pull_up);
                    // 遮罩层
                    hatView.setVisibility(View.GONE);

                }else if(mLayout.getPanelState().toString().equals(SlidingUpPanelLayout.PanelState.EXPANDED.toString())){
                    pullIV.setImageResource(R.drawable.pull_down);
                    hatView.setVisibility(View.VISIBLE);

                }
            }
        });

demo代码地址:
https://github.com/xmliu/bottom-sliding-demo

PS:
如果底部内容背景是带有透明背景的话,透明背景下的其他层的按钮的点击事件就会被覆盖,无法点击,因为这个panel本身需要滑动来控制展开和收缩

参考博文

  1. Android自底部平滑向上滑出面板的AndroidSlidingUpPanel
  2. AndroidSlidingUpPanel库使用
展开阅读全文
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值