如下圖個人中心UI所示:
個人中心.png
針對這樣的一個界面,很多初學(xué)者都會使用控件的組合來實現(xiàn)祥国,例如:最外層使用相對布局昵观,從左到右依序是ImageView(錢包左側(cè)圖片),TextView(錢包文字本身) 系宫, ImageView(最右邊的箭頭) 再加上一個View,作為分割線索昂,最后設(shè)置下相對位置屬性建车,即可完成布局扩借,代碼如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/Cf1f5f6"
android:orientation="vertical">
<include layout="@layout/widget_title_bar" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="@+id/rl_head"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_marginTop="@dimen/px20dp"
android:background="@drawable/rl_bg_selector"
android:clickable="true">
<ImageView
android:id="@+id/iv_head"
android:layout_width="@dimen/px120dp"
android:layout_height="@dimen/px120dp"
android:layout_centerVertical="true"
android:layout_marginLeft="@dimen/px30dp"
android:scaleType="fitXY"
android:src="@drawable/default_header" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="@dimen/px12dp"
android:layout_toRightOf="@+id/iv_head">
<TextView
android:id="@+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/text_333"
android:textSize="@dimen/px32dp" />
<TextView
android:id="@+id/tv_phone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/tv_name"
android:layout_marginTop="@dimen/px30dp"
android:textColor="@color/text_666"
android:textSize="@dimen/px28dp" />
</RelativeLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="@dimen/px30dp"
android:src="@drawable/icon_rightarrow" />
</RelativeLayout>
<!--錢包福利通知-->
<LinearLayout
android:id="@+id/ll_mark"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/rl_head"
android:layout_marginTop="@dimen/px30dp"
android:background="@color/white"
android:orientation="vertical">
<RelativeLayout
android:id="@+id/rl_money"
android:layout_width="match_parent"
android:layout_height="@dimen/px100dp"
android:background="@drawable/rl_bg_selector"
android:clickable="true">
<ImageView
android:id="@+id/iv_money"
android:layout_width="@dimen/px60dp"
android:layout_height="@dimen/px60dp"
android:layout_centerVertical="true"
android:layout_marginLeft="@dimen/px40dp"
android:src="@drawable/icon_qb" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="@dimen/px40dp"
android:layout_toRightOf="@+id/iv_money"
android:text="錢包"
android:textColor="@color/text_333"
android:textSize="@dimen/px30dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="@dimen/px30dp"
android:src="@drawable/icon_rightarrow" />
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="@dimen/px1dp"
android:layout_marginLeft="@dimen/px30dp"
android:layout_marginRight="@dimen/px30dp"
android:background="@color/bg_mian" />
<RelativeLayout
android:id="@+id/rl_welfare"
android:layout_width="match_parent"
android:layout_height="@dimen/px100dp"
android:background="@drawable/rl_bg_selector"
android:clickable="true">
<ImageView
android:id="@+id/iv_welfare"
android:layout_width="@dimen/px60dp"
android:layout_height="@dimen/px60dp"
android:layout_centerVertical="true"
android:layout_marginLeft="@dimen/px40dp"
android:src="@drawable/icon_fl" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="@dimen/px40dp"
android:layout_toRightOf="@+id/iv_welfare"
android:text="福利"
android:textColor="@color/text_333"
android:textSize="@dimen/px30dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="@dimen/px30dp"
android:src="@drawable/icon_rightarrow" />
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="@dimen/px1dp"
android:layout_marginLeft="@dimen/px30dp"
android:layout_marginRight="@dimen/px30dp"
android:background="@color/bg_mian" />
<RelativeLayout
android:id="@+id/rl_notification"
android:layout_width="match_parent"
android:layout_height="@dimen/px100dp"
android:background="@drawable/rl_bg_selector"
android:clickable="true">
<ImageView
android:id="@+id/iv_notification"
android:layout_width="@dimen/px60dp"
android:layout_height="@dimen/px60dp"
android:layout_centerVertical="true"
android:layout_marginLeft="@dimen/px40dp"
android:src="@drawable/icon_tz" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="@dimen/px40dp"
android:layout_toRightOf="@+id/iv_notification"
android:text="通知"
android:textColor="@color/text_333"
android:textSize="@dimen/px30dp" />
<ImageView
android:id="@+id/iv_arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="@dimen/px30dp"
android:src="@drawable/icon_rightarrow" />
<ImageView
android:id="@+id/iv_new_msg"
android:layout_width="@dimen/px10dp"
android:layout_height="@dimen/px10dp"
android:layout_centerVertical="true"
android:layout_toLeftOf="@id/iv_arrow"
android:src="@drawable/shape_red_circle" />
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="@dimen/px1dp"
android:layout_marginLeft="@dimen/px30dp"
android:layout_marginRight="@dimen/px30dp"
android:background="@color/bg_mian"
android:visibility="visible" />
<RelativeLayout
android:id="@+id/rl_flow_transaction_order"
android:layout_width="match_parent"
android:layout_height="@dimen/px100dp"
android:background="@drawable/rl_bg_selector"
android:clickable="true"
android:visibility="visible">
<ImageView
android:id="@+id/iv_flow"
android:layout_width="@dimen/px60dp"
android:layout_height="@dimen/px60dp"
android:layout_centerVertical="true"
android:layout_marginLeft="@dimen/px40dp"
android:padding="@dimen/px8dp"
android:src="@drawable/perso_traffi" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="@dimen/px40dp"
android:layout_toRightOf="@+id/iv_flow"
android:text="流量交易訂單"
android:textColor="@color/text_333"
android:textSize="@dimen/px30dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="@dimen/px30dp"
android:src="@drawable/icon_rightarrow" />
</RelativeLayout>
</LinearLayout>
<!--幫助中心,邀請好友缤至,設(shè)置-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/ll_mark"
android:layout_marginTop="@dimen/px30dp"
android:background="@color/white"
android:orientation="vertical">
<RelativeLayout
android:id="@+id/rl_help"
android:layout_width="match_parent"
android:layout_height="@dimen/px100dp"
android:background="@drawable/rl_bg_selector"
android:clickable="true">
<ImageView
android:id="@+id/iv_help"
android:layout_width="@dimen/px60dp"
android:layout_height="@dimen/px60dp"
android:layout_centerVertical="true"
android:layout_marginLeft="@dimen/px40dp"
android:src="@drawable/icon_bzzx" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="@dimen/px40dp"
android:layout_toRightOf="@+id/iv_help"
android:text="幫助中心"
android:textColor="@color/text_333"
android:textSize="@dimen/px30dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="@dimen/px30dp"
android:src="@drawable/icon_rightarrow" />
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="@dimen/px1dp"
android:layout_marginLeft="@dimen/px30dp"
android:layout_marginRight="@dimen/px30dp"
android:background="@color/bg_mian" />
<RelativeLayout
android:id="@+id/rl_invited_friend"
android:layout_width="match_parent"
android:layout_height="@dimen/px100dp"
android:background="@drawable/rl_bg_selector"
android:clickable="true">
<ImageView
android:id="@+id/iv_invited_friend"
android:layout_width="@dimen/px60dp"
android:layout_height="@dimen/px60dp"
android:layout_centerVertical="true"
android:layout_marginLeft="@dimen/px40dp"
android:src="@drawable/icon_yqhy" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="@dimen/px40dp"
android:layout_toRightOf="@+id/iv_invited_friend"
android:text="邀請好友"
android:textColor="@color/text_333"
android:textSize="@dimen/px30dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="@dimen/px30dp"
android:src="@drawable/icon_rightarrow" />
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="@dimen/px1dp"
android:layout_marginLeft="@dimen/px30dp"
android:layout_marginRight="@dimen/px30dp"
android:background="@color/bg_mian" />
<RelativeLayout
android:id="@+id/rl_setting"
android:layout_width="match_parent"
android:layout_height="@dimen/px100dp"
android:background="@drawable/rl_bg_selector"
android:clickable="true">
<ImageView
android:id="@+id/iv_setting"
android:layout_width="@dimen/px60dp"
android:layout_height="@dimen/px60dp"
android:layout_centerVertical="true"
android:layout_marginLeft="@dimen/px40dp"
android:src="@drawable/icon_sz" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="@dimen/px40dp"
android:layout_toRightOf="@+id/iv_setting"
android:text="設(shè)置"
android:textColor="@color/text_333"
android:textSize="@dimen/px30dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="@dimen/px30dp"
android:src="@drawable/icon_rightarrow" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
</LinearLayout>
缺點:控件太多了潮罪,沒有使用style
下面對該界面進行優(yōu)化,優(yōu)化過程中會使用到LinearLayout布局的android:divider和android:showDividers屬性领斥,準備寫下分割線文件和style文件
1嫉到、在drawable文件下創(chuàng)建分割線文件inset_linearlayout_divider.xml
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="@dimen/px30dp"
android:insetRight="@dimen/px30dp">
<shape android:shape="rectangle">
<solid android:color="#e5e5e5" />
<size android:height="@dimen/px1dp" />
</shape>
<!--
android:insetLeft="@dimen/px30dp" 距離左側(cè)30dp
android:insetRight="@dimen/px30dp" 距離右側(cè)30dp
android:color="@color/bg_mian" 分割線顏色
android:height="@dimen/px1dp" 分割線高度
-->
</inset>
2、創(chuàng)建TextView的style
item_textview_style
<style name="item_textview_style">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">@dimen/px100dp</item>
<item name="android:layout_centerVertical">true</item>
<item name="android:clickable">true</item>
<item name="android:drawablePadding">@dimen/px40dp</item>
<item name="android:drawableRight">@drawable/icon_rightarrow</item>
<item name="android:gravity">center_vertical</item>
<item name="android:paddingLeft">@dimen/px40dp</item>
<item name="android:paddingRight">@dimen/px30dp</item>
<item name="android:textColor">@color/text_333</item>
<item name="android:textSize">@dimen/px30dp</item>
</style>
3月洛、布局文件中使用
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/Cf1f5f6"
android:orientation="vertical"
android:showDividers="">
<include layout="@layout/widget_title_bar" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="@+id/rl_head"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_marginTop="@dimen/px20dp"
android:background="@drawable/rl_bg_selector"
android:clickable="true">
<ImageView
android:id="@+id/iv_head"
android:layout_width="@dimen/px120dp"
android:layout_height="@dimen/px120dp"
android:layout_centerVertical="true"
android:layout_marginLeft="@dimen/px30dp"
android:scaleType="fitXY"
android:src="@drawable/default_header" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="@dimen/px12dp"
android:layout_toRightOf="@+id/iv_head">
<TextView
android:id="@+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/text_333"
android:textSize="@dimen/px32dp" />
<TextView
android:id="@+id/tv_phone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/tv_name"
android:layout_marginTop="@dimen/px30dp"
android:textColor="@color/text_666"
android:textSize="@dimen/px28dp" />
</RelativeLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="@dimen/px30dp"
android:src="@drawable/icon_rightarrow" />
</RelativeLayout>
<!--錢包福利通知-->
<LinearLayout
android:id="@+id/ll_mark"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/rl_head"
android:layout_marginTop="@dimen/px30dp"
android:background="@color/white"
android:divider="@drawable/inset_linearlayout_divider"
android:orientation="vertical"
android:showDividers="middle">
<TextView
android:id="@+id/tv_money"
style="@style/item_textview_style"
android:drawableLeft="@drawable/icon_qb"
android:text="錢包" />
<TextView
android:id="@+id/tv_welfare"
style="@style/item_textview_style"
android:drawableLeft="@drawable/icon_fl"
android:text="福利" />
<RelativeLayout
android:id="@+id/rl_notification"
android:layout_width="match_parent"
android:layout_height="@dimen/px100dp"
android:background="@drawable/rl_bg_selector"
android:clickable="true">
<TextView
android:id="@+id/tv_notification"
style="@style/item_textview_style"
android:drawableLeft="@drawable/icon_tz"
android:text="通知" />
<ImageView
android:id="@+id/iv_new_msg"
android:layout_width="@dimen/px10dp"
android:layout_height="@dimen/px10dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="@dimen/px70dp"
android:src="@drawable/shape_red_circle" />
</RelativeLayout>
<TextView
android:id="@+id/tv_flow_order"
style="@style/item_textview_style"
android:drawableLeft="@drawable/perso_traffi"
android:text="流量交易訂單" />
</LinearLayout>
<!--幫助中心何恶,邀請好友,設(shè)置-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/ll_mark"
android:layout_marginTop="@dimen/px30dp"
android:background="@color/white"
android:divider="@drawable/inset_linearlayout_divider"
android:orientation="vertical"
android:showDividers="middle">
<TextView
android:id="@+id/tv_help"
style="@style/item_textview_style"
android:drawableLeft="@drawable/icon_bzzx"
android:text="幫助中心" />
<TextView
android:id="@+id/tv_invited_friend"
style="@style/item_textview_style"
android:drawableLeft="@drawable/icon_yqhy"
android:text="邀請好友" />
<TextView
android:id="@+id/tv_setting"
style="@style/item_textview_style"
android:drawableLeft="@drawable/icon_sz"
android:text="設(shè)置" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
最終的效果.png
和原來的對比嚼黔,效果一致细层,但是去掉了很多控件,看起來也簡潔了許多唬涧,LinearLayout分割線可用的情況特別多疫赎,例如個人中心頁面,關(guān)于我們界面碎节,設(shè)置頁面等等捧搞,趕快試一試吧!