bottomsheet
介绍:
Flipboard的开源项目。一个响应手势操作的底部菜单,初次显示只露出菜单的部分,当向上滑动,则满屏显示菜单,同时可以用相反的手势滑动解除菜单,用户体验非常不错,可以替代dialog和menu的大部分使用场景。 BottomSheet已经在Flipboard中使用了一段时间,因此是经得住考验的。
运行效果:
使用说明:
依赖如下,如果你只是想使用BottomSheet控件,可以不必使用commons模块
dependencies {
compile 'com.flipboard:bottomsheet-core:1.0.0'
compile 'com.flipboard:bottomsheet-commons:1.0.0' // 可选
}
开始
先把一个布局放在BottomSheet中,如果你本来是想使用这样的一个布局:
<LinearLayout
android:id="@+id/root"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="@+id/view1"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<View
android:id="@+id/view2"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
则需要改成这样
<com.flipboard.bottomsheet.BottomSheet
android:id="@+id/bottomsheet"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/root"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="@+id/view1"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<View
android:id="@+id/view2"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
</com.flipboard.bottomsheet.BottomSheet>
回到activity或者fragment中,你需要引用BottomSheet。
BottomSheet bottomSheet = (BottomSheet) findViewById(R.id.bottomsheet);
现在,你要做的是在BottomSheet中显示一个view:
bottomSheet.showWithSheetView(LayoutInflater.from(context).inflate(R.layout.my_sheet_layout, bottomSheet, false));
你还可以使用一个来自于commons模块的内置view。
bottomSheet.showWithSheetView(new IntentPickerSheetView(this, shareIntent, "Share with...", new IntentPickerSheetView.OnIntentPickedListener() {
@Override
public void onIntentPicked(Intent intent) {
bottomSheet.dismissSheet();
startActivity(intent);
}
});
这就是最简单的使用案例。关于如何自定义BottomSheet,可以查看下面的api文档。
API
BottomSheet
/**
* Set the presented sheet to be in an expanded state.
*/
public void expandSheet();
/**
* Set the presented sheet to be in a peeked state.
*/
public void peekSheet();
/**
* @return The peeked state translation for the presented sheet view. Translation is counted from the bottom of the view.
*/
public float getPeekSheetTranslation();
/**
* @return The maximum translation for the presented sheet view. Translation is counted from the bottom of the view.
*/
public float getMaxSheetTranslation();
/**
* @return The currently presented sheet view. If no sheet is currently presented null will returned.
*/
public View getContentView();
/**
* @return The currently presented sheet view. If no sheet is currently presented null will returned.
*/
public View getSheetView();
/**
* Set the content view of the bottom sheet. This is the view which is shown under the sheet
* being presented. This is usually the root view of your application.
*
* @param contentView The content view of your application.
*/
public void setContentView(View contentView);
/**
* Convenience for showWithSheetView(sheetView, null, null)
*/
public void showWithSheetView(View sheetView);
/**
* Convenience for showWithSheetView(sheetView, viewTransformer, null)
*/
public void showWithSheetView(View sheetView, ViewTransformer viewTransformer);
/**
* Present a sheet view to the user.
*
* @param sheetView The sheet to be presented.
* @param viewTransformer The view transformer to use when presenting the sheet.
* @param onSheetDismissedListener The listener to notify when the sheet is dismissed.
*/
public void showWithSheetView(View sheetView, ViewTransformer viewTransformer, OnSheetDismissedListener onSheetDismissedListener);
/**
* Dismiss the sheet currently being presented.
*/
public void dismissSheet();
/**
* @return The current state of the sheet.
*/
public State getState();
/**
* @return Whether or not a sheet is currently presented.
*/
public boolean isSheetShowing();
/**
* Set the default view transformer to use for showing a sheet. Usually applications will use
* a similar transformer for most use cases of bottom sheet so this is a convenience instead of
* passing a new transformer each time a sheet is shown. This choice is overridden by any
* view transformer passed to showWithSheetView().
*
* @param defaultViewTransformer The view transformer user by default.
*/
public void setDefaultViewTransformer(ViewTransformer defaultViewTransformer);
/**
* Enable or disable dimming of the content view while a sheet is presented. If enabled a
* transparent black dim is overlaid on top of the content view indicating that the sheet is the
* foreground view. This dim is animated into place is coordination with the sheet view.
* Defaults to true.
*
* @param shouldDimContentView whether or not to dim the content view.
*/
public void setShouldDimContentView(boolean shouldDimContentView);
/**
* @return whether the content view is being dimmed while presenting a sheet or not.
*/
public boolean shouldDimContentView();
/**
* Enable or disable the use of a hardware layer for the presented sheet while animating.
* This settings defaults to true and should only be changed if you know that putting the
* sheet in a layer will negatively effect performance. One such example is if the sheet contains
* a view which needs to frequently be re-drawn.
*
* @param useHardwareLayerWhileAnimating whether or not to use a hardware layer.
*/
public void setUseHardwareLayerWhileAnimating(boolean useHardwareLayerWhileAnimating);
/**
* Set a OnSheetStateChangeListener which will be notified when the state of the presented sheet changes.
*
* @param onSheetStateChangeListener the listener to be notified.
*/
public void setOnSheetStateChangeListener(OnSheetStateChangeListener onSheetStateChangeListener);
OnSheetDismissedListener
/**
* Called when the presented sheet has been dismissed.
*
* @param bottomSheet The bottom sheet which contained the presented sheet.
*/
void onDismissed(BottomSheet bottomSheet);
ViewTransformer
/**
* Called on every frame while animating the presented sheet. This method allows you to coordinate
* other animations (usually on the content view) with the sheet view's translation.
*
* @param translation The current translation of the presented sheet view.
* @param maxTranslation The max translation of the presented sheet view.
* @param peekedTranslation The peeked state translation of the presented sheet view.
* @param parent The BottomSheet presenting the sheet view.
* @param view The content view to transform.
*/
void transformView(float translation, float maxTranslation, float peekedTranslation, BottomSheet parent, View view);
Common Components
这些组建在bottomsheet-commons
中,实现了bottom sheet的常见用法。
IntentPickerSheetView
这个组建是一个BottomSheet形式的intent chooser。也就是说,给它一个intent,比如share intent,让用户选择一个想在BottomSheet中分享该intent的Activity。下面是实际效果的gif图。
这里是sample源码中关于该组件的使用样例:
IntentPickerSheetView intentPickerSheet = new IntentPickerSheetView(MainActivity.this, shareIntent, "Share with...", new IntentPickerSheetView.OnIntentPickedListener() {
@Override
public void onIntentPicked(Intent intent) {
bottomSheet.dismissSheet();
startActivity(intent);
}
});
// Filter out built in sharing options such as bluetooth and beam.
intentPickerSheet.setFilter(new IntentPickerSheetView.Filter() {
@Override
public boolean include(IntentPickerSheetView.ActvityInfo info) {
return !info.componentName.getPackageName().startsWith("com.android");
}
});
// Sort activities in reverse order for no good reason
intentPickerSheet.setSortMethod(new Comparator<IntentPickerSheetView.ActvityInfo>() {
@Override
public int compare(IntentPickerSheetView.ActvityInfo lhs, IntentPickerSheetView.ActvityInfo rhs) {
return rhs.label.compareTo(lhs.label);
}
});
bottomSheet.showWithSheetView(intentPickerSheet);
已下载
0