Android BottomSheet：便捷易用的底部滑出面板（1）

系统管理员 2023-10-17 04:54 0阅读 0赞

**Android BottomSheet：便捷易用的底部滑出面板（1）**

Android BottomSheet是github上的一个第三方开源项目，其主页：[https://github.com/Flipboard/bottomsheet][https_github.com_Flipboard_bottomsheet]  
BottomSheet提供了简洁易用的从底部滑出的面板。现在的APP开发，经常需要从底部滑出某些面板提供给用户操作入口，比如最常见的分享，底部滑出一个面板，然后会罗列出多种分享入口，供用户选择。  
使用BottomSheet，需要首先在自己的模块build.gradle文件中加入下面代码：

repositories {
        jcenter()
    }
    
    dependencies {
        compile fileTree(dir: 'libs', include: ['*.jar'])
        testCompile 'junit:junit:4.12'
        compile 'com.android.support:appcompat-v7:23.4.0'
    
        compile 'com.flipboard:bottomsheet-core:1.5.1'
        compile 'com.flipboard:bottomsheet-commons:1.5.1'
    }

如图：

![Center][]

接下来就可以使用BottomSheet。先写布局。用BottomSheet提供的BottomSheetLayout把自己整个页面包裹起来：

<?xml version="1.0" encoding="utf-8"?>
    <com.flipboard.bottomsheet.BottomSheetLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/bottomsheet"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <LinearLayout
            android:id="@+id/root"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:padding="16dp">
    
            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="zhang phil @ csdn"
                android:id="@+id/editText" />
    
            <Button
                android:id="@+id/share_button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="end"
                android:text="分享" />
    
        </LinearLayout>
    
    </com.flipboard.bottomsheet.BottomSheetLayout>

上层Java代码：

package zhangphil.demo;
    
    import android.content.Context;
    import android.content.Intent;
    import android.graphics.drawable.Drawable;
    import android.support.v4.content.res.ResourcesCompat;
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    import android.view.View;
    import android.view.inputmethod.InputMethodManager;
    import android.widget.Button;
    import android.widget.EditText;
    
    import com.flipboard.bottomsheet.BottomSheetLayout;
    import com.flipboard.bottomsheet.commons.IntentPickerSheetView;
    
    import java.util.Collections;
    import java.util.Comparator;
    
    public class MainActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            final BottomSheetLayout bottomSheetLayout = (BottomSheetLayout) findViewById(R.id.bottomsheet);
            final EditText shareText = (EditText) findViewById(R.id.editText);
    
            Button shareButton = (Button) findViewById(R.id.share_button);
            shareButton.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    // 隐藏软键盘
                    InputMethodManager imm = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
                    imm.hideSoftInputFromWindow(shareText.getWindowToken(), 0);
    
                    final Intent shareIntent = new Intent(Intent.ACTION_SEND);
                    shareIntent.putExtra(Intent.EXTRA_TEXT, shareText.getText() + "");
                    shareIntent.setType("text/plain");
    
                    IntentPickerSheetView intentPickerSheet = new IntentPickerSheetView(getApplication(), shareIntent, "分享到...", new IntentPickerSheetView.OnIntentPickedListener() {
                        @Override
                        public void onIntentPicked(IntentPickerSheetView.ActivityInfo activityInfo) {
                            bottomSheetLayout.dismissSheet();
                            startActivity(activityInfo.getConcreteIntent(shareIntent));
                        }
                    });
    
    
                    // 过滤到像系统蓝牙这样的分享模式（可以过滤掉也可以不用过滤）
                    /*
                    intentPickerSheet.setFilter(new IntentPickerSheetView.Filter() {
                        @Override
                        public boolean include(IntentPickerSheetView.ActivityInfo info) {
                            return !info.componentName.getPackageName().startsWith("com.android");
                        }
                    });
                    */
    
                    // 排序分享模块
                    intentPickerSheet.setSortMethod(new Comparator<IntentPickerSheetView.ActivityInfo>() {
                        @Override
                        public int compare(IntentPickerSheetView.ActivityInfo lhs, IntentPickerSheetView.ActivityInfo rhs) {
                            return rhs.label.compareTo(lhs.label);
                        }
                    });
    
                    // 增加一个自定义的分享选择方式（可选）
                    Drawable customDrawable = ResourcesCompat.getDrawable(getResources(), R.mipmap.ic_launcher, null);
                    IntentPickerSheetView.ActivityInfo customInfo = new IntentPickerSheetView.ActivityInfo(customDrawable, "zhang phil custom", getApplicationContext(), MainActivity.class);
                    intentPickerSheet.setMixins(Collections.singletonList(customInfo));
    
                    bottomSheetLayout.showWithSheetView(intentPickerSheet);
                }
            });
        }
    }

分享的button按钮触发弹出分享面板，分享面板可以向上拖曳铺满。  
代码运行初始化：

![Center 1][]

点击分享按钮弹出分享面板：

![Center 2][]

拖曳分享面板向上铺满窗口：

![Center 3][]

附录文章：  
1，《Android自底部平滑向上滑出面板的AndroidSlidingUpPanel》链接地址：[http://blog.csdn.net/zhangphil/article/details/51444509][http_blog.csdn.net_zhangphil_article_details_51444509]  
2，《Android音乐、视频类APP常用控件：DraggablePanel（1）》链接地址：[http://blog.csdn.net/zhangphil/article/details/51566860][http_blog.csdn.net_zhangphil_article_details_51566860]  
3，《Android音乐、视频类APP常用控件：DraggablePanel（2）》链接地址：[http://blog.csdn.net/zhangphil/article/details/51578665][http_blog.csdn.net_zhangphil_article_details_51578665]

[https_github.com_Flipboard_bottomsheet]: https://github.com/Flipboard/bottomsheet
[Center]: https://img-blog.csdn.net/20160628145231675?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: https://img-blog.csdn.net/20160628145442410?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 2]: https://img-blog.csdn.net/20160628145417504?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 3]: https://img-blog.csdn.net/20160628145524754?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[http_blog.csdn.net_zhangphil_article_details_51444509]: http://blog.csdn.net/zhangphil/article/details/51444509
[http_blog.csdn.net_zhangphil_article_details_51566860]: http://blog.csdn.net/zhangphil/article/details/51566860
[http_blog.csdn.net_zhangphil_article_details_51578665]: http://blog.csdn.net/zhangphil/article/details/51578665