Android企業級實戰-界面篇-3

計蒙不吃魚 2021-08-15 13:37:18 阅读数:45

本文一共[544]字,预计阅读时长:1分钟~
android 界面

這是我參與8月更文挑戰的第14天,活動詳情查看:8月更文挑戰

文章目錄

Android企業級實戰-界面篇-3


計蒙創作不易,未入駐的其他平臺搬運請按協議規則搬運。


前言

發錶了此系列第二篇文章後,有粉絲要求更新,今天寫第三篇,相對來說比較簡單,可以分為兩個部分,一個為分割線的實現,另一個是條形跳轉框,需組合搭配使用,這兩類在設置,個人中心等界面中使用非常廣泛


以下是本篇文章正文內容 提示:此文章部分工具類需借鑒第一篇,第二篇文章。

一、先看看實現的效果(與發錶前文章的基礎上)

在這裏插入圖片描述 在這裏插入圖片描述 在這裏插入圖片描述

二、實現前准備

1.dimens.xml文件內容(與第一個案例為同文件)

不占字了,請於第一篇自取

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

 <item type="id" name="user_game_layout" />
<item type="id" name="iv_game_icon_left" />
<item type="id" name="iv_game_icon" />
<item type="id" name="iv_hint_style_default" />
<item type="id" name="tv_game_num" />
<item type="id" name="tv_game_title" />
複制代碼

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

無特殊顏色,於第一篇,第二篇自取

4.bg_set_item_selector1.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="@color/jimeng_gray05" />
<item android:drawable="@color/jimeng_white" />
</selector>
複制代碼

5.user_profile_item_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/color_ffffff" />
<stroke android:width="1.0dip" android:color="@color/color_ffffff" />
<corners android:radius="8.0dip" />
</shape>
複制代碼

三、實現

1.分割線(一個為例)

 <View
android:layout_width="fill_parent"
android:layout_height="1.0px"
android:layout_marginLeft="@dimen/jimeng_dp_20"
android:layout_marginTop="@dimen/jimeng_dp_20"
android:layout_marginRight="@dimen/jimeng_dp_20"
android:layout_marginBottom="@dimen/jimeng_dp_8"
android:background="@color/jimeng_gray05" />
複制代碼

效果圖: 在這裏插入圖片描述

2.條形跳轉框(一個為例)

 <LinearLayout
android:id="@id/user_game_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16.0dip"
android:background="@drawable/user_profile_item_background"
android:orientation="vertical">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="@dimen/jimeng_dp_45"
android:layout_marginRight="16.0dip"
android:background="@drawable/bg_set_item_selector1"
android:orientation="horizontal">
<ImageView
android:id="@id/iv_game_icon_left"
android:layout_width="20.0dip"
android:layout_height="20.0dip"
android:layout_gravity="center_vertical"
android:layout_marginLeft="15.0dip"
android:src="@drawable/account_icon_activity_stats" />
<TextView
android:id="@id/tv_game_title"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginLeft="15.0dip"
android:duplicateParentState="true"
android:ellipsize="end"
android:gravity="center_vertical"
android:maxLength="6"
android:maxLines="1"
android:singleLine="true"
android:text="數據觀星"
android:textColor="@color/jimeng_text_primary_light"
android:textSize="14.0dip"
android:textStyle="bold" />
<TextView
android:id="@id/tv_game_num"
android:layout_width="0.0dip"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="5.0dip"
android:layout_weight="1.0"
android:ellipsize="end"
android:gravity="right"
android:maxLength="12"
android:maxLines="1"
android:text=""
android:textColor="@color/jimeng_gray03"
android:textSize="14.0dip" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical">
<ImageView
android:id="@id/iv_game_icon"
android:layout_width="25.0dip"
android:layout_height="25.0dip"
android:layout_marginTop="2.5dip"
android:layout_marginRight="15.0dip"
android:visibility="gone" />
<ImageView
android:id="@id/iv_hint_style_default"
android:layout_width="9.0dip"
android:layout_height="9.0dip"
android:layout_alignParentTop="true"
android:layout_marginLeft="22.0dip"
android:background="@drawable/common_icon_notification_small"
android:visibility="gone" />
</RelativeLayout>
<ImageView
android:layout_width="@dimen/jimeng_dp_16"
android:layout_height="@dimen/jimeng_dp_16"
android:layout_gravity="center_vertical"
android:layout_marginRight="12.0dip"
android:src="@drawable/common_icon_arrow_next_medium" />
</LinearLayout>
</LinearLayout>
複制代碼

效果圖 在這裏插入圖片描述

四、使用

//將兩個模塊組合使用即可,可與效果圖為例。
複制代碼

總結

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

版权声明:本文为[計蒙不吃魚]所创,转载请带上原文链接,感谢。 https://gsmany.com/2021/08/20210815133652366x.html