系列文章目錄

Android企業級實戰-界面篇-5

計蒙創作不易，未入駐的其他平臺搬運請按協議規則搬運，

文章目錄

系列文章目錄
前言
一、先看看實作的效果
二、實作前準備
- 1.dimens.xml檔案內容（與第一個案例為同檔案）
- 2.ids.xml檔案內容（此案例可用）
- 3.colors.xml檔案內容（此案例可用）
- 4.strings.xml檔案內容（此案例可用）
- 5.back_nav_selector.xml
- 6.shape_detection_input_bg.xml
三、實作
- 1.頂部欄
- 2.頭像與名稱
- 3.資訊輸入欄（一個為例）
- 4.CheckBox+TextView
四.原始碼
注意
總結

前言

有粉絲剛進公司實習，想要個Android直播認證界面的布局，所以出此系列第五篇文章

以下是本篇文章正文內容

一、先看看實作的效果

請添加圖片描述

二、實作前準備

1.dimens.xml檔案內容（與第一個案例為同檔案）

不占字了，請于第一篇自取

2.ids.xml檔案內容（此案例可用）

    <item type="id" name="title_bar"/>
    <item type="id" name="back_icon"/>
    <item type="id" name="apply_info_layout"/>
    <item type="id" name="blog_avtar"/>
    <item type="id" name="tip"/>
    <item type="id" name="nickname"/>
    <item type="id" name="edit_name"/>
    <item type="id" name="edit_id"/>
    <item type="id" name="edit_phone"/>
    <item type="id" name="next"/>
    <item type="id" name="agreement_check"/>
    <item type="id" name="apply_result_layout"/>
    <item type="id" name="auth_tip"/>
    <item type="id" name="confirm"/>
    <item type="id" name="agreement"/>

3.colors.xml檔案內容（此案例可用）

    <color name="jimeng_text_tertiary_light">#ffb2b2b2</color>
    <color name="jimeng_green_light">#ff14c4bc</color>
    <color name="jimeng_gray02">@color/jimeng_text_tertiary_light</color>
    <color name="jimeng_brand_highlight_color">@color/jimeng_green_light</color>
    <color name="jimeng_gray07">@color/jimeng_background_secondary_light</color>
    <color name="jimeng_gray06">@color/jimeng_background_secondary_light</color>
    <color name="jimeng_brand_highlight_color_7f">#7f4eb7ba</color>

4.strings.xml檔案內容（此案例可用）

    <string name="detection_auth">實名認證</string>
    <string name="detection_auth_tip">根據相關規定，你需要通過實名認證才能開啟直播間</string>
    <string name="detection_auth_name_hint">請輸入真實姓名</string>
    <string name="detection_auth_phone_hint">請輸入手機號碼</string>
    <string name="detection_auth_id_hint">請輸入身份證號碼</string>
    <string name="detection_auth_start_facedetection">開始人臉認證</string>
    <string name="detection_agreement">同意《計蒙平臺直播實名認證協議》</string>
    <string name="auth_tip_success">你已通過實名認證</string>

5.back_nav_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/navbar_icon_back_light" />
</selector>

6.shape_detection_input_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
  xmlns:android="http://schemas.android.com/apk/res/android">
    <size android:height="65.0dip" android:width="100.0dip" />
    <solid android:color="@color/jimeng_gray07" />
    <corners android:radius="32.5dip" />
</shape>

三、實作

1.頂部欄

    <RelativeLayout
        android:id="@id/title_bar"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@id/back_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="16.0dip"
            android:src="@drawable/back_nav_selector" />

        <TextView
            android:id="@id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="@string/detection_auth"
            android:textColor="@color/jimeng_black"
            android:textSize="18.0dip" />
    </RelativeLayout>

效果圖如下：
請添加圖片描述

2.頭像與名稱

         <ImageView
                    android:id="@id/blog_avtar"
                    android:layout_width="80.0dip"
                    android:layout_height="80.0dip"
                    android:src="@drawable/venda_default_icon_jimeng"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="24.0dip"
                    android:scaleType="centerCrop" />

                <TextView
                    android:id="@id/nickname"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginLeft="24.0dip"
                    android:layout_marginTop="10.0dip"
                    android:layout_marginRight="24.0dip"
                    android:gravity="center_horizontal"
                    android:text="計蒙不吃魚"
                    android:textColor="@color/jimeng_black"
                    android:textSize="18.0sp" />

效果圖如下：
請添加圖片描述

3.資訊輸入欄（一個為例）

                <EditText
                    android:id="@id/edit_id"
                    android:layout_width="fill_parent"
                    android:layout_height="65.0dip"
                    android:layout_marginLeft="24.0dip"
                    android:layout_marginTop="12.0dip"
                    android:layout_marginRight="24.0dip"
                    android:background="@drawable/shape_detection_input_bg"
                    android:gravity="center_vertical"
                    android:hint="@string/detection_auth_id_hint"
                    android:paddingLeft="24.0dip"
                    android:paddingRight="24.0dip"
                    android:singleLine="true"
                    android:textColor="@color/jimeng_black"
                    android:textColorHint="@color/jimeng_gray03"
                    android:textSize="18.0sp" />

效果圖如下：
請添加圖片描述

4.CheckBox+TextView

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="24.0dip"
                    android:layout_marginTop="24.0dip"
                    android:layout_marginRight="24.0dip"
                    android:gravity="center_vertical"
                    android:orientation="horizontal">

                    <CheckBox
                        android:id="@id/agreement_check"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:checked="false"
                        android:paddingRight="4.0dip" />

                    <TextView
                        android:id="@id/agreement"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:text="@string/detection_agreement"
                        android:textColor="@color/jimeng_gray02"
                        android:textSize="12.0sp" />
                </LinearLayout>

效果圖如下：
請添加圖片描述

四.原始碼

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/jimeng_white">

    <RelativeLayout
        android:id="@id/title_bar"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@id/back_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="16.0dip"
            android:src="@drawable/back_nav_selector" />

        <TextView
            android:id="@id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="@string/detection_auth"
            android:textColor="@color/jimeng_black"
            android:textSize="18.0dip" />
    </RelativeLayout>

    <ScrollView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_below="@id/title_bar"
        android:overScrollMode="never"
        android:scrollbars="none">

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">

            <LinearLayout
                android:id="@id/apply_info_layout"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:orientation="vertical"
                android:visibility="visible">

                <ImageView
                    android:id="@id/blog_avtar"
                    android:layout_width="80.0dip"
                    android:layout_height="80.0dip"
                    android:src="@drawable/venda_default_icon_jimeng"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="24.0dip"
                    android:scaleType="centerCrop" />

                <TextView
                    android:id="@id/nickname"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginLeft="24.0dip"
                    android:layout_marginTop="10.0dip"
                    android:layout_marginRight="24.0dip"
                    android:gravity="center_horizontal"
                    android:text="計蒙不吃魚"
                    android:textColor="@color/jimeng_black"
                    android:textSize="18.0sp" />

                <TextView
                    android:id="@id/tip"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="24.0dip"
                    android:text="@string/detection_auth_tip"
                    android:textColor="@color/jimeng_gray02"
                    android:textSize="13.0sp" />

                <EditText
                    android:id="@id/edit_name"
                    android:layout_width="fill_parent"
                    android:layout_height="65.0dip"
                    android:layout_marginLeft="24.0dip"
                    android:layout_marginTop="24.0dip"
                    android:layout_marginRight="24.0dip"
                    android:background="@drawable/shape_detection_input_bg"
                    android:gravity="center_vertical"
                    android:hint="@string/detection_auth_name_hint"
                    android:paddingLeft="24.0dip"
                    android:paddingRight="24.0dip"
                    android:singleLine="true"
                    android:textColor="@color/jimeng_black"
                    android:textColorHint="@color/jimeng_gray03"
                    android:textSize="18.0sp" />

                <EditText
                    android:id="@id/edit_id"
                    android:layout_width="fill_parent"
                    android:layout_height="65.0dip"
                    android:layout_marginLeft="24.0dip"
                    android:layout_marginTop="12.0dip"
                    android:layout_marginRight="24.0dip"
                    android:background="@drawable/shape_detection_input_bg"
                    android:gravity="center_vertical"
                    android:hint="@string/detection_auth_id_hint"
                    android:paddingLeft="24.0dip"
                    android:paddingRight="24.0dip"
                    android:singleLine="true"
                    android:textColor="@color/jimeng_black"
                    android:textColorHint="@color/jimeng_gray03"
                    android:textSize="18.0sp" />

                <EditText
                    android:id="@id/edit_phone"
                    android:layout_width="fill_parent"
                    android:layout_height="65.0dip"
                    android:layout_marginLeft="24.0dip"
                    android:layout_marginTop="12.0dip"
                    android:layout_marginRight="24.0dip"
                    android:background="@drawable/shape_detection_input_bg"
                    android:gravity="center_vertical"
                    android:hint="@string/detection_auth_phone_hint"
                    android:paddingLeft="24.0dip"
                    android:paddingRight="24.0dip"
                    android:singleLine="true"
                    android:textColor="@color/jimeng_black"
                    android:textColorHint="@color/jimeng_gray03"
                    android:textSize="18.0sp" />

                <TextView
                    android:id="@id/next"
                    android:layout_width="fill_parent"
                    android:layout_height="50.0dip"
                    android:layout_marginLeft="24.0dip"
                    android:layout_marginTop="24.0dip"
                    android:layout_marginRight="24.0dip"
                    android:background="@drawable/selector_apply_info_next_bg"
                    android:enabled="false"
                    android:gravity="center"
                    android:text="@string/detection_auth_start_facedetection"
                    android:textColor="@color/jimeng_gray03"
                    android:textSize="18.0sp" />

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="24.0dip"
                    android:layout_marginTop="24.0dip"
                    android:layout_marginRight="24.0dip"
                    android:gravity="center_vertical"
                    android:orientation="horizontal">

                    <CheckBox
                        android:id="@id/agreement_check"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:checked="false"
                        android:paddingRight="4.0dip" />

                    <TextView
                        android:id="@id/agreement"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:text="@string/detection_agreement"
                        android:textColor="@color/jimeng_gray02"
                        android:textSize="12.0sp" />
                </LinearLayout>
            </LinearLayout>
        </RelativeLayout>
    </ScrollView>
</RelativeLayout>

注意

在此界面可寫一個隱藏的布局，當用戶認證后再進入此界面時將此布局gone，然后顯示已認證的提示布局，

總結

歡迎留言，有疑問可與計蒙進行私聊（看到訊息就回），如希望計蒙更新某界面文章也可私聊，我們下篇文章見，

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/291902.html

標籤：其他

上一篇：二本4年Android經驗，不甘落敗嘗試螞蟻，成功進軍阿里，回饋一波心得體會

下一篇：Flutter 打包教程