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

733 阅读1分钟

这是我参与8月更文挑战的第12天,活动详情查看:8月更文挑战

文章目录

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>

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>

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>

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>

三、实现

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

四、注意

第三步代码中,有8张UI图,一张小红点图,以及一个红框样式文件(用来在java代码实现提示效果,如不需要可删除)。

五、使用

<include layout="@layout/user_profile_all_msg_layout" />

总结

如需交流,可联系计蒙(看到消息就回)。