文章目录

Android企业级实战-界面篇-4

计蒙创作不易，未入驻的其他平台搬运请按协议规则搬运。


文章目录

  • 文章目录
  • 前言
  • 一、先看看实现的效果
  • 二、实现前准备
  • 1.dimens.xml文件内容（与第一个案例为同文件）
  • 2.ids.xml文件内容（此案例可用）
  • 3.colors.xml文件内容（此案例可用）
  • 4.ic_arrows_selector.xml
  • 5.edit_bottom_line_bg.xml
  • 三、实现
  • 1.修改图片区域（一个为例）
  • 2.个人信息部分（一个为例）
  • 四、源码
  • 总结


前言

发表了此系列第三篇文章后，想了好久写什么界面，决定写一篇编辑个人资料的界面文章

以下是本篇文章正文内容
提示：此文章部分工具类需借鉴第一，二，三篇文章。

一、先看看实现的效果

Android企业级实战-界面篇-4_ui


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


Android企业级实战-界面篇-4_适配_03


二、实现前准备

1.dimens.xml文件内容（与第一个案例为同文件）

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

2.ids.xml文件内容（此案例可用）

<!--编辑个人资料    --><item type="id" name="bs_scrollview"/><item type="id" name="avator_line"/><item type="id" name="avator"/><item type="id" name="right_arrow"/><item type="id" name="id_line"/><item type="id" name="nick_line"/><item type="id" name="container"/><item type="id" name="id_clear_btn"/><item type="id" name="id_hint"/><item type="id" name="id_edit"/><item type="id" name="nick_clear_btn"/><item type="id" name="avator_edit_hint"/><item type="id" name="nick_hint"/><item type="id" name="nick_edit"/><item type="id" name="gender_line"/><item type="id" name="gender_hint"/><item type="id" name="gender_edit"/><item type="id" name="birth_hint"/><item type="id" name="birth_edit"/><item type="id" name="desc_hint"/><item type="id" name="desc_edit"/><item type="id" name="birth_line"/><item type="id" name="desc_line"/>

3.colors.xml文件内容（此案例可用）

<!-- 编辑个人资料--><color name="color_f8f8f8">#fff8f8f8</color><color name="color_eeeeee">#ffeeeeee</color><color name="color_999999">#ff999999</color><color name="color_333333">#ff333333</color>

4.ic_arrows_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selectorxmlns:android="http://schemas.android.com/apk/res/android"><item android:state_pressed="true" android:drawable="@drawable/ic_arrows_hover" /><item android:drawable="@drawable/ic_arrows" />
</selector>

5.edit_bottom_line_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-listxmlns:android="http://schemas.android.com/apk/res/android"><item><shape android:shape="rectangle"><solid android:color="@android:color/transparent" /><stroke android:width="1.0px" android:color="@color/color_dddddd" /></shape></item><item android:bottom="1.0px"><shape><solid android:color="@color/color_f8f8f8" /><padding android:bottom="1.0px" /></shape></item>
</layer-list>

三、实现

1.修改图片区域（一个为例）

<RelativeLayoutandroid:id="@id/avator_line"android:layout_width="fill_parent"android:layout_height="80.0dip"android:layout_marginTop="20.0dip"android:layout_marginBottom="20.0dip"android:background="@color/color_f8f8f8"android:focusable="true"android:orientation="horizontal"android:paddingLeft="15.0dip"><ImageViewandroid:id="@id/avator"android:layout_width="50.0dip"android:layout_height="50.0dip"android:layout_centerVertical="true"android:src="@drawable/venda_default_icon_jimeng"/><TextViewandroid:id="@id/avator_edit_hint"android:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_marginLeft="15.0dip"android:layout_toRightOf="@id/avator"android:gravity="center"android:text="编辑头像"android:textColor="@color/color_999999"android:textSize="16.0dip" /><ImageViewandroid:id="@id/right_arrow"android:layout_width="40.0dip"android:layout_height="40.0dip"android:layout_alignParentRight="true"android:layout_centerVertical="true"android:paddingLeft="15.0dip"android:paddingRight="15.0dip"android:src="@drawable/ic_arrows_selector" /></RelativeLayout>

效果图：

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

2.个人信息部分（一个为例）

<RelativeLayoutandroid:id="@id/nick_line"android:layout_width="fill_parent"android:layout_height="50.0dip"android:background="@color/color_f8f8f8"android:paddingLeft="15.0dip"android:paddingRight="15.0dip"><TextViewandroid:id="@id/nick_hint"android:layout_width="62.0dip"android:layout_height="fill_parent"android:gravity="center|left"android:text="昵称"android:textColor="@color/color_999999"android:textSize="16.0dip" /><EditTextandroid:id="@id/nick_edit"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_toRightOf="@id/nick_hint"android:background="@drawable/edit_bottom_line_bg"android:ellipsize="end"android:gravity="center|left"android:inputType="textAutoCorrect|textCapSentences"android:maxLength="30"android:paddingRight="25.0dip"android:singleLine="true"android:text="计蒙不吃鱼"android:textColor="@color/color_333333"android:textSize="16.0dip" /><ImageButtonandroid:id="@id/nick_clear_btn"android:layout_width="45.0dip"android:layout_height="45.0dip"android:layout_alignParentRight="true"android:layout_gravity="center_vertical"android:layout_marginRight="-10.0dip"android:background="@null"android:src="@drawable/search_common_clear"android:visibility="gone" /></RelativeLayout>

效果图

Android企业级实战-界面篇-4_xml_05

四、源码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"android:background="@color/color_f8f8f8"android:orientation="vertical"><ScrollViewandroid:id="@id/bs_scrollview"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_marginTop="44.0dip"android:background="@color/color_eeeeee"android:fadingEdge="none"><LinearLayoutandroid:id="@id/container"android:layout_width="fill_parent"android:layout_height="wrap_content"android:focusable="true"android:focusableInTouchMode="true"android:gravity="center_vertical"android:orientation="vertical"><RelativeLayoutandroid:id="@id/avator_line"android:layout_width="fill_parent"android:layout_height="80.0dip"android:layout_marginTop="20.0dip"android:layout_marginBottom="20.0dip"android:background="@color/color_f8f8f8"android:focusable="true"android:orientation="horizontal"android:paddingLeft="15.0dip"><ImageViewandroid:id="@id/avator"android:layout_width="50.0dip"android:layout_height="50.0dip"android:layout_centerVertical="true"android:src="@drawable/venda_default_icon_jimeng"/><TextViewandroid:id="@id/avator_edit_hint"android:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_marginLeft="15.0dip"android:layout_toRightOf="@id/avator"android:gravity="center"android:text="编辑头像"android:textColor="@color/color_999999"android:textSize="16.0dip" /><ImageViewandroid:id="@id/right_arrow"android:layout_width="40.0dip"android:layout_height="40.0dip"android:layout_alignParentRight="true"android:layout_centerVertical="true"android:paddingLeft="15.0dip"android:paddingRight="15.0dip"android:src="@drawable/ic_arrows_selector" /></RelativeLayout><RelativeLayoutandroid:id="@id/id_line"android:layout_width="fill_parent"android:layout_height="50.0dip"android:background="@color/color_f8f8f8"android:paddingLeft="15.0dip"android:paddingRight="15.0dip"><TextViewandroid:id="@id/id_hint"android:layout_width="62.0dip"android:layout_height="fill_parent"android:gravity="center|left"android:text="ID"android:textColor="@color/color_999999"android:textSize="16.0dip" /><TextViewandroid:id="@id/id_edit"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_toRightOf="@id/id_hint"android:background="@drawable/edit_bottom_line_bg"android:gravity="center|left"android:maxLength="50"android:paddingRight="25.0dip"android:singleLine="true"android:text="jimengbuchiyu"android:textColor="@color/color_999999"android:textSize="16.0dip" /><ImageButtonandroid:id="@id/id_clear_btn"android:layout_width="45.0dip"android:layout_height="45.0dip"android:layout_alignParentRight="true"android:layout_gravity="center_vertical"android:layout_marginRight="-10.0dip"android:background="@null"android:src="@drawable/search_common_clear"android:visibility="gone" /></RelativeLayout><RelativeLayoutandroid:id="@id/nick_line"android:layout_width="fill_parent"android:layout_height="50.0dip"android:background="@color/color_f8f8f8"android:paddingLeft="15.0dip"android:paddingRight="15.0dip"><TextViewandroid:id="@id/nick_hint"android:layout_width="62.0dip"android:layout_height="fill_parent"android:gravity="center|left"android:text="昵称"android:textColor="@color/color_999999"android:textSize="16.0dip" /><EditTextandroid:id="@id/nick_edit"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_toRightOf="@id/nick_hint"android:background="@drawable/edit_bottom_line_bg"android:ellipsize="end"android:gravity="center|left"android:inputType="textAutoCorrect|textCapSentences"android:maxLength="30"android:paddingRight="25.0dip"android:singleLine="true"android:text="计蒙不吃鱼"android:textColor="@color/color_333333"android:textSize="16.0dip" /><ImageButtonandroid:id="@id/nick_clear_btn"android:layout_width="45.0dip"android:layout_height="45.0dip"android:layout_alignParentRight="true"android:layout_gravity="center_vertical"android:layout_marginRight="-10.0dip"android:background="@null"android:src="@drawable/search_common_clear"android:visibility="gone" /></RelativeLayout><RelativeLayoutandroid:id="@id/gender_line"android:layout_width="fill_parent"android:layout_height="50.0dip"android:background="@color/color_f8f8f8"android:paddingLeft="15.0dip"android:paddingRight="15.0dip"><TextViewandroid:id="@id/gender_hint"android:layout_width="62.0dip"android:layout_height="fill_parent"android:gravity="center|left"android:text="性别"android:textColor="@color/color_999999"android:textSize="16.0dip" /><Buttonandroid:id="@id/gender_edit"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_toRightOf="@id/gender_hint"android:background="@drawable/edit_bottom_line_bg"android:gravity="center|left"android:text="男"android:textColor="@color/color_333333"android:textSize="16.0dip" /></RelativeLayout><RelativeLayoutandroid:id="@id/birth_line"android:layout_width="fill_parent"android:layout_height="50.0dip"android:background="@color/color_f8f8f8"android:paddingLeft="15.0dip"android:paddingRight="15.0dip"><TextViewandroid:id="@id/birth_hint"android:layout_width="62.0dip"android:layout_height="fill_parent"android:gravity="center|left"android:text="生日"android:textColor="@color/color_999999"android:textSize="16.0dip" /><TextViewandroid:id="@id/birth_edit"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_toRightOf="@id/birth_hint"android:background="@drawable/edit_bottom_line_bg"android:gravity="center|left"android:text="2000-06-12"android:textColor="@color/color_333333"android:textSize="16.0dip" /></RelativeLayout><RelativeLayoutandroid:id="@id/desc_line"android:layout_width="fill_parent"android:layout_height="fill_parent"android:background="@color/color_f8f8f8"android:orientation="horizontal"android:paddingLeft="15.0dip"android:paddingRight="15.0dip"android:paddingBottom="20.0dip"><TextViewandroid:id="@id/desc_hint"android:layout_width="62.0dip"android:layout_height="fill_parent"android:layout_marginTop="16.0dip"android:gravity="center|left|top"android:text="介绍"android:textColor="@color/color_999999"android:textSize="16.0dip" /><EditTextandroid:id="@id/desc_edit"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_toRightOf="@id/desc_hint"android:background="@color/color_f8f8f8"android:gravity="center|left|top"android:maxLength="500"android:minHeight="150.0dip"android:paddingTop="16.0dip"android:singleLine="false"android:text="拥有自己的节奏...公众号：计蒙不吃鱼"android:textColor="@color/color_333333"android:textSize="16.0dip" /></RelativeLayout></LinearLayout></ScrollView>
</RelativeLayout>

总结

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