QMUI Android框架使用8-使用自身主题样式做出表单界面(添加编辑页面)

QMUI Android框架的官方说,QMUIGroupListView一般用于设置页面,但是官方给出的样例demo仅仅展示了4个样例(显示文本、箭头、开关和加载效果),连最基本的文本编辑框EditView都没有给出样例。

虽然可以使用自定义视图来实现,就是在自定义视图中加载EditText,但是测试下来,页面展示的效果并不好。因为这个QMUICommonListItemView里面的自定义视图是右对齐的,而一般表单界面的输入框都是左对齐。

无奈之下,我们就直接借用QMUI框架自身的属性样式,来手动打造表单输入界面吧。实现的效果如下图所示。


做出的效果,基本上和使用QMUIGroupListView的风格还是比较相似的,主要就是采用了QMUIGroupListView的主题样式。

中间的输入框用的是GridLayout,头部的QMUIGroupListView的Section的Title,直接采用TextView来实现。

基本上都是layout的布局文件,Java的代码很少。在整个布局中,QMUI框架的控件,除了2个按钮是用的官方的,其他都是用原生的控件,只不过用了QMUI的主题风格和样式。

<?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("注册账号");
    }
}

  • 4
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值