自定义带图标文本的块状态、条状菜单

使用场景


相信很多移动端开发者都很熟悉了,通常我们首先想到的就是使用 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

时间: 2024-09-11 09:24:57

自定义带图标文本的块状态、条状菜单的相关文章

状态条上能不能增加3个下推按钮控件,并且显示不同的图标?

问题描述 状态条上能不能增加3个下推按钮控件,并且显示不同的图标? 状态条上能不能增加3个下推按钮控件,并且显示不同的图标?怎么在状态条上增加下推按钮呢? 解决方案 http://www.jizhuomi.com/software/182.html

用POP动画编写带富文本的自定义动画效果

用POP动画编写带富文本的自定义动画效果 [源码] https://github.com/YouXianMing/UI-Component-Collection   [效果]   [特点] * 支持富文本 * 可定制型强(继承父类重写父类的startAnimation方法即可) * 支持动画的中断与持续 * 支持CAMediaTimingFunction * 数据与UI隔离,便于你封装属于你的类   [核心] // // POPNumberCount.h // POP // // Created

Android自定义带水滴的进度条样式(带渐变色效果)_Android

一.直接看效果 二.直接上代码 1.自定义控件部分 package com.susan.project.myapplication; import android.app.Activity; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.grap

Android自定义带增长动画和点击弹窗提示效果的柱状图DEMO_Android

项目中最近用到各种图表,本来打算用第三方的,例如MPAndroid,这是一个十分强大的图表库,应用起来十分方便,但是最终发现和设计不太一样,没办法,只能自己写了.今天将写好的柱状图的demo贴在这,该柱状图可根据数据的功能有一下几点:      1. 根据数据的多少,动态的绘制柱状图柱子的条数:      2. 柱状图每条柱子的绘制都有动态的动画效果:      3. 每条柱子有点击事件,点击时弹出提示框,显示相关信息,规定时间后,弹窗自动消失.      好了,先上演示图:      下边贴出

动态菜单项状态条提示工具条提示问题

问题的提出: 一个应用程序想要动态改变菜单项.使用CCmdUI::SetText("Menu Text")可以改变菜单文本,但是如何动态改变工具条和状态条的文本呢? 有几种策略,避免,欺骗,面对...... 首先,避免:为什么你非要动态改变菜单项?一般说来,这是个坏主意,动态菜单容易把人搞糊涂.我正在使用你的产品,本来用得好好的突然菜单项变了.不管什么时候,每当我看到一个改变菜单的应用时,都要琢麽为什么他们需要这样的用户界面设计. 然而,每一个规则都有例外,许多例子的动态改变菜单项都很

Android实现自定义带文字和图片Button的方法

  本文实例讲述了Android实现自定义带文字和图片Button的方法.分享给大家供大家参考.具体分析如下: 在Android开发中经常会需要用到带文字和图片的button,下面来讲解一下常用的实现办法. 一.用系统自带的Button实现 最简单的一种办法就是利用系统自带的Button来实现,这种方式代码量最小.在Button的属性中有一个是drawableLeft,这个属性可以把图片设置在文字的左边,但是这种方式必须让icon的背景色是透明的,如果icon的背景色不是透明的话,会导致点击按钮

js-sdk-微信JS-SDK分享自定义分享图标问题

问题描述 微信JS-SDK分享自定义分享图标问题 wx.config({ debug : false, appId : '${WEIXIN_SHARE_WEB_WX_APP_ID}', timestamp : '${WEIXIN_SHARE_TIMESTAMP}', nonceStr : '${WEIXIN_SHARE_NONCESTR}', signature : '${WEIXIN_SHARE_SIGNATURE}', jsApiList : [ 'onMenuShareAppMessage

Android实现自定义带文字和图片Button的方法_Android

本文实例讲述了Android实现自定义带文字和图片Button的方法.分享给大家供大家参考.具体分析如下: 在Android开发中经常会需要用到带文字和图片的button,下面来讲解一下常用的实现办法. 一.用系统自带的Button实现 最简单的一种办法就是利用系统自带的Button来实现,这种方式代码量最小.在Button的属性中有一个是drawableLeft,这个属性可以把图片设置在文字的左边,但是这种方式必须让icon的背景色是透明的,如果icon的背景色不是透明的话,会导致点击按钮时i

CIconListBox带图标的列表框类

有时候,我们需要在列表框ListBox中插入带图标的文字项,这就需要自己派生一个类出来了,网上的一个CIconListBox类还不错,网站http://www.codeguru.com/Cpp/controls/listbox/article.php/c4749/ 这里介绍下使用方法,源代码我有改动,环境Visual Studio 2008 SP1:1.基于对话框的工程,名称为IconListBoxTest;2.拖动控件到对话框上,按下图所示排列: 3.导入IconListBox.cpp和Ico