文章目录
Android企业级实战-界面篇-1
计蒙创作不易，未入驻的其他平台搬运请按协议规则搬运。
前言（大佬请直接跳转至第三步）
计蒙从上班再次回到学校生活后，认识的很多学校软件系朋友通过校招拿到了大厂Android开发岗位的offer，计蒙因为学习是专科起点，到本科后算法部分缺陷极大，仅拿到一家大厂offer，由于个人好不容易回到校园生活，不想太早再次回到上班的日子，于是继续准备升学，为了不将Android遗忘，还是偶尔写写代码，也就有了此文章。
以下是本篇文章正文内容
一、先看看实现的效果
二、实现前准备（简单讲解以及辅助文件代码，以及取名借鉴规范）
1.某大厂规范（为例）
2.dimens.xml文件内容（此案例可用）
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="jimeng_dp_0">0.0dip</dimen>
<dimen name="jimeng_dp_05">0.5dip</dimen>
<dimen name="jimeng_dp_1">1.0dip</dimen>
<dimen name="jimeng_dp_10">10.0dip</dimen>
<dimen name="jimeng_dp_100">100.0dip</dimen>
<dimen name="jimeng_dp_11">11.0dip</dimen>
<dimen name="jimeng_dp_115">115.0dip</dimen>
<dimen name="jimeng_dp_12">12.0dip</dimen>
<dimen name="jimeng_dp_120">120.0dip</dimen>
<dimen name="jimeng_dp_123">123.0dip</dimen>
<dimen name="jimeng_dp_13">13.0dip</dimen>
<dimen name="jimeng_dp_135">135.0dip</dimen>
<dimen name="jimeng_dp_14">14.0dip</dimen>
<dimen name="jimeng_dp_140">140.0dip</dimen>
<dimen name="jimeng_dp_15">15.0dip</dimen>
<dimen name="jimeng_dp_16">16.0dip</dimen>
<dimen name="jimeng_dp_169">169.0dip</dimen>
<dimen name="jimeng_dp_17">17.0dip</dimen>
<dimen name="jimeng_dp_18">18.0dip</dimen>
<dimen name="jimeng_dp_183">183.0dip</dimen>
<dimen name="jimeng_dp_2">2.0dip</dimen>
<dimen name="jimeng_dp_20">20.0dip</dimen>
<dimen name="jimeng_dp_22">22.0dip</dimen>
<dimen name="jimeng_dp_225">225.0dip</dimen>
<dimen name="jimeng_dp_24">24.0dip</dimen>
<dimen name="jimeng_dp_246">246.0dip</dimen>
<dimen name="jimeng_dp_250">250.0dip</dimen>
<dimen name="jimeng_dp_28">28.0dip</dimen>
<dimen name="jimeng_dp_280">280.0dip</dimen>
<dimen name="jimeng_dp_30">30.0dip</dimen>
<dimen name="jimeng_dp_32">32.0dip</dimen>
<dimen name="jimeng_dp_34">34.0dip</dimen>
<dimen name="jimeng_dp_375">375.0dip</dimen>
<dimen name="jimeng_dp_38">38.0dip</dimen>
<dimen name="jimeng_dp_4">4.0dip</dimen>
<dimen name="jimeng_dp_40">40.0dip</dimen>
<dimen name="jimeng_dp_43">43.0dip</dimen>
<dimen name="jimeng_dp_44">44.0dip</dimen>
<dimen name="jimeng_dp_45">45.0dip</dimen>
<dimen name="jimeng_dp_46">46.0dip</dimen>
<dimen name="jimeng_dp_48">48.0dip</dimen>
<dimen name="jimeng_dp_49">49.0dip</dimen>
<dimen name="jimeng_dp_5">5.0dip</dimen>
<dimen name="jimeng_dp_50">50.0dip</dimen>
<dimen name="jimeng_dp_54">54.0dip</dimen>
<dimen name="jimeng_dp_55">55.0dip</dimen>
<dimen name="jimeng_dp_56">56.0dip</dimen>
<dimen name="jimeng_dp_58">58.0dip</dimen>
<dimen name="jimeng_dp_6">6.0dip</dimen>
<dimen name="jimeng_dp_60">60.0dip</dimen>
<dimen name="jimeng_dp_64">64.0dip</dimen>
<dimen name="jimeng_dp_65">65.0dip</dimen>
<dimen name="jimeng_dp_68">68.0dip</dimen>
<dimen name="jimeng_dp_7">7.0dip</dimen>
<dimen name="jimeng_dp_70">70.0dip</dimen>
<dimen name="jimeng_dp_75">75.0dip</dimen>
<dimen name="jimeng_dp_76">76.0dip</dimen>
<dimen name="jimeng_dp_8">8.0dip</dimen>
<dimen name="jimeng_dp_84">84.0dip</dimen>
<dimen name="jimeng_dp_86">86.0dip</dimen>
<dimen name="jimeng_dp_90">90.0dip</dimen>
<dimen name="jimeng_px_1">1.0px</dimen>
<dimen name="dp_10">10.0dip</dimen>
</resources>
AI 代码解读
3.ids.xml文件内容（此案例可用）
<resources>
<!-- 第一个UI模块id-->
<item type="id" name="like_icon" />
<item type="id" name="user_profile_all_msg_layout" />
<item type="id" name="ll_msg_layout1" />
<item type="id" name="my_msg_like" />
<item type="id" name="like_txt" />
<item type="id" name="like_num" />
<item type="id" name="my_msg_comment" />
<item type="id" name="comment_txt" />
<item type="id" name="comment_icon" />
<item type="id" name="comment_num" />
<item type="id" name="my_msg_chat" />
<item type="id" name="chat_icon" />
<item type="id" name="chat_txt" />
<item type="id" name="chat_num" />
<item type="id" name="my_msg_notification" />
<item type="id" name="notification_icon" />
<item type="id" name="notification_num" />
<item type="id" name="notification_txt" />
<item type="id" name="ll_msg_layout" />
<item type="id" name="ll_my_history" />
<item type="id" name="iv_foot_print_txt" />
<item type="id" name="foot_print_txt" />
<item type="id" name="ll_draft_box" />
<item type="id" name="iv_draft_icon" />
<item type="id" name="tv_draft_" />
<item type="id" name="ll_question_box" />
<item type="id" name="question_icon" />
<item type="id" name="tv_question_box_count" />
<item type="id" name="question_txt" />
<item type="id" name="user_customer_layout" />
<item type="id" name="feedback_icon" />
<item type="id" name="qiyu_tip" />
<item type="id" name="user_customer_title" />
<item type="id" name="rl_view_stub" />
<item type="id" name="rl_view_stub1" />
</resources>
AI 代码解读
4.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>
AI 代码解读
5.strings.xml文件内容（此案例可用）
<string name="str_they_like_me">收到的喜欢</string>
<string name="str_comment">评论</string>
<string name="str_chat">聊天</string>
<string name="str_notification">通知</string>
<string name="str_help_and_feedback">帮助与反馈</string>
<string name="str_question_box">提问箱</string>
<string name="str_drafts">草稿箱</string>
<string name="str_footprint">足迹</string>
AI 代码解读
三、实现
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@id/user_profile_all_msg_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/jimeng_dp_16"
android:orientation="vertical">
<LinearLayout
android:id="@id/ll_msg_layout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/jimeng_dp_16"
android:layout_marginRight="@dimen/jimeng_dp_16"
android:background="@color/jimeng_white"
android:orientation="horizontal">
<RelativeLayout
android:id="@id/my_msg_like"
android:layout_width="0.0dip"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:orientation="vertical">
<TextView
android:id="@id/like_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/like_icon"
android:layout_centerHorizontal="true"
android:text="@string/str_they_like_me"
android:textColor="@color/jimeng_black"
android:textSize="12.0dip" />
<ImageView
android:id="@id/like_icon"
android:layout_width="44.0dip"
android:layout_height="44.0dip"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:scaleType="centerCrop"
android:src="@drawable/account_icon_messages_liked_light" />
<TextView
android:id="@id/like_num"
android:layout_width="wrap_content"
android:layout_height="18.0dip"
android:layout_alignLeft="@id/like_icon"
android:layout_marginLeft="26.0dip"
android:background="@drawable/profile_notification_count_bg"
android:gravity="center"
android:paddingLeft="6.0dip"
android:paddingRight="6.0dip"
android:text="11"
android:textColor="@color/white"
android:textSize="10.0dip"
android:visibility="gone" />
</RelativeLayout>
<RelativeLayout
android:id="@id/my_msg_comment"
android:layout_width="0.0dip"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:orientation="vertical">
<TextView
android:id="@id/comment_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/comment_icon"
android:layout_centerHorizontal="true"
android:text="@string/str_comment"
android:textColor="@color/jimeng_black"
android:textSize="12.0dip" />
<ImageView
android:id="@id/comment_icon"
android:layout_width="44.0dip"
android:layout_height="44.0dip"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:scaleType="centerCrop"
android:src="@drawable/account_icon_messages_commend_light" />
<TextView
android:id="@id/comment_num"
android:layout_width="wrap_content"
android:layout_height="18.0dip"
android:layout_alignLeft="@id/comment_icon"
android:layout_marginLeft="26.0dip"
android:background="@drawable/profile_notification_count_bg"
android:gravity="center"
android:paddingLeft="6.0dip"
android:paddingRight="6.0dip"
android:text="999+"
android:textColor="@color/white"
android:textSize="10.0dip"
android:visibility="gone" />
</RelativeLayout>
<RelativeLayout
android:id="@id/my_msg_chat"
android:layout_width="0.0dip"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:orientation="vertical">
<TextView
android:id="@id/chat_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/chat_icon"
android:layout_centerHorizontal="true"
android:text="@string/str_chat"
android:textColor="@color/jimeng_black"
android:textSize="12.0dip" />
<ImageView
android:id="@id/chat_icon"
android:layout_width="44.0dip"
android:layout_height="44.0dip"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="@drawable/account_icon_messages_chat_light" />
<TextView
android:id="@id/chat_num"
android:layout_width="wrap_content"
android:layout_height="18.0dip"
android:layout_alignLeft="@id/chat_icon"
android:layout_marginLeft="26.0dip"
android:background="@drawable/profile_notification_count_bg"
android:gravity="center"
android:paddingLeft="6.0dip"
android:paddingRight="6.0dip"
android:text="999+"
android:textColor="@color/white"
android:textSize="10.0dip"
android:visibility="gone" />
</RelativeLayout>
<RelativeLayout
android:id="@id/my_msg_notification"
android:layout_width="0.0dip"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:orientation="vertical">
<TextView
android:id="@id/notification_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/notification_icon"
android:layout_centerHorizontal="true"
android:text="@string/str_notification"
android:textColor="@color/jimeng_black"
android:textSize="12.0dip" />
<ImageView
android:id="@id/notification_icon"
android:layout_width="44.0dip"
android:layout_height="44.0dip"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:scaleType="centerCrop"
android:src="@drawable/account_icon_messages_notification_light" />
<TextView
android:id="@id/notification_num"
android:layout_width="wrap_content"
android:layout_height="18.0dip"
android:layout_alignLeft="@id/notification_icon"
android:layout_marginLeft="26.0dip"
android:background="@drawable/profile_notification_count_bg"
android:gravity="center"
android:paddingLeft="6.0dip"
android:paddingRight="6.0dip"
android:text="999+"
android:textColor="@color/white"
android:textSize="10.0dip"
android:visibility="gone" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id="@id/ll_msg_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/jimeng_dp_16"
android:layout_marginTop="@dimen/jimeng_dp_10"
android:layout_marginRight="@dimen/jimeng_dp_16"
android:background="@color/jimeng_white"
android:orientation="horizontal">
<RelativeLayout
android:id="@id/ll_my_history"
android:layout_width="0.0dip"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:orientation="vertical">
<TextView
android:id="@id/foot_print_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/iv_foot_print_txt"
android:layout_centerHorizontal="true"
android:text="@string/str_footprint"
android:textColor="@color/jimeng_black"
android:textSize="12.0dip" />
<ImageView
android:id="@id/iv_foot_print_txt"
android:layout_width="44.0dip"
android:layout_height="44.0dip"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:scaleType="centerCrop"
android:src="@drawable/account_icon_messages_footprint_light" />
</RelativeLayout>
<RelativeLayout
android:id="@id/ll_draft_box"
android:layout_width="0.0dip"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:orientation="vertical">
<TextView
android:id="@id/tv_draft_"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/iv_draft_icon"
android:layout_centerHorizontal="true"
android:text="@string/str_drafts"
android:textColor="@color/jimeng_black"
android:textSize="12.0dip" />
<ImageView
android:id="@id/iv_draft_icon"
android:layout_width="44.0dip"
android:layout_height="44.0dip"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:scaleType="centerCrop"
android:src="@drawable/account_icon_messages_drafts_light" />
</RelativeLayout>
<RelativeLayout
android:id="@id/ll_question_box"
android:layout_width="0.0dip"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:orientation="vertical">
<TextView
android:id="@id/question_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/question_icon"
android:layout_centerHorizontal="true"
android:text="@string/str_question_box"
android:textColor="@color/jimeng_black"
android:textSize="12.0dip" />
<ImageView
android:id="@id/question_icon"
android:layout_width="44.0dip"
android:layout_height="44.0dip"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="@drawable/account_icon_messages_question_light" />
<ImageView
android:id="@id/tv_question_box_count"
android:layout_width="8.0dip"
android:layout_height="8.0dip"
android:layout_alignLeft="@id/question_icon"
android:layout_marginLeft="33.0dip"
android:layout_marginTop="@dimen/jimeng_dp_4"
android:background="@drawable/common_icon_notification_small"
android:gravity="center"
android:paddingLeft="6.0dip"
android:paddingRight="6.0dip"
android:textSize="10.0dip"
android:visibility="gone" />
</RelativeLayout>
<RelativeLayout
android:id="@id/user_customer_layout"
android:layout_width="0.0dip"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:orientation="vertical">
<TextView
android:id="@id/user_customer_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/feedback_icon"
android:layout_centerHorizontal="true"
android:ellipsize="middle"
android:singleLine="true"
android:text="@string/str_help_and_feedback"
android:textColor="@color/jimeng_black"
android:textSize="12.0dip" />
<ImageView
android:id="@id/feedback_icon"
android:layout_width="44.0dip"
android:layout_height="44.0dip"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:scaleType="centerCrop"
android:src="@drawable/account_icon_messages_help_light" />
<ImageView
android:id="@id/qiyu_tip"
android:layout_width="8.0dip"
android:layout_height="8.0dip"
android:layout_alignLeft="@id/feedback_icon"
android:layout_marginLeft="33.0dip"
android:layout_marginTop="@dimen/jimeng_dp_4"
android:background="@drawable/common_icon_notification_small"
android:gravity="center"
android:paddingLeft="6.0dip"
android:paddingRight="6.0dip"
android:visibility="gone" />
</RelativeLayout>
<RelativeLayout
android:id="@id/rl_view_stub"
android:layout_width="0.0dip"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:orientation="vertical"
android:visibility="gone" />
<RelativeLayout
android:id="@id/rl_view_stub1"
android:layout_width="0.0dip"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:orientation="vertical"
android:visibility="gone" />
</LinearLayout>
</LinearLayout>
AI 代码解读
四、注意
第三步代码中，有8张UI图，一张小红点图，以及一个红框样式文件（用来在java代码实现提示效果，如不需要可删除）。
五、使用
<include layout="@layout/user_profile_all_msg_layout" />
AI 代码解读
