好久來這里了，分享一個demo源碼。
使用場景
效果圖


相信很多移動端開發者都很熟悉了，通常我們首先想到的就是使用 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


與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的自定义控件－条状、块状菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。