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

最新推荐文章于 2024-07-25 16:09:50 发布
最新推荐文章于 2024-07-25 16:09:50 发布
阅读量3k 收藏 6
点赞数 23
分类专栏： Android项目实战-界面集（互联网大厂项目UI解析） 文章标签： android 移动开发 ui 适配
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42761395/article/details/118997131
版权

文章目录

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

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

文章目录

前言

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

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

一、先看看实现的效果

请添加图片描述
请添加图片描述
请添加图片描述

二、实现前准备

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>

三、实现

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>

效果图
请添加图片描述

四、源码

<?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>

总结

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

计蒙不吃鱼
关注
  • 23
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 27
    评论
专栏目录
Android Color（颜色）解析
Z·Pan
05-10 1万+
颜色的多种表达方式，在做一个新项目准备的时候，一定要考虑好颜色的统一管理，省的后面给自己或者给后来者找麻烦。
仿新浪微博客户端--界面设计（1），阿里、百度、美团、携程、蚂蚁面经分享
2301_78398209的博客
03-28 701
写到这里也结束了，在文章最后放上一个小小的福利，以下为小编自己在学习过程中整理出的一个关于Flutter的学习思路及方向，从事互联网开发，最主要的是要学好技术，而学习技术是一条慢长而艰苦的道路，不能靠一时激情，也不是熬几天几夜就能学好的，必须养成平时努力学习的习惯，更加需要准确的学习方向达到有效的学习效果。由于内容较多就只放上一个大概的大纲，需要更及详细的学习思维导图的。
Duilib使用---颜色配置
积累点滴，保持自我
08-04 1737
前言 duiilib是通过加载配置的xml文件渲染显示的界面，xml文件在duilib中扮演着类似衣服的角色，所有关于外表界面的各种属性全在xml文件配置，这篇文章介绍一下duilib的颜色配置。 8位16进制值表示颜色 简单示例 下面是摘自一个简单示例的一段duilib的xml，表示的是一个水平布局，包含四个元素（两个label，两个button）。 <HorizontalLayout height="30"> <Label name="labsoftname" text
WPF UI开发教程自定义可折叠菜单控件
liaohaiyin的专栏
08-23 4789
Expander控件有一个箭头按钮。单击箭头时，Expander中的子元素将显示或隐藏。箭头“展开”控件，使其子控件可见。 接下来，我们可以在扩展器中添加元素——这些元素将被扩展器箭头隐藏或显示。在这里，我向扩展器添加了一个 ImageRadioButton 按钮。 注意我修改了 Expander 元素的“Header”属性。单击此处的扩展器会显示说明。 IsExpanded我将 IsExpanded 属性修改为 false。这意味着当程序启动时，描述是不可见的。 TextBlock在 TextBl
安卓自定义View-水平颜色选择器
catface
08-31 522
实现效果如上图。分为两个部分，一个是画板View，因为添加了撤销上一步功能，所以每次绘制的path都是一个对象，这个对象包含这条path对应的画笔paint信息，然后保存在集合中；另一个是水平颜色选择器View。两个单独的View逻辑都很简单，下面直接贴出代码，包含注释；当然只是速写demo，有很多可以自行优化的地方 fragment及对应的xml import android.os.Bundle; import android.view.LayoutInflater; import androi..
动态修改图片颜色
wuqingsen1的博客
11-12 1742
先看效果图片： 根据需求，为同一张图片设置不同的颜色，下面来看完成的方法，在相应的代码处添加以下代码( iv_type 为一个 ImageView)： iv_type.setColorFilter(Color.parseColor("#FF333333")); 如果不需要动态设置，也可以在相应的 xml 文件中 ImageView 属性中添加下面代码： android:tint="...
大话企业级Android应用开发实战[王家林][程序源代码]
06-30
《大话企业级Android应用开发实战》是一本深入探讨企业级Android应用开发的书籍，作者为王家林。这本书以实战为导向，旨在帮助开发者提升在实际工作中开发复杂、高效、稳定的企业级Android应用的能力。通过阅读这...
企业级Android开发全套教程.zip
07-18
《企业级Android开发全套教程》是一份针对专业开发者和学习者设计的综合教程，旨在提供全方位、实战化的Android应用开发知识。本教程深入浅出地介绍了Android开发的各个环节，结合真实的企业项目案例，帮助读者从...
大话企业级android开发全集.pdf
03-02
《大话企业级Android开发全集》是一本专为Android初学者设计的全面教程，旨在帮助读者快速掌握在企业环境中进行Android应用开发所需的核心技能。这本书深入浅出地讲解了Android开发的基础与进阶知识，结合实践案例，...
颜色的类别 可以直接写 ＃333333 一句代码就能实现
张萌的博客
03-11 2549
/**  *  颜色类别  *  例如：#666777  *  例如：#666777  透明度0.1  */ #import @interface UIColor (Hex) /* *  输入6位数返回一个颜色值 */ + (UIColor *)colorFromHex:(NSString *)hex; /*  * 
Android -- ARGB 的透明度16进制参考表
怪咖先森的博客
04-21 382
Android——ARGB的透明度A的16进制参考表 <color name="base_color_fff8f8f8">#FFF8F8F8</color> # 号后面的前两个值就代表透明度 透明度 16进制 0% FF (不透明) 5% F2 10% E5 15% D8 20% D8 0% FF 30% FF 0% FF...
Android企业级实战-界面篇-1
热门推荐
计蒙不吃鱼的博客
06-14 2万+
文章目录 Android企业级实战-界面篇-1 计蒙创作不易，未入驻的其他平台搬运请按协议规则搬运。 文章目录文章目录前言（大佬请直接跳转至第三步）一、先看看实现的效果二、实现前准备（简单讲解以及辅助文件代码，以及取名借鉴规范）1.莫大厂规范（为例）2.dimens.xml文件内容（此案例可用）3.ids.xml文件内容（此案例可用）4.colors.xml文件内容（此案例可用）5.strings.xml文件内容（此案例可用）三、实现四、注意五、使用总结 前言（大佬请直接跳转至第三步） 计蒙从上班再
Android企业级实战-界面篇-2
计蒙不吃鱼的博客
06-16 6383
文章目录 Android企业级实战-界面篇-2 计蒙创作不易，未入驻的其他平台搬运请按协议规则搬运。 文章目录文章目录前言一、先看看实现的效果二、实现前准备1.dimens.xml文件内容（与第一个案例为同文件）2.ids.xml文件内容（此案例可用）3.colors.xml文件内容（此案例可用）三、实现1.user_profile_layout.xml(第一个模块)2.include_user_profile_feature.xml(第二个模块)3.user_profile_mylove_collect
Android企业级实战-界面篇-3
计蒙不吃鱼的博客
06-22 6221
文章目录 Android企业级实战-界面篇-3 计蒙创作不易，未入驻的其他平台搬运请按协议规则搬运。 文章目录文章目录前言一、先看看实现的效果（与发表前文章的基础上）二、实现前准备1.dimens.xml文件内容（与第一个案例为同文件）2.ids.xml文件内容（此案例可用）3.colors.xml文件内容（此案例可用）4.bg_set_item_selector1.xml5.user_profile_item_background.xml三、实现1.分割线（一个为例）2.条形跳转框（一个为例）四、使用总
Android企业级实战-界面篇-5
计蒙不吃鱼的博客
08-02 4389
系列文章目录 Android企业级实战-界面篇-5 计蒙创作不易，未入驻的其他平台搬运请按协议规则搬运。 文章目录系列文章目录前言一、先看看实现的效果二、实现前准备1.dimens.xml文件内容（与第一个案例为同文件）2.ids.xml文件内容（此案例可用）3.colors.xml文件内容（此案例可用）4.strings.xml文件内容（此案例可用）5.back_nav_selector.xml6.shape_detection_input_bg.xml三、实现1.顶部栏2.头像与名称3.信息输入栏（一
Android企业级实战-界面篇-6
计蒙不吃鱼的博客
08-03 2463
系列文章目录 Android企业级实战-界面篇-6 计蒙创作不易，未入驻的其他平台搬运请按协议规则搬运。 文章目录系列文章目录前言一、先看看实现的效果二、实现前准备1.dimens.xml文件内容（与第一个案例为同文件）2.ids.xml文件内容（此案例可用）3.colors.xml文件内容（此案例可用）4.shape_tag_style.xml文件内容（此案例可用）三、实现四.源码总结 前言 昨天答应粉丝写一个样式选择的界面，所以出此系列第六篇文章，这篇文章相对比较简单 以下是本篇文章正文内容 一
MySql 触发器、存储器练习
最新发布
2302_81167603的博客
07-25 865
mysql触发器、存储器
企业级Android开发实战指南
"大话企业级Android应用开发实战" 这本书详细探讨了企业级Android应用的开发实践，旨在帮助读者从入门到精通，掌握成为一名合格的Android应用软件工程师所需的知识与技能。作者通过创造性的故事情节，让主角小安在...
评论 27
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值