Androidはスクリーンの底からもっと多くのパネルを滑り出して実現します。
効果図の展示:使用されている第三者オープンソースプロジェクトのgithubアドレス:https://github.com/umano/AndroidSlidingUpPanel
SlidingUpPanel Layoutは2つのサブビューしか持っていません。slidingパネル、メインパネルです。
デモのコアコードは以下の通りです。
PS:底の内容背景が透明な背景があると、透明な背景の下にある他の階のボタンのクリックイベントが上書きされます。クリックできません。このパン自体はスライドして展開と収縮をコントロールします。
参考にしてください Androidは、下から滑らかにパネルを上にスライドさせたAndroid SlidingUpPanel です。 Android SlidingUpPanelライブラリ使用
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:底の内容背景が透明な背景があると、透明な背景の下にある他の階のボタンのクリックイベントが上書きされます。クリックできません。このパン自体はスライドして展開と収縮をコントロールします。
参考にしてください