前言
最近項(xiàng)目中需要用到高德地圖搜索結(jié)果后的結(jié)果展示的可拉伸控件余境。
gaode.gif
而我看到這個(gè)效果圖瞪讼，覺(jué)得這個(gè)就是一個(gè)slidingpanel盾计，但是翻閱了一些發(fā)現(xiàn)用google自帶的bottomsheet實(shí)現(xiàn)更方便
什么是BottomSheet近范？
Bottom Sheet是Design Support Library23.2 版本引入的一個(gè)類似于對(duì)話框的控件稿湿，可以暫且叫做底部彈出框吧。 Bottom Sheet中的內(nèi)容默認(rèn)是隱藏起來(lái)的搁进，只顯示很小一部分浪感，可以通過(guò)在代碼中設(shè)置其狀態(tài)或者手勢(shì)操作將其完全展開(kāi)，或者完全隱藏饼问，或者部分隱藏。對(duì)于Bottom Sheet的描述可以在官網(wǎng)查詢：https://material.io/guidelines/components/bottom-sheets.html#
怎么使用揭斧？
- 添加依賴
implemention 'com.android.support:design:25.3.1' - 布局文件
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/cl_chouti"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.amap.api.maps.MapView
android:id="@+id/map_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<ImageView
android:id="@+id/mark"
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@drawable/poi_marker_pressed" />
<!--為了更好與定位之后的紅點(diǎn)適配此imagview只是適配用沒(méi)有意義-->
<ImageView
android:layout_width="30dp"
android:layout_height="40dp"
android:layout_below="@+id/mark" />
</RelativeLayout>
</FrameLayout>
<RelativeLayout
android:id="@+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:behavior_hideable="true"
app:behavior_peekHeight="160dp"
app:layout_behavior="@string/bottom_sheet_behavior">
<include layout="@layout/layout_bottom_sheet" />
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
- layout_bottom_sheet.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:orientation="vertical">
<TextView
android:id="@+id/tv_tishi"
android:layout_gravity="center_horizontal"
android:layout_marginTop="40dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="附近熱點(diǎn)"
android:textSize="10sp"/>
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
- activity中的使用
//底部抽屜欄展示地址
bottomSheet = findViewById(R.id.bottom_sheet);
behavior = BottomSheetBehavior.from(bottomSheet);
behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
@Override
public void onStateChanged(@NonNull View bottomSheet, @BottomSheetBehavior.State int newState) {
String state = "null";
switch (newState) {
case 1:
state = "STATE_DRAGGING";//過(guò)渡狀態(tài)此時(shí)用戶正在向上或者向下拖動(dòng)bottom sheet
break;
case 2:
state = "STATE_SETTLING"; // 視圖從脫離手指自由滑動(dòng)到最終停下的這一小段時(shí)間
break;
case 3:
state = "STATE_EXPANDED"; //處于完全展開(kāi)的狀態(tài)
break;
case 4:
state = "STATE_COLLAPSED"; //默認(rèn)的折疊狀態(tài)
break;
case 5:
state = "STATE_HIDDEN"; //下滑動(dòng)完全隱藏 bottom sheet
break;
}
}
@Override
public void onSlide(@NonNull View bottomSheet, float slideOffset) {
// Log.d("BottomSheetDemo", "slideOffset:" + slideOffset);
}
});
- 注意分析
CoordinatorLayout 是Meterial Design中的一個(gè)新控件莱革，通過(guò)behavior用來(lái)協(xié)調(diào)其他組件, 實(shí)現(xiàn)聯(lián)動(dòng)峻堰，因此父布局必須是CoordinatorLayout 。
注意到布局中盅视，RelativeLayout中的app:layout_behavior=”@string/bottom_sheet_behavior”屬性捐名，點(diǎn)進(jìn)去可以看到，這個(gè)屬性實(shí)際上是設(shè)置系統(tǒng)默認(rèn)實(shí)現(xiàn)的BottomSheet的behavior闹击。原則上來(lái)說(shuō)镶蹋，只要是可以滾動(dòng)的View，在加上了這個(gè)屬性后赏半，都可以作為BottomSheet來(lái)使用贺归，建議使用NestedScrollView或者RecyclerView。
