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

文章目录

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

---

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

---

前言

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

---

以下是本篇文章正文内容
提示：此文章部分工具类需借鉴第一篇文章。链接如下。（后续将会提示）
Android企业级实战-界面篇-1

一、先看看实现的效果

二、实现前准备

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>

效果图：

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>

效果图

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>

效果图

四、使用

 <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" />

总结

如需交流，可于公众号内联系计蒙（看到消息就回）。