使用場景
效果圖
相信很多移動端開發者都很熟悉了，通常我們首先想到的就是使用 RelativeLayout 方式處理，例如：
<RelativeLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:onClick="onClickToMain"
>
<ImageView
android:layout_width="@dimen/icon_len"
android:layout_height="@dimen/icon_len"
android:src="@drawable/selector_icon_main"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/index"
android:layout_alignParentBottom="true"
android:gravity="center"
android:layout_marginBottom="3dp"
android:textColor="@color/selector_common_icon_text"
android:textSize="@dimen/common_content_text_small"
/>
</RelativeLayout>
我們寫一個還好，當你重複寫三個以上這樣的控件時你可能一直在重複複製粘貼的動作，而且你的佈局層次會變得複雜而冗長。相信有追求的猿猿都會想到自定義了，於是就出現了這個開源 demo。
簡單使用1)SingleBar Style(根據需要指定右邊帶尖角)
效果圖：
代碼：
<com.blockmenu.liuguangli.blockmenuitem.BlockMenuItem
android:layout_width="match_parent"
android:background="@color/commonDivBgWhite"
android:layout_marginTop="20dp"
android:layout_height="62dp"
app:mainIcon="@mipmap/icon_mine"
app:IconMargin="15dp"
app:mainIconSize="24dp"
app:topBorder="0.5dp"
app:bottomBorder="0.5dp"
app:text="@string/butler"
app:textSize="@dimen/common_content_text"
app:textMargin="10dp"
app:extendIcon="@mipmap/arrow_right_gray"
/>
這樣是不是簡潔多了。
2）BarGroup Style
效果圖：
代碼：
<com.blockmenu.liuguangli.blockmenuitem.BlockMenuItem
android:layout_width="match_parent"
android:background="@color/commonDivBgWhite"
android:layout_marginTop="10dp"
android:layout_height="62dp"
app:mainIcon="@mipmap/icon_service"
app:IconMargin="15dp"
app:mainIconSize="24dp"
app:topBorder="0.5dp"
app:bottomBorder="0.5dp"
app:text="@string/service"
app:textSize="@dimen/common_content_text"
app:textMargin="10dp"
app:extendIcon="@mipmap/arrow_right_gray"
app:bottomBorderStartFromText="true"
/>
<com.blockmenu.liuguangli.blockmenuitem.BlockMenuItem
android:layout_width="match_parent"
android:background="@color/commonDivBgWhite"
android:layout_height="62dp"
app:mainIcon="@mipmap/icon_home"
app:IconMargin="15dp"
app:mainIconSize="24dp"
app:bottomBorder="0.5dp"
app:text="@string/shake_sopen_door"
app:textSize="@dimen/common_content_text"
app:textMargin="10dp"
app:extendIcon="@mipmap/arrow_right_gray"
/>
簡單吧，實際上就是兩個SingleBar疊在一起，然後你指定一下邊界框就行了（第一個 SingleBar 的下邊框指定和文本對齊，第二個 SingleBar 不設置上邊框）。
3)Block Style
效果圖：
代碼：
<com.blockmenu.liuguangli.blockmenuitem.BlockMenuItem
android:layout_width="fill_parent"
android:layout_height="fill_parent"
app:mainIcon="@mipmap/icon_butler_pressed"
app:IconMargin="15dp"
app:topBorder="2dp"
app:text="@string/butler"
app:textSize="@dimen/common_content_text"
app:textColor="@color/common"
app:extendIcon="@mipmap/arrow_right_gray"
app:textMargin="10dp"
app:mainIconSize="60dp"
app:vertical="true"
/>
這個使用就更簡單了，細心的你一定發現了，只需多設置一個屬性：app:vertical="true"，從兒實現來圖標文本的縱向排列。
4) 沒有了，下載源碼使用吧。
主要介紹demo中自定義控件的使用，個人不喜歡上了就說一堆技術實現細節，先下載demo跑起來看看效果，再去研究實現細節，這比較符合人的認知邏輯。源碼下載地址：https://github.com/liuguangli/BlockIconTextMenu
ps：作爲碼農，你如果還沒有GitHub賬號趕緊好好反省下吧。文章首發：http://www.liuguangli.win/archives/96