QMUI Android框架使用8-使用自身主题样式作出表单界面（添加编辑页面）
QMUI Android框架的官方说，QMUIGroupListView通常用于设置页面，可是官方给出的样例demo仅仅展现了4个样例（显示文本、箭头、开关和加载效果），连最基本的文本编辑框EditView都没有给出样例。html
虽然能够使用自定义视图来实现，就是在自定义视图中加载EditText，可是测试下来，页面展现的效果并很差。由于这个QMUICommonListItemView里面的自定义视图是右对齐的，而通常表单界面的输入框都是左对齐。java
无奈之下，咱们就直接借用QMUI框架自身的属性样式，来手动打造表单输入界面吧。实现的效果以下图所示。android
作出的效果，基本上和使用QMUIGroupListView的风格仍是比较类似的，主要就是采用了QMUIGroupListView的主题样式。app
中间的输入框用的是GridLayout，头部的QMUIGroupListView的Section的Title，直接采用TextView来实现。框架
基本上都是layout的布局文件，Java的代码不多。在整个布局中，QMUI框架的控件，除了2个按钮是用的官方的，其余都是用原生的控件，只不过用了QMUI的主题风格和样式。ide
<?xml version="1.0" encoding="utf-8"?><!--
~ *************************************************************
~ 文件：activity_grid_layout.xml 模块：app 项目：QMUI_Practise
~ 当前修改时间：2018年06月20日 23:50:32
~ 上次修改时间：2018年06月20日 23:31:26
~ 做者：大路
~ Copyright (c) 2018
~ *************************************************************
-->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/app_primary_color"
android:fitsSystemWindows="true"
android:orientation="vertical"
tools:context=".GridLayoutActivity">
<com.qmuiteam.qmui.widget.QMUITopBar
android:id="@+id/topbar"
android:layout_width="match_parent"
android:layout_height="?attr/qmui_topbar_height" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/qmui_config_color_background">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--注册标题文字-->
<TextView
android:id="@+id/textview_validateinfo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="@dimen/qmui_group_list_section_header_footer_padding_vertical"
android:paddingLeft="?attr/qmui_content_padding_horizontal"
android:paddingRight="?attr/qmui_content_padding_horizontal"
android:paddingTop="@dimen/qmui_group_list_section_header_footer_padding_vertical"
android:text="注册帐号"
android:textColor="?attr/qmui_config_color_gray_3"
android:textSize="@dimen/qmui_group_list_section_header_footer_text_size" />
<!--边框分割细线-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@drawable/qmui_s_list_item_bg_with_border_bottom" />
<!--帐户、手机号、密码输入框-->
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/qmui_config_color_white"
android:columnCount="2"
android:focusable="true"
android:focusableInTouchMode="true">
<!--帐号-->
<TextView
android:layout_width="wrap_content"
android:layout_height="@dimen/qmui_list_item_height"
android:layout_gravity="fill_horizontal"
android:background="@drawable/qmui_s_list_item_bg_with_border_bottom"
android:gravity="center_vertical"
android:paddingLeft="@dimen/common_content_spacing"
android:paddingRight="@dimen/common_content_spacing"
android:text="帐号"
android:textColor="?attr/qmui_config_color_gray_1"
android:textSize="?attr/qmui_common_list_item_title_h_text_size" />
<!--帐号输入框-->
<EditText
android:id="@+id/edittext_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:background="@drawable/qmui_divider_bottom_bitmap"
android:hint="请输入2到20位字符"
android:maxLength="20"
android:textColor="?attr/qmui_config_color_gray_5"
android:textSize="?attr/qmui_common_list_item_detail_h_text_size" />
<!--手机号-->
<TextView
android:layout_width="wrap_content"
android:layout_height="@dimen/qmui_list_item_height"
android:background="@drawable/qmui_s_list_item_bg_with_border_bottom"
android:gravity="center_vertical"
android:paddingLeft="@dimen/common_content_spacing"
android:paddingRight="@dimen/common_content_spacing"
android:text="手机号"
android:textColor="?attr/qmui_config_color_gray_1"
android:textSize="?attr/qmui_common_list_item_title_h_text_size" />
<!--手机号输入框-->
<EditText
android:id="@+id/edittext_phonenumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:background="@drawable/qmui_divider_bottom_bitmap"
android:hint="请输入11位手机号"
android:inputType="phone"
android:maxLength="11"
android:textColor="?attr/qmui_config_color_gray_5"
android:textSize="?attr/qmui_common_list_item_detail_h_text_size" />
<!--验证码-->
<TextView
android:layout_width="wrap_content"
android:layout_height="@dimen/qmui_list_item_height"
android:background="@drawable/qmui_s_list_item_bg_with_border_bottom"
android:gravity="center_vertical"
android:paddingLeft="@dimen/common_content_spacing"
android:paddingRight="@dimen/common_content_spacing"
android:text="验证码"
android:textColor="?attr/qmui_config_color_gray_1"
android:textSize="?attr/qmui_common_list_item_title_h_text_size" />
<!--验证码输入框-->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:gravity="center_vertical"
android:orientation="horizontal">
<!--验证码输入框-->
<EditText
android:id="@+id/edittext_verifycode"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="2"
android:background="@drawable/qmui_divider_bottom_bitmap"
android:hint="4位数字验证码"
android:inputType="number"
android:maxLength="4"
android:textColor="?attr/qmui_config_color_gray_5"
android:textSize="?attr/qmui_common_list_item_detail_h_text_size" />
<com.qmuiteam.qmui.widget.roundwidget.QMUIRoundButton
android:id="@+id/button_getverifycode"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_weight="1"
android:clickable="true"
android:gravity="center"
android:padding="5dp"
android:text="获取验证码"
android:textSize="?attr/qmui_common_list_item_title_h_text_size"
app:qmui_radius="4dp" />
</LinearLayout>
<!--密码-->
<TextView
android:layout_width="wrap_content"
android:layout_height="@dimen/qmui_list_item_height"
android:layout_gravity="fill_horizontal"
android:background="@drawable/qmui_s_list_item_bg_with_border_bottom"
android:gravity="center_vertical"
android:paddingLeft="@dimen/common_content_spacing"
android:paddingRight="@dimen/common_content_spacing"
android:text="密码"
android:textColor="?attr/qmui_config_color_gray_1"
android:textSize="?attr/qmui_common_list_item_title_h_text_size" />
<!--密码输入框-->
<EditText
android:id="@+id/edittext_password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:background="@drawable/qmui_divider_bottom_bitmap"
android:hint="请输入6到20位密码"
android:maxLength="20"
android:inputType="textPassword"
android:textColor="?attr/qmui_config_color_gray_5"
android:textSize="?attr/qmui_common_list_item_detail_h_text_size" />
</GridLayout>
<!--注册按钮位置-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/qmui_config_color_white"
android:orientation="horizontal"
android:padding="@dimen/common_content_spacing">
<Space
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<com.qmuiteam.qmui.widget.roundwidget.QMUIRoundButton
android:id="@+id/button_register"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2"
android:clickable="true"
android:gravity="center"
android:padding="10dp"
android:text="注册帐号"
android:textSize="?attr/qmui_common_list_item_title_h_text_size"
app:qmui_isRadiusAdjustBounds="true" />
<Space
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
代码部分，主要就是设置标题。这个能够参考QMUI官方的demo代码。布局
public class GridLayoutActivity extends Activity {
@BindView(R.id.topbar) QMUITopBar mTopBar;
final String TAG = getClass().getSimpleName();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// 沉浸式状态栏
QMUIStatusBarHelper.translucent(this);
View root = LayoutInflater.from(this).inflate(R.layout.activity_grid_layout, null);
ButterKnife.bind(this, root);
//初始化状态栏
initTopBar();
setContentView(root);
}
private void initTopBar() {
mTopBar.addLeftBackImageButton().setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
mTopBar.setTitle("注册帐号");
}
}