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

简介: 本文为《Android企业级实战-界面篇》系列第二篇,主要介绍三个UI模块的实现:用户资料模块、关注与粉丝统计模块以及喜欢和收藏功能模块。通过详细的XML代码展示布局设计,包括dimens、ids、colors配置文件的使用,帮助开发者快速构建美观且功能齐全的界面。文章结合实际效果图,便于理解和应用。建议配合第一篇文章内容学习,以获取完整工具类支持。

文章目录

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

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

前言

前几天发表了此系列第一篇文章,比较受欢迎,一天涨的粉丝盖过一年的了,在粉丝的私信下,今天将第二篇赶出来,效果图结合第一篇展示,废话不多说,直接开始

以下是本篇文章正文内容

提示:此文章部分工具类需借鉴第一篇文章。链接如下。(后续将会提示)
Android企业级实战-界面篇-1

一、先看看实现的效果

5.jpg

6.jpg

7.png

二、实现前准备

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

不占字了,请于第一篇自取
Android企业级实战-界面篇-1

2.ids.xml文件内容(此案例可用)

 <!--    第一个UI模块id-->
    <item type="id" name="user_profile_layout" />
    <item type="id" name="profile_cover" />
    <item type="id" name="blog_tag" />
    <item type="id" name="user_data" />
    <item type="id" name="arrow" />
    <item type="id" name="arrow_img" />
    <item type="id" name="blog_name_text" />
    <!--    第二个UI模块id-->
    <item type="id" name="user_focus_layout" />
    <item type="id" name="user_focus_num" />
    <item type="id" name="user_fans_layout" />
    <item type="id" name="user_fans_num" />
    <item type="id" name="new_fans_tip" />
    <item type="id" name="user_fav_num" />
    <item type="id" name="user_tv_recommend_num" />
    <!--第三个模块-->
    <item type="id" name="ll_owner_like" />
    <item type="id" name="iv_like_icon" />
    <item type="id" name="ll_owner_fav" />
    <item type="id" name="iv_fav_icon" />

3.colors.xml文件内容(此案例可用)

  <color name="jimeng_background_primary_light">#ffffffff</color>
    <color name="jimeng_white">@color/jimeng_background_primary_light</color>
    <color name="jimeng_text_primary_light">#ff2e2e2e</color>
    <color name="jimeng_black">@color/jimeng_text_primary_light</color>
    <color name="jimeng_red_light">#ffff6c93</color>
    <color name="jimeng_text_quarternary_light">#ffcccccc</color>
    <color name="color_dddddd">#ffdddddd</color>
    <color name="jimeng_background_secondary_light">#fff5f5f5</color>
    <color name="jimeng_separator_line_light">#ffededed</color>
    <color name="jimeng_gray05">@color/jimeng_separator_line_light</color>
    <color name="color_ffffff">#ffffffff</color>
    <color name="jimeng_gray03">@color/jimeng_text_quarternary_light</color>

三、实现

1.user_profile_layout.xml(第一个模块)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@id/user_profile_layout"
    android:layout_width="fill_parent"
    android:layout_height="100.0dip"
    android:clickable="true"
    android:clipChildren="false">

    <ImageView
        android:id="@id/profile_cover"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:alpha="1.0" />

    <ImageView
        android:id="@id/image"
        android:layout_width="72.0dip"
        android:layout_height="72.0dip"
        android:layout_marginLeft="24.0dip"
        android:layout_marginTop="@dimen/jimeng_dp_32"
        android:layout_marginRight="15.0dip"
        android:src="@drawable/venda_default_icon_jimeng" />

    <ImageView
        android:id="@id/blog_tag"
        android:layout_width="22.0dip"
        android:layout_height="22.0dip"
        android:layout_alignRight="@id/image"
        android:layout_alignBottom="@id/image"
        android:layout_marginTop="2.0dip"
        android:scaleType="centerCrop" />

    <RelativeLayout
        android:id="@id/user_data"
        android:layout_width="fill_parent"
        android:layout_height="72.0dip"
        android:layout_marginTop="36.0dip"
        android:layout_toLeftOf="@id/arrow"
        android:layout_toRightOf="@id/image"
        >



        <TextView
            android:id="@id/blog_name_text"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="4.0dip"
            android:layout_marginRight="15.0dip"
            android:duplicateParentState="true"
            android:singleLine="true"
            android:text="计蒙不吃鱼"
            android:layout_centerVertical="true"
            android:textColor="@color/jimeng_black"
            android:textSize="@dimen/jimeng_dp_20"
            android:textStyle="bold"/>

    </RelativeLayout>
    <RelativeLayout
        android:id="@id/arrow"
        android:layout_width="40.0dip"
        android:layout_height="72.0dip"
        android:layout_marginTop="36.0dip"
        android:layout_alignParentRight="true"
        >
    <ImageView
        android:id="@id/arrow_img"
        android:layout_width="16.0dip"
        android:layout_height="16.0dip"
        android:layout_centerVertical="true"
        android:layout_marginRight="24.0dip"
        android:src="@drawable/common_icon_arrow_next_medium" />
    </RelativeLayout>
</RelativeLayout>

效果图:
8.png

2.include_user_profile_feature.xml(第二个模块)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/white"
    android:orientation="horizontal"
    android:paddingTop="@dimen/jimeng_dp_16"
    android:paddingBottom="@dimen/jimeng_dp_16">

    <LinearLayout
        android:id="@id/user_focus_layout"
        android:layout_width="0.0dip"
        android:layout_height="fill_parent"
        android:layout_weight="1.0"
        android:gravity="center"
        android:orientation="vertical">

        <TextView
            android:id="@id/user_focus_num"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1024"
            android:textColor="@color/jimeng_text_primary_light"
            android:textSize="@dimen/jimeng_dp_17"
            android:textStyle="bold" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/jimeng_dp_2"
            android:text="关注"
            android:textColor="@color/jimeng_text_quarternary_light"
            android:textSize="@dimen/jimeng_dp_12"
            android:textStyle="bold" />
    </LinearLayout>

    <RelativeLayout
        android:id="@id/user_fans_layout"
        android:layout_width="0.0dip"
        android:layout_height="fill_parent"
        android:layout_weight="1.0"
        android:gravity="center">

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

            <TextView
                android:id="@id/user_fans_num"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:text="1024"
                android:textColor="@color/jimeng_text_primary_light"
                android:textSize="@dimen/jimeng_dp_17"
                android:textStyle="bold" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/user_fans_num"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="@dimen/jimeng_dp_2"
                android:text="粉丝"
                android:textColor="@color/jimeng_text_quarternary_light"
                android:textSize="@dimen/jimeng_dp_12"
                android:textStyle="bold" />

            <TextView
                android:id="@id/new_fans_tip"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="3.0dip"
                android:layout_marginBottom="3.0dip"
                android:layout_toRightOf="@id/user_fans_num"
                android:text="+0"
                android:textColor="@color/jimeng_red_light"
                android:textSize="10.0dip"
                android:visibility="gone" />
        </RelativeLayout>
    </RelativeLayout>

    <LinearLayout
        android:id="@id/user_fav_num"
        android:layout_width="0.0dip"
        android:layout_height="fill_parent"
        android:layout_weight="1.0"
        android:gravity="center"
        android:orientation="vertical">

        <TextView
            android:id="@id/user_tv_recommend_num"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1024"
            android:textColor="@color/jimeng_text_primary_light"
            android:textSize="@dimen/jimeng_dp_17"
            android:textStyle="bold" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/jimeng_dp_2"
            android:text="推荐"
            android:textColor="@color/jimeng_text_quarternary_light"
            android:textSize="@dimen/jimeng_dp_12"
            android:textStyle="bold" />
    </LinearLayout>
</LinearLayout>

效果图
9.png

3.user_profile_mylove_collect.xml(第三个模块)

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
        android:background="@drawable/user_profile_background_like"
        android:layout_height="@dimen/jimeng_dp_56"
        android:layout_marginLeft="@dimen/jimeng_dp_16"
        android:layout_marginRight="@dimen/jimeng_dp_16"
        android:layout_width="fill_parent"
        android:orientation="horizontal">

        <RelativeLayout
            android:id="@id/ll_owner_like"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:layout_width="wrap_content">

            <ImageView
                android:id="@id/iv_like_icon"
                android:layout_centerVertical="true"
                android:layout_height="44.0dip"
                android:layout_marginLeft="20.0dip"
                android:layout_width="44.0dip"
                android:src="@drawable/account_icon_messages_love_light1" />

            <TextView
                android:layout_centerVertical="true"
                android:layout_height="wrap_content"
                android:layout_marginLeft="4.0dip"
                android:layout_toRightOf="@id/iv_like_icon"
                android:layout_width="wrap_content"
                android:text="我的喜欢"
                android:textColor="@color/jimeng_black"
                android:textSize="@dimen/jimeng_dp_14"
                android:textStyle="bold" />
        </RelativeLayout>

        <View
            android:background="@color/color_dddddd"
            android:layout_height="fill_parent"
            android:layout_marginBottom="@dimen/dp_10"
            android:layout_marginTop="@dimen/dp_10"
            android:layout_width="1.0px" />

        <RelativeLayout
            android:id="@id/ll_owner_fav"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:layout_width="wrap_content">

            <ImageView
                android:id="@id/iv_fav_icon"
                android:layout_centerVertical="true"
                android:layout_height="44.0dip"
                android:layout_marginLeft="20.0dip"
                android:layout_width="44.0dip"
                android:src="@drawable/account_icon_messages_collect_light" />

            <TextView
                android:layout_centerVertical="true"
                android:layout_height="wrap_content"
                android:layout_marginLeft="4.0dip"
                android:layout_toRightOf="@id/iv_fav_icon"
                android:layout_width="wrap_content"
                android:text="我的收藏"
                android:textColor="@color/jimeng_black"
                android:textSize="@dimen/jimeng_dp_14"
                android:textStyle="bold" />
        </RelativeLayout>
    </LinearLayout>

效果图
10.png

四、使用

 <include layout="@layout/user_profile_layout"/>
 <include
          layout="@layout/include_user_profile_feature"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content" />

 <include layout="@layout/user_profile_mylove_collect" />
相关文章
|
2月前
|
Android开发 数据安全/隐私保护 开发者
Android自定义view之模仿登录界面文本输入框(华为云APP)
本文介绍了一款自定义输入框的实现,包含静态效果、hint值浮动动画及功能扩展。通过组合多个控件完成界面布局,使用TranslateAnimation与AlphaAnimation实现hint文字上下浮动效果,支持密码加密解密显示、去除键盘回车空格输入、光标定位等功能。代码基于Android平台,提供完整源码与attrs配置,方便复用与定制。希望对开发者有所帮助。
|
2月前
|
XML Java Android开发
Android自定义view之网易云推荐歌单界面
本文详细介绍了如何通过自定义View实现网易云音乐推荐歌单界面的效果。首先,作者自定义了一个圆角图片控件`MellowImageView`,用于绘制圆角矩形图片。接着,通过将布局放入`HorizontalScrollView`中,实现了左右滑动功能,并使用`ViewFlipper`添加图片切换动画效果。文章提供了完整的代码示例,包括XML布局、动画文件和Java代码,最终展示了实现效果。此教程适合想了解自定义View和动画效果的开发者。
153 65
Android自定义view之网易云推荐歌单界面
|
2月前
|
Android开发 开发者
Android企业级实战-界面篇-3
本文是《Android企业级实战-界面篇》系列的第三篇,主要介绍分割线和条形跳转框的实现方法,二者常用于设置和个人中心界面。文章通过具体代码示例展示了如何实现这两种UI组件,并提供了效果图。实现前需准备`dimens.xml`、`ids.xml`、`colors.xml`等文件,部分资源可参考系列第一、二篇文章。代码中详细说明了布局文件的配置,如分割线的样式定义和条形跳转框的组件组合,帮助开发者快速上手并应用于实际项目中。
|
4月前
|
JavaScript Linux 网络安全
Termux安卓终端美化与开发实战:从下载到插件优化,小白也能玩转Linux
Termux是一款安卓平台上的开源终端模拟器,支持apt包管理、SSH连接及Python/Node.js/C++开发环境搭建,被誉为“手机上的Linux系统”。其特点包括零ROOT权限、跨平台开发和强大扩展性。本文详细介绍其安装准备、基础与高级环境配置、必备插件推荐、常见问题解决方法以及延伸学习资源,帮助用户充分利用Termux进行开发与学习。适用于Android 7+设备,原创内容转载请注明来源。
773 76
|
2月前
|
算法 Java Android开发
Android企业级实战-界面篇-1
本文详细介绍了Android企业级开发中界面实现的过程,涵盖效果展示、实现前准备及代码实现。作者通过自身经历分享了Android开发经验,并提供了`dimens.xml`、`ids.xml`、`colors.xml`和`strings.xml`等配置文件内容,帮助开发者快速构建规范化的UI布局。文章以一个具体的用户消息界面为例,展示了如何使用线性布局(LinearLayout)和相对布局(RelativeLayout)实现功能模块排列,并附带注意事项及使用方法,适合初学者和进阶开发者参考学习。
|
XML 数据可视化 Java
Android常见界面布局(详细介绍)
Android常见界面布局(详细介绍)
561 0
Android常见界面布局(详细介绍)
|
Android开发
Android笔记:软键盘弹出遮盖原来界面的布局控件
Android笔记:软键盘弹出遮盖原来界面的布局控件
238 0
|
Web App开发 Java Android开发
android界面开发小结——android笔记---控件和布局
控件简介 ============================================================== 控件的设置主要依靠layout文件夹中的activity_main.
757 0
|
XML 编解码 Android开发
Android软件开发之盘点界面五大布局
雨松MOMO原创文章如转载,请注明:转载自雨松MOMO的博客原文地址:http://blog.csdn.net/xys289187120/article/details/6655494 1.线性布局(LinearLayout)         线性布局的形式可以分为两种,第一种横向线性布局 第二种纵向线性布局,总而言之都是以线性的形式 一个个排列出来的,纯线性布局的缺点是很不方便修改控件的显示位置,所以开发中经常会 以 线性布局与相对布局嵌套的形式设置布局。
722 0
|
1月前
|
安全 Java Android开发
为什么大厂要求安卓开发者掌握Kotlin和Jetpack?深度解析现代Android开发生态优雅草卓伊凡
为什么大厂要求安卓开发者掌握Kotlin和Jetpack?深度解析现代Android开发生态优雅草卓伊凡
76 0
为什么大厂要求安卓开发者掌握Kotlin和Jetpack?深度解析现代Android开发生态优雅草卓伊凡

热门文章

最新文章