背景
当Xml布局被多次拷贝时，不利于模块化开发。对此我们希望屏蔽UI层繁杂逻辑，只关注于业务。
目标
- 面向接口，实现UI组件的调用接口模式，并提供完整示例。
- 指令式，一行代码一个UI显示，回调式响应。
- 参数化，尽可能提供高的扩展性，迎合产品迭代。
- 主题化，全局样式，一改全改。
项目
/doc 使用文档
/component_ui 调用接口层，使用示例
/lib 实现层
设计
- 全局样式定义，参见资源标准/doc/Component-UI-1-Standard
- 为扩展，多数组件以inflate形式，使用同<include layout=""/>标签，直接findViewById(...)、setOnClickListener(...)。详见属性-Id参照表。
- findViewById(int id)方法为顺序遍历View树，find第一个id并返回；若Xml布局中同一层级包含同类组件G1、G2(内部id相同)，对G2中某View C1设置点击事件G2.findViewById(R.id.c1).setOnClickListener(...)，如此设置。
效果图
|
|
component-ui-title.png
|
component-ui-ds.gif
|
component-ui-row.png
|
component-ui-tab.gif
|
component-ui-alert.gif
|
component-ui-sheet.gif
|
component-ui-status.png
|
component-ui-button.png
|
=== TitleLayout标题栏使用 ===
1. Xml布局中添加
<com.d.lib.common.view.TitleLayout
android:id="@+id/tl_title"
android:layout_width="match_parent"
android:layout_height="@dimen/lib_pub_dimen_title_height"
android:background="@color/lib_pub_color_main"
app:lib_pub_tl_leftDrawable="@drawable/lib_pub_ic_title_back"
app:lib_pub_tl_middleText="Title" />
2. 方法
1).findViewById(...)
2).setOnClickListener(...)
3).setVisibility(int resId, int visibility)
4).setText(int resId, CharSequence text)
5).setOnClickListener(int resId, OnClickListener l)
3. 对照表(属性-Id)
| Attrs |
Id |
| lib_pub_tl_leftText |
tv_title_left |
| lib_pub_tl_leftDrawable |
iv_title_left |
| lib_pub_tl_leftRes |
reference |
| lib_pub_tl_rightText |
tv_title_right |
| lib_pub_tl_rightDrawable |
iv_title_right |
| lib_pub_tl_rightRes |
reference |
| lib_pub_tl_middleText |
tv_title_title |
| lib_pub_tl_middleDrawable |
iv_title_middle |
| lib_pub_tl_middleRes |
reference |
=== DSLayout默认态使用 ===
1. Xml布局中添加
<com.d.lib.common.view.DSLayout
android:id="@+id/dsl_ds"
android:layout_width="match_parent"
android:layout_height="match_parent" />
2. 设置默认态
1).dslDs.setState(DSLayout.STATE_LOADING);
------DSLayout.GONE：隐藏默认态
------DSLayout.STATE_LOADING：正在加载...
------DSLayout.STATE_EMPTY：暂无数据
------DSLayout.STATE_NET_ERROR：网络错误
3. 更改默认内容（可选）
dslDs.setState(DSLayout.STATE_NET_ERROR)
.icon(R.drawable.ic_net_failed)
.desc("暂无网络")
.button("点击重试",View.VISIBLE);
------------ 对照表(Func-Desc) -----------
.gif(...) | 加载Gif图：本地或网络
.icon(...) | 加载Png图: 本地或网络
.desc(...) | 状态描述内容
.button(...) | 按钮文本内容、按钮是否显示
4. 矫正垂直比例（可选，默认垂直居中）
| Attrs |
Description |
| lib_pub_dsl_adjustHeightT |
顶部矫正高度 |
| lib_pub_dsl_adjustHeightB |
底部矫正高度 |
5. 替换默认布局样式（可选）
1).拷贝 R.layout.layout_ds 为 R.layout.layout_ds_style_custom，
2).仅允许更改属性（大小、相对位置、色值、背景等），禁止更改id、布局结构
3).app:lib_pub_dsl_layout="@layout/layout_dsl_style_custom"
=== RowLayout设置行使用 ===
1. Xml布局中添加
<com.d.lib.common.view.RowLayout
android:id="@+id/rl_row"
android:layout_width="match_parent"
android:layout_height="@dimen/lib_pub_dimen_row_height"
android:background="@color/lib_pub_color_bg_main"
app:lib_pub_rl_gotoVisibility="visible"
app:lib_pub_rl_icon="@color/lib_pub_color_red"
app:lib_pub_rl_text="@string/component_ui_dialog_title"
app:lib_pub_rl_toggleVisibility="gone" />
2. 设置文本内容(app:lib_pub_rl_text)
1).rlRow.setText("content");
3. 设置红点文本内容
rlRow.setNumber("9", View.VISIBLE)
4. Toggle按钮(app:lib_pub_rl_toggleVisibility)
1).setOpen() ------设置开闭
2).isOpen() ------开闭状态
3).setOnToggleListener() ------监听toggle开闭状态
=== Tab使用 ===
一、SegementView
1. Xml布局中添加
<com.d.lib.common.view.SegementView
android:id="@+id/sv_tab"
android:layout_width="match_parent"
android:layout_height="27dp"
android:layout_marginTop="@dimen/lib_pub_dimen_margin"
app:lib_pub_segementv_borderWidth="1dp"
app:lib_pub_segementv_colorMain="@color/lib_pub_color_main"
app:lib_pub_segementv_colorSub="@color/lib_pub_color_white"
app:lib_pub_segementv_divideWidth="1dp"
app:lib_pub_segementv_radius="4dp"
app:lib_pub_segementv_textSize="@dimen/lib_pub_dimen_text_small"
app:lib_pub_segementv_titles="标签一;标签二;标签三;标签四" />
2. 方法
1).setTitle(String[] title)
2).select(int index)
3).setOnSelectedListener(OnSelectedListener listener)
二、ScrollTab
1. Xml布局中添加
<com.d.lib.common.view.tab.ScrollTab
android:id="@+id/stab_tab"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginTop="@dimen/lib_pub_dimen_margin"
android:background="#F9F9F9"
android:orientation="vertical"
app:lib_pub_stab_avag="true"
app:lib_pub_stab_indicatorColor="@color/lib_pub_color_main"
app:lib_pub_stab_indicatorRadius="0dp"
app:lib_pub_stab_indicatorType="none"
app:lib_pub_stab_indicatorWeight="2dp"
app:lib_pub_stab_indicatorWidth="65dp"
app:lib_pub_stab_titles="@string/component_ui_labels"
app:lib_pub_stab_type="view_group" />
2. 方法
1).setTitles(List<String> ts)
2).setViewPager(ViewPager viewPager)
3).setNumber(int position, String text, int visibility)
4).setOnTabListener(OnTabListener l)
=== Alert使用 ===
1. Loading...
AlertDialogFactory.createFactory(activity).getLoadingDialog("Loading...");
2. AlertDialog
AlertDialogFactory.createFactory(activity).getAlertDialog("Title",
"Content",
"Ok", "Cancel",
new AlertDialogFactory.OnClickListener() {
@Override
public void onClick(AlertDialog dlg, View v) {
}
}, new AlertDialogFactory.OnClickListener() {
@Override
public void onClick(AlertDialog dlg, View v) {
}
});
3. AlertSubDialog
AlertDialogFactory.createFactory(activity).getAlertSubDialog("Title",
"Content",
"Sub tips",
true, new AlertSubDialog.OnCheckListener() {
@Override
public void onSubmit(Dialog dlg, boolean isChecked) {
}
@Override
public void onCancel(Dialog dlg) {
}
});
4. EditDialog
AlertDialogFactory.createFactory(activity).getEditDialog("Title",
"Content",
new EditDialog.OnEditListener() {
@Override
public void onSubmit(Dialog dlg, String content) {
}
@Override
public void onCancel(Dialog dlg) {
}
});
5. InfoDialog
AlertDialogFactory.createFactory(activity).getInfoDialog("Title",
Arrays.asList(new InfoDialog.Bean("1", "" + 1111111),
new InfoDialog.Bean("2", "" + 2222222),
new InfoDialog.Bean("3", "" + 3333333),
new InfoDialog.Bean("4", "" + 4444444),
new InfoDialog.Bean("5", "" + 5555555)));
6. OperationDialog
AlertDialogFactory.createFactory(activity).getOperationDialog("Content",
Arrays.asList(new OperationDialog.Bean("普通操作1", R.color.lib_pub_color_main, false),
new OperationDialog.Bean("普通操作2", R.color.lib_pub_color_main, false)),
new AbsSheetDialog.OnItemClickListener() {
@Override
public void onClick(Dialog dlg, int position, String item) {
}
@Override
public void onCancel(Dialog dlg) {
}
});
=== Sheet使用 ===
1. BottomVerDialog
AlertDialogFactory.createFactory(this).getBottomVerDialog("告知当前状态，信息和解决方案单行",
Arrays.asList(new BottomVerSheetDialog.Bean("普通操作1", R.color.lib_pub_color_text_main, false),
new BottomVerSheetDialog.Bean("普通操作2", R.color.lib_pub_color_text_main, false),
new BottomVerSheetDialog.Bean("普通操作3", R.color.lib_pub_color_text_main, false),
new BottomVerSheetDialog.Bean("危险操作", R.color.lib_pub_color_red, false),
new BottomVerSheetDialog.Bean("不可用操作", R.color.lib_pub_color_text_hint, false)),
new AbsSheetDialog.OnItemClickListener() {
@Override
public void onClick(Dialog dlg, int position, String item) {
}
@Override
public void onCancel(Dialog dlg) {
}
});
2. BottomHorDialog
AlertDialogFactory.createFactory(this).getBottomHorDialog("分享",
Arrays.asList(new BottomHorSheetDialog.Bean("QQ", R.drawable.lib_pub_circle_msg_number),
new BottomHorSheetDialog.Bean("微信", R.drawable.lib_pub_circle_msg_number),
new BottomHorSheetDialog.Bean("朋友圈", R.drawable.lib_pub_circle_msg_number),
new BottomHorSheetDialog.Bean("微博", R.drawable.lib_pub_circle_msg_number),
new BottomHorSheetDialog.Bean("短信", R.drawable.lib_pub_circle_msg_number)),
new AbsSheetDialog.OnItemClickListener() {
@Override
public void onClick(Dialog dlg, int position, String item) {
}
@Override
public void onCancel(Dialog dlg) {
}
});
3. BottomShareDialog
AlertDialogFactory.createFactory(this).getBottomShareDialog("文件名",
Arrays.asList(new BottomShareSheetDialog.Bean("链接地址: ", "https://www.baidu.com/link?url=eZH1yw2u1h-CNrpm7Q3jD_EfVnUxwUuBHlTGhLlA_KfhwtG0TGSl4a7kPsJNMqE8&wd=&eqid=f50ccdfc00009400000000065b232f14"),
new BottomShareSheetDialog.Bean("提取密码: ", "3854", false)));
=== Popup使用 ===
1. MenuPopup
PopupWindowFactory.createFactory(this)
.getMenuPopup(Arrays.asList(new MenuPopup.Bean("添加", R.color.lib_pub_color_text_hint, false),
new MenuPopup.Bean("删除", R.color.lib_pub_color_main, false)), new MenuPopup.OnMenuListener() {
@Override
public void onClick(PopupWindow popup, int position, String item) {
}
}).showAsDropDown(ivMenu);
=== NoticeLayout使用 ===
1.Xml布局中添加
<com.d.lib.common.view.NoticeLayout
android:id="@+id/notice_tips"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginLeft="@dimen/lib_pub_dimen_margin"
android:layout_marginRight="@dimen/lib_pub_dimen_margin"
app:lib_pub_noticel_exitVisibility="gone"
app:lib_pub_noticel_gotoVisibility="visible"
app:lib_pub_noticel_text="@string/component_ui_notice_type1" />
2. 方法
1).findViewById(...)
2).setOnClickListener(...)
3).setVisibility(int resId, int visibility)
4).setText(int resId, CharSequence text)
5).setOnClickListener(int resId, OnClickListener l)
=== NoticeLayout使用 ===
1. Xml布局中添加
<com.d.lib.common.view.BadgeView
android:id="@+id/bv_badge"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:gravity="center"
android:minWidth="20dp"
android:paddingLeft="4dp"
android:paddingRight="4dp"
android:textColor="@color/lib_pub_color_white"
android:textSize="10dp"
app:lib_pub_badgev_color="@color/lib_pub_color_red" />
2. 方法
1).setText(CharSequence text)
2).setTextAdj(CharSequence text)
3. 对照表(属性-描述)
| Attrs |
Description |
| lib_pub_badgev_color |
角标背景色 |
| lib_pub_badgev_circle |
是否限定圆形 |
| lib_pub_badgev_radius |
椭圆圆角弧度 |
| lib_pub_badgev_max |
最大显示限定数 |
