QMUI Android框架使用8-使用自身主題樣式做出表單介面（新增編輯頁面）
阿新 • • 發佈：2019-02-08
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("註冊賬號"); } }