好久來(lái)這里了，分享一個(gè)demo源碼。
使用場(chǎng)景
效果圖


相信很多移動(dòng)端開發(fā)者都很熟悉了，通常我們首先想到的就是使用 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>
我們寫一個(gè)還好，當(dāng)你重復(fù)寫三個(gè)以上這樣的控件時(shí)你可能一直在重復(fù)復(fù)制粘貼的動(dòng)作，而且你的布局層次會(huì)變得復(fù)雜而冗長(zhǎng)。相信有追求的猿猿都會(huì)想到自定義了，于是就出現(xiàn)了這個(gè)開源 demo。
簡(jiǎn)單使用1)SingleBar Style(根據(jù)需要指定右邊帶尖角)
效果圖：

代碼：
<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"
? ?? ?? ?? ?? ? />
這樣是不是簡(jiǎn)潔多了。
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"
? ?? ?? ?? ?? ? />? ?? ?? ?
簡(jiǎn)單吧，實(shí)際上就是兩個(gè)SingleBar疊在一起，然后你指定一下邊界框就行了（第一個(gè) SingleBar 的下邊框指定和文本對(duì)齊，第二個(gè)??SingleBar 不設(shè)置上邊框）。

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

這個(gè)使用就更簡(jiǎn)單了，細(xì)心的你一定發(fā)現(xiàn)了，只需多設(shè)置一個(gè)屬性：app:vertical="true"，從兒實(shí)現(xiàn)來(lái)圖標(biāo)文本的縱向排列。

4) 沒(méi)有了，下載源碼使用吧。
主要介紹demo中自定義控件的使用，個(gè)人不喜歡上了就說(shuō)一堆技術(shù)實(shí)現(xiàn)細(xì)節(jié)，先下載demo跑起來(lái)看看效果，再去研究實(shí)現(xiàn)細(xì)節(jié)，這比較符合人的認(rèn)知邏輯。源碼下載地址：https://github.com/liuguangli/BlockIconTextMenu
ps：作為碼農(nóng)，你如果還沒(méi)有GitHub賬號(hào)趕緊好好反省下吧。文章首發(fā)：http://www.liuguangli.win/archives/96


與50位技術(shù)專家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。