Android BottomSheet:List列表或Grid网格展示(3)
BottomSheet可以显示多种样式的底部弹出面板风格,比如常见的List列表样式或者Grid网格样式,以一个例子说明。
先写一个布局,该布局作为Activity的布局加载,BottomSheet将从此Activity的底部弹出弹入。布局中只有两个button按钮,分别触发List或者Grid面板:
<?xml version="1.0" encoding="utf-8"?>
<com.flipboard.bottomsheet.BottomSheetLayout xmlns:android="http://schemas.android.com/apk/res/android"
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:gravity="end"
android:orientation="vertical"
android:padding="16dp">
<Button
android:id="@+id/list_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/list_button" />
<Button
android:id="@+id/grid_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/grid_button" />
</LinearLayout>
</com.flipboard.bottomsheet.BottomSheetLayout>
上层Java代码:
package com.flipboard.bottomsheet.sample;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;
import com.flipboard.bottomsheet.BottomSheetLayout;
import com.flipboard.bottomsheet.R;
import com.flipboard.bottomsheet.commons.MenuSheetView;
/**
* Activity demonstrating the use of {@link MenuSheetView}
*/
public class MenuActivity extends AppCompatActivity {
protected BottomSheetLayout bottomSheetLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_menu);
bottomSheetLayout = (BottomSheetLayout) findViewById(R.id.bottomsheet);
bottomSheetLayout.setPeekOnDismiss(true);
findViewById(R.id.list_button).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//显示列表样式菜单
//传入一个MenuSheetView.MenuType.LIST的值,标明弹出面板样式
showMenuSheet(MenuSheetView.MenuType.LIST);
}
});
findViewById(R.id.grid_button).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//弹出网格样式的面板
showMenuSheet(MenuSheetView.MenuType.GRID);
}
});
}
private void showMenuSheet(final MenuSheetView.MenuType menuType) {
MenuSheetView menuSheetView =
new MenuSheetView(MenuActivity.this, menuType, "请选择...", new MenuSheetView.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
Toast.makeText(MenuActivity.this, item.getTitle(), Toast.LENGTH_SHORT).show();
//因为点击了面板中的某一项,关闭这个面板
if (bottomSheetLayout.isSheetShowing()) {
bottomSheetLayout.dismissSheet();
}
//假设用户选择以另外一种方式打开
//则重新切换样式
if (item.getItemId() == R.id.reopen) {
showMenuSheet(menuType == MenuSheetView.MenuType.LIST ? MenuSheetView.MenuType.GRID : MenuSheetView.MenuType.LIST);
}
return true;
}
});
//此处构造展示出来的面板选项条目的数据源
//从menu菜单的数据创建
//类似适配器
menuSheetView.inflateMenu(R.menu.create);
//不要忘记这段代码,否则显示不出来
bottomSheetLayout.showWithSheetView(menuSheetView);
}
}
BottomSheet的数据源是从res/menu/下给出的菜单数据构造item。本例中用到的res/menu/create.xml:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:icon="@mipmap/ic_launcher"
android:title="@string/document" />
<item
android:icon="@mipmap/ic_launcher"
android:title="@string/spreadsheet" />
<item
android:icon="@mipmap/ic_launcher"
android:title="@string/folder" />
<item
android:id="@+id/menu_subheader"
android:title="子菜单">
<menu>
<item
android:id="@+id/navigation_sub_item_1"
android:icon="@mipmap/ic_launcher"
android:title="@string/upload_photos" />
<item
android:id="@+id/navigation_sub_item_2"
android:icon="@mipmap/ic_launcher"
android:title="@string/use_camera" />
</menu>
</item>
<item
android:id="@+id/reopen"
android:icon="@mipmap/ic_launcher"
android:title="@string/reopen" />
</menu>
代码运行结果->
List:
Grid:
附录文章:
1,《Android自底部平滑向上滑出面板的AndroidSlidingUpPanel》链接地址:http://blog.csdn.net/zhangphil/article/details/51444509
2,《Android音乐、视频类APP常用控件:DraggablePanel(1)》链接地址:http://blog.csdn.net/zhangphil/article/details/51566860
3,《Android音乐、视频类APP常用控件:DraggablePanel(2)》链接地址:http://blog.csdn.net/zhangphil/article/details/51578665
4,《Android图片加载与缓存开源框架:Android Glide》链接地址http://blog.csdn.net/zhangphil/article/details/45535693 :
5,《Android BottomSheet:便捷易用的底部滑出面板(1)》链接地址:http://blog.csdn.net/zhangphil/article/details/51775955
6,《Android BottomSheet:以选取图片为例(2)》链接地址:http://blog.csdn.net/zhangphil/article/details/51776408