QMUI-Android
2019-08-13 本文已影响0人
leap_
介绍
QMUI Android 的设计目的是用于辅助快速搭建一个具备基本设计还原效果的 Android 项目,同时利用自身提供的丰富控件及兼容处理,让开发者能专注于业务需求而无需耗费精力在基础代码的设计上。不管是新项目的创建,或是已有项目的维护,均可使开发效率和项目质量得到大幅度提升。
控件效果
9E1A6D1C9071D99E7BB0CB08C0EE7009.jpg
使用
引入库:implementation 'com.qmuiteam:qmui:1.4.0'
配置主题:把项目的 theme 的 parent 指向 QMUI.Compat
QMUIFGroupListView示例QMUIGroupListView
示例代码:
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);
}
这是一个可以自定义item样式的listView,GroupListView,Section,Item,item存放在section中,section存放在groupListView中。
注意GroupListView建议配合ScrollView使用
QMUIFloatLayout示意图QMUIFloatLayout
示意图代码:
// 添加一个item
TextView textView = new TextView(getActivity());
int textViewPadding = QMUIDisplayHelper.dp2px(getContext(), 4);
textView.setPadding(textViewPadding, textViewPadding, textViewPadding, textViewPadding);
textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 14);
textView.setTextColor(ContextCompat.getColor(getContext(), R.color.qmui_config_color_white));
textView.setText(String.valueOf(currentChildCount));
textView.setBackgroundResource(currentChildCount % 2 == 0 ? R.color.app_color_theme_3 : R.color.app_color_theme_6);
int textViewSize = QMUIDisplayHelper.dpToPx(60);
ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(textViewSize, textViewSize);
floatLayout.addView(textView, lp);
// 删除最后一个item
floatLayout.removeView(floatLayout.getChildAt(floatLayout.getChildCount() - 1));
// 设置item的gravity
mFloatLayout.setGravity(Gravity.RIGHT);
// 设置item的行数
mFloatLayout.setMaxLines(1);