系列文章目录

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直播认证界面的布局，所以出此系列第五篇文章

以下是本篇文章正文内容

一、先看看实现的效果

Android企业级实战-界面篇-5_移动开发


Android企业级实战-界面篇-5_适配_02


Android企业级实战-界面篇-5_android_03

二、实现前准备

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"?>
<selectorxmlns: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.顶部栏

<RelativeLayoutandroid:id="@id/title_bar"android:layout_width="fill_parent"android:layout_height="wrap_content"><ImageViewandroid:id="@id/back_icon"android:layout_width="wrap_content"android:layout_height="wrap_content"android:padding="16.0dip"android:src="@drawable/back_nav_selector" /><TextViewandroid: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>

效果图如下：

Android企业级实战-界面篇-5_xml_04

2.头像与名称

<ImageViewandroid: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" /><TextViewandroid: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" />

效果图如下：

Android企业级实战-界面篇-5_ui_05

3.信息输入栏（一个为例）

<EditTextandroid: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" />

效果图如下：

Android企业级实战-界面篇-5_移动开发_06

4.CheckBox+TextView

<LinearLayoutandroid: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"><CheckBoxandroid:id="@id/agreement_check"android:layout_width="wrap_content"android:layout_height="wrap_content"android:checked="false"android:paddingRight="4.0dip" /><TextViewandroid: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>

效果图如下：

Android企业级实战-界面篇-5_android_07

四.源码

<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"><RelativeLayoutandroid:id="@id/title_bar"android:layout_width="fill_parent"android:layout_height="wrap_content"><ImageViewandroid:id="@id/back_icon"android:layout_width="wrap_content"android:layout_height="wrap_content"android:padding="16.0dip"android:src="@drawable/back_nav_selector" /><TextViewandroid: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><ScrollViewandroid:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_below="@id/title_bar"android:overScrollMode="never"android:scrollbars="none"><RelativeLayoutandroid:layout_width="fill_parent"android:layout_height="fill_parent"><LinearLayoutandroid:id="@id/apply_info_layout"android:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="vertical"android:visibility="visible"><ImageViewandroid: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" /><TextViewandroid: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" /><TextViewandroid: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" /><EditTextandroid: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" /><EditTextandroid: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" /><EditTextandroid: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" /><TextViewandroid: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" /><LinearLayoutandroid: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"><CheckBoxandroid:id="@id/agreement_check"android:layout_width="wrap_content"android:layout_height="wrap_content"android:checked="false"android:paddingRight="4.0dip" /><TextViewandroid: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，然后显示已认证的提示布局。

总结

欢迎留言，有疑问可与计蒙进行私聊（看到消息就回），如希望计蒙更新某界面文章也可私聊，我们下篇文章见。