Androidはスクリーンの底からもっと多くのパネルを滑り出して実現します。

20412 ワード

効果図の展示:使用されている第三者オープンソースプロジェクトのgithubアドレス:https://github.com/umano/AndroidSlidingUpPanel
SlidingUpPanel Layoutは2つのサブビューしか持っていません。slidingパネル、メインパネルです。
デモのコアコードは以下の通りです。
<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);

                }
            }
        });
デモコードの住所:https://github.com/xmliu/bottom-sliding-demo
PS:底の内容背景が透明な背景があると、透明な背景の下にある他の階のボタンのクリックイベントが上書きされます。クリックできません。このパン自体はスライドして展開と収縮をコントロールします。
参考にしてください
  • Androidは、下から滑らかにパネルを上にスライドさせたAndroid SlidingUpPanel
  • です。
  • Android SlidingUpPanelライブラリ使用