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

前言

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

01 实现效果

02 实现前准备

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"?><selector  xmlns: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-list  xmlns: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>

03 实现

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

   <RelativeLayout                android: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">
                <ImageView                    android:id="@id/avator"                    android:layout_width="50.0dip"                    android:layout_height="50.0dip"                    android:layout_centerVertical="true"                    android:src="@drawable/venda_default_icon_jimeng"/>
                <TextView                    android: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" />
                <ImageView                    android: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>

效果图：

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

             <RelativeLayout                android: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">
                <TextView                    android: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" />
                <EditText                    android: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" />
                <ImageButton                    android: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>

效果图：

04 源码

<?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">
    <ScrollView        android: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">
        <LinearLayout            android: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">
            <RelativeLayout                android: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">
                <ImageView                    android:id="@id/avator"                    android:layout_width="50.0dip"                    android:layout_height="50.0dip"                    android:layout_centerVertical="true"                    android:src="@drawable/venda_default_icon_jimeng"/>
                <TextView                    android: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" />
                <ImageView                    android: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>
            <RelativeLayout                android: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">
                <TextView                    android: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" />
                <TextView                    android: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" />
                <ImageButton                    android: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>
            <RelativeLayout                android: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">
                <TextView                    android: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" />
                <EditText                    android: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" />
                <ImageButton                    android: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>
            <RelativeLayout                android: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">
                <TextView                    android: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" />
                <Button                    android: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>
            <RelativeLayout                android: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">
                <TextView                    android: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" />
                <TextView                    android: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>
            <RelativeLayout                android: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">
                <TextView                    android: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" />
                <EditText                    android: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>

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