QMUIBottomSheet
官网:https://qmuiteam.com/android
GITHUB:https://github.com/QMUI/QMUI_Android
分为两个部分
1.BottomSheet List
2.BottomSheet Grid
显示点击后屏幕下方出现多个item
布局文件bottom_sheet_grid
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="none"
android:clipToPadding="false">
<!-- 只有第一行时会在代码中去掉paddingBottom -->
<LinearLayout
android:id="@+id/bottom_sheet_first_linear_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:paddingLeft="?attr/qmui_bottom_sheet_grid_line_padding_horizontal"
android:paddingRight="?attr/qmui_bottom_sheet_grid_line_padding_horizontal"
android:paddingBottom="?attr/qmui_bottom_sheet_grid_line_vertical_space"
android:orientation="horizontal"/>
</HorizontalScrollView>
QMUIBottomSheetFragment.java
public class QDBottomSheetFragment extends BaseFragment {
@BindView(R.id.topbar)
QMUITopBarLayout mTopBar;
@BindView(R.id.listview)
ListView mListView;
private QDItemDescription mQDItemDescription;
@Override
protected View onCreateView() {
View view = LayoutInflater.from(getActivity()).inflate(R.layout.fragment_listview, null);
ButterKnife.bind(this, view);
mQDItemDescription = QDDataManager.getInstance().getDescription(this.getClass());
initTopBar();
initListView();
return view;
}
private void initTopBar() {
mTopBar.addLeftBackImageButton().setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
popBackStack();
}
});
mTopBar.setTitle(mQDItemDescription.getName());
}
private void initListView() {
String[] listItems = new String[]{
"BottomSheet List",
"BottomSheet Grid"
};
List<String> data = new ArrayList<>();
Collections.addAll(data, listItems);
mListView.setAdapter(new ArrayAdapter<>(getActivity(), R.layout.simple_list_item, data));
mListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
switch (position) {
case 0:
showSimpleBottomSheetList();
break;
case 1:
showSimpleBottomSheetGrid();
break;
}
}
});
}
// ================================ 生成不同类型的BottomSheet
private void showSimpleBottomSheetList() {
new QMUIBottomSheet.BottomListSheetBuilder(getActivity())
.addItem("Item 1")
.addItem("Item 2")
.addItem("Item 3")
.setOnSheetItemClickListener(new QMUIBottomSheet.BottomListSheetBuilder.OnSheetItemClickListener() {
@Override
public void onClick(QMUIBottomSheet dialog, View itemView, int position, String tag) {
dialog.dismiss();
Toast.makeText(getActivity(), "Item " + (position + 1), Toast.LENGTH_SHORT).show();
}
})
.build()
.show();
}
private void showSimpleBottomSheetGrid() {
final int TAG_SHARE_WECHAT_FRIEND = 0;
final int TAG_SHARE_WECHAT_MOMENT = 1;
final int TAG_SHARE_WEIBO = 2;
final int TAG_SHARE_CHAT = 3;
final int TAG_SHARE_LOCAL = 4;
QMUIBottomSheet.BottomGridSheetBuilder builder = new QMUIBottomSheet.BottomGridSheetBuilder(getActivity());
builder.addItem(R.mipmap.icon_more_operation_share_friend, "分享到微信", TAG_SHARE_WECHAT_FRIEND, QMUIBottomSheet.BottomGridSheetBuilder.FIRST_LINE)
.addItem(R.mipmap.icon_more_operation_share_moment, "分享到朋友圈", TAG_SHARE_WECHAT_MOMENT, QMUIBottomSheet.BottomGridSheetBuilder.FIRST_LINE)
.addItem(R.mipmap.icon_more_operation_share_weibo, "分享到微博", TAG_SHARE_WEIBO, QMUIBottomSheet.BottomGridSheetBuilder.FIRST_LINE)
.addItem(R.mipmap.icon_more_operation_share_chat, "分享到私信", TAG_SHARE_CHAT, QMUIBottomSheet.BottomGridSheetBuilder.FIRST_LINE)
.addItem(R.mipmap.icon_more_operation_save, "保存到本地", TAG_SHARE_LOCAL, QMUIBottomSheet.BottomGridSheetBuilder.SECOND_LINE)
.setOnSheetItemClickListener(new QMUIBottomSheet.BottomGridSheetBuilder.OnSheetItemClickListener() {
@Override
public void onClick(QMUIBottomSheet dialog, View itemView) {
dialog.dismiss();
int tag = (int) itemView.getTag();
switch (tag) {
case TAG_SHARE_WECHAT_FRIEND:
Toast.makeText(getActivity(), "分享到微信", Toast.LENGTH_SHORT).show();
break;
case TAG_SHARE_WECHAT_MOMENT:
Toast.makeText(getActivity(), "分享到朋友圈", Toast.LENGTH_SHORT).show();
break;
case TAG_SHARE_WEIBO:
Toast.makeText(getActivity(), "分享到微博", Toast.LENGTH_SHORT).show();
break;
case TAG_SHARE_CHAT:
Toast.makeText(getActivity(), "分享到私信", Toast.LENGTH_SHORT).show();
break;
case TAG_SHARE_LOCAL:
Toast.makeText(getActivity(), "保存到本地", Toast.LENGTH_SHORT).show();
break;
}
}
}).build().show(); }}
HorizontalScrollView
1)HorizontalScrollView水平滚动控件使用方法
1、在layout布局文件的最外层建立一个HorizontalScrollView控件
2、在HorizontalScrollView控件中加入一个LinearLayout控件,并且把它的orientation设置为horizontal
3、在LinearLayout控件中放入多个装有图片的ImageView控件
android:scrollbars="none"与setVerticalScrollBarEnabled(true);的效果是一样的,不活动的时候隐藏,活动的时候也隐藏.
clipChildren是设置子view是否可以超出父view;
clipToPadding是设置是否可以在padding区域内绘制;
从裁剪的角度上讲:clipToPadding是剪裁到自己内边距处,如果clipToPadding为false,还是会剪裁到自己的边框处,而clipChildren是对child view完全不剪裁,只对自己的bg fg剪裁。
QMUIGroupListView
private QDItemDescription mQDItemDescription;
@Override
protected View onCreateView() {
View root = LayoutInflater.from(getActivity()).inflate(R.layout.fragment_grouplistview, null);
ButterKnife.bind(this, root);
mQDItemDescription = QDDataManager.getInstance().getDescription(this.getClass());
initTopBar();
initGroupListView();
return root;
}
private void initTopBar() {
mTopBar.addLeftBackImageButton().setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
popBackStack();
}
});
mTopBar.setTitle(mQDItemDescription.getName());
}
private void initGroupListView() {
QMUICommonListItemView normalItem = mGroupListView.createItemView(
ContextCompat.getDrawable(getContext(), R.mipmap.about_logo),
"Item 1",
null,
QMUICommonListItemView.HORIZONTAL,
QMUICommonListItemView.ACCESSORY_TYPE_NONE);//不显示附属视图
normalItem.setOrientation(QMUICommonListItemView.VERTICAL);
QMUICommonListItemView itemWithDetail = mGroupListView.createItemView(
ContextCompat.getDrawable(getContext(), R.mipmap.example_image0),
"Item 2",
null,
QMUICommonListItemView.HORIZONTAL,
QMUICommonListItemView.ACCESSORY_TYPE_NONE);
itemWithDetail.setDetailText("在右方的详细信息");
QMUICommonListItemView itemWithDetailBelow = mGroupListView.createItemView("Item 3");
itemWithDetailBelow.setOrientation(QMUICommonListItemView.VERTICAL);
itemWithDetailBelow.setDetailText("在标题下方的详细信息");
QMUICommonListItemView itemWithChevron = mGroupListView.createItemView("Item 4");
itemWithChevron.setAccessoryType(QMUICommonListItemView.ACCESSORY_TYPE_CHEVRON);//选中标记
QMUICommonListItemView itemWithSwitch = mGroupListView.createItemView("Item 5");
itemWithSwitch.setAccessoryType(QMUICommonListItemView.ACCESSORY_TYPE_SWITCH);
itemWithSwitch.getSwitch().setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
Toast.makeText(getActivity(), "checked = " + isChecked, Toast.LENGTH_SHORT).show();
}
});
QMUICommonListItemView itemWithCustom = mGroupListView.createItemView("Item 6");
itemWithCustom.setAccessoryType(QMUICommonListItemView.ACCESSORY_TYPE_CUSTOM);
QMUILoadingView loadingView = new QMUILoadingView(getActivity());
itemWithCustom.addAccessoryCustomView(loadingView);
View.OnClickListener onClickListener = new View.OnClickListener() {
@Override
public void onClick(View v) {
if (v instanceof QMUICommonListItemView) {
CharSequence text = ((QMUICommonListItemView) v).getText();
Toast.makeText(getActivity(), text + " is Clicked", Toast.LENGTH_SHORT).show();
}
}
};
int size = QMUIDisplayHelper.dp2px(getContext(), 20);
QMUIGroupListView.newSection(getContext())
.setTitle("Section 1: 默认提供的样式")
.setDescription("Section 1 的描述")
.setLeftIconSize(size, ViewGroup.LayoutParams.WRAP_CONTENT)
.addItemView(normalItem, onClickListener)
.addItemView(itemWithDetail, onClickListener)
.addItemView(itemWithDetailBelow, onClickListener)
.addItemView(itemWithChevron, onClickListener)
.addItemView(itemWithSwitch, onClickListener)
.addTo(mGroupListView);
QMUIGroupListView.newSection(getContext())
.setTitle("Section 2: 自定义右侧 View")
.addItemView(itemWithCustom, onClickListener)
.addTo(mGroupListView);
}
}
QMUIGroupListSectionHeaderFooterView类基本功能:
1.该view继承至LinearLayout,也是一个线性布局。
2.在View视图里面只有一个TextView文本框。通过setText和getText方法来设置文本内容。
3.在使用时,由QMUIGroupListView创建一个Section,由Section通过调用setTitle和setDescription来动态创建一个*QMUIGroupListSectionHeaderFooterView 。new这个对象时,构造函数把值传递进去。
QMUIGroupListSectionHeaderFooterView的3种用法
1.调用QMUIGroupListView的newSection方法创建一个新的section后,再调用setTitle设置标题即可。如果不设置标题,则会默认留空白间距。
QMUIGroupListView.newSection(getContext())
.setTitle("Section 1: 默认提供的样式")
.setDescription("Section 1 的描述")
在头部定义变量mGroupListContact
@BindView(R.id.group_list_item_contact)
QMUIGroupListView mGroupListContact;
QMUICommonListItemView listItemName = mGroupListContact.createItemView("平台名称");
listItemName.setDetailText("CSDN");
listItemName.setAccessoryType(QMUICommonListItemView.ACCESSORY_TYPE_CHEVRON);
QMUIGroupListView.newSection(this)
.setTitle