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 ： 设置阴影颜色，可设置透明，同setCoveredFadeColorsothree:umanoScrollableView ： 设置可展开的是哪个viewsothree: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本身需要滑动来控制展开和收缩

参考博文

Android自底部平滑向上滑出面板的AndroidSlidingUpPanel
AndroidSlidingUpPanel库使用

更多相关文章

随机推荐