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图。

687474703a2f2f692e696d6775722e636f6d2f6c6435366b62692e676966.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