澳门新葡萄京娱乐场 10

ToolBar随心定制

工作以来公司UI设计师出的Android效果图都是iOS风格的Titlebar,新项目还是用原来那一套,不想重复造轮子,所以趁着这次练习
仿新浪微博Android客户端,抽取一个通用的iOS风格的Titlebar

     
 小弟在开发android的时候,对于自带的标题栏有深刻的印象,一个字,丑,我压根就看不上,丑就算了,改动性还很低,也就放出一些小改动的方法,然而,这并不能满足那些屌炸天的产品的需求,所以需要丢弃自带的标题栏,通过其他途径,去整一个。话说,其实自己封装的才是最好的,为什么这么说呢?

临近年末,项目没什么新需求了,主要做一些code
review和代码重构的工作。有一个工作是将我们app中的TitleBar替换为Android的原生控件ToolBar,ToolBar出来这么久,相信大家都不会陌生了。替换的工作并不难,但因为我们App原来的TitleBar是一个相对布局中间放了一些ImageButton和TextView等控件组成的,并不符合ToolBar的原生风格,所以我一开始打算放弃替换,但经过一番Google,发现原来还是可以轻松实现的,不得不感叹ToolBar的定制性真得很强。

但是作为Android开发者,平时学习练手时还是得紧跟Google的步伐,说不定哪天公司的UI射击狮们就出一套MD风格的效果图

       
因为,自己去封装,你想让它方,它还能圆?自己去封装的话,考虑要全面,复用性要强,拓展性也要强,维护起来比较容易。这个时候,你或许也会有这样的体会,别人封装的,或者第三方的,局限性都是有的,这个时候,就不满足你的需求了,这应该就是传说中的契约编程吧,遵守规定的规则去使用,还是很愉快的。

我需要替换的TitleBar样式

demo中演示了各种情况的标题和新浪微博首页选择微博分类案例

   
 总结,当你遇到一些变态的需求,之前封装的不满足的情况,这个时候,就需要自己去设定规则,去封装了。不知不觉扯这么多。。。

原生风格的ToolBar

效果图

澳门新葡萄京娱乐场 1

澳门新葡萄京娱乐场 2

关于ToolBar的基本用法网上一大堆,不会的童鞋可以自己去Google,我这里简单总结一下如何更自由的定制ToolBar。

基本使用

图1

一. Title居中

ToolBar默认的主Title是居左的,但是我们可以通过自定义ToolBar的子View来达到显示居中Title的效果。

<android.support.v7.widget.Toolbar
    android:id="@+id/toolBar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

    <TextView
        android:id="@+id/toolbar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="自定义标题"
        android:textColor="@color/black"
        android:textSize="@dimen/title_center_textsize" />

</android.support.v7.widget.Toolbar>

这样还可以单独控制中间标题的字体颜色和大小等。使用TextView作为title后,toolbar.setTitle(…)就可以设置为空或者不用设置了。

1.添加Gradle依赖

dependencies {
    compile 'com.android.support:appcompat-v7:22.2.0'
    compile 'cn.bingoogolapple:bga-titlebar:latestVersion@aar'
}

       好了,今天的主题是
封装标题栏,对于辩题蓝,普通的,简单粗暴的,最让人容易接受的标题页面,应该是分左、中、右,左边的一般是返回按钮,中间是标题文字,右边是页面拓展用的,比如跳其他页面。

二. 在ToolBar左侧放置Menu

在ToolBar添加Menu时,默认都是出现在右侧的,但我的需求是在左侧放置两个Menu,本来想通过设置NavigationIcon和logo来解决,但如果这样,只能设置两个图标在左边,而且图标之间的间距没办法调整,所以灵活性很差。后来发现一个非常好用的控件ActionMenuView,以前它可以搭配ActionBar来使用,现在同样可以用来自定义ToolBar的菜单。

    <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/title_height"
        android:background="@color/title_background"
        android:minHeight="@dimen/title_height"
        app:contentInsetLeft="0dp"
        app:contentInsetStart="0dp"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

        <android.support.v7.widget.ActionMenuView
            android:id="@+id/action_menu_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent" />

        <TextView
            android:id="@+id/toolbar_title"
            style="@style/TitleBar.Text.Center"
            android:layout_width="wrap_content"
            android:layout_height="match_parent" />


    </android.support.v7.widget.Toolbar>

将ActionMenuView放在ToolBar子布局中的第一个,它就会绘制在左侧,还需要注意给ToolBar设置下面的属性(而且需要注意,这里要使用”app:xxx”而不是”Android:xxx”,否则会有兼容性问题),因为当没有设置NavigationIcon和logo时,ToolBar左侧默认有一小段空白:

app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"

然后我们需要给ActionMenuView加载菜单,代码很简单:

ActionMenuView actionMenuView = (ActionMenuView) toolbar.findViewById(R.id.action_menu_view);
getMenuInflater().inflate(R.menu.menu_toolbar_left, actionMenuView.getMenu());
// 点击事件
actionMenuView.setOnMenuItemClickListener(new ActionMenuView.OnMenuItemClickListener() {
    @Override
    public boolean onMenuItemClick(MenuItem item) {
        return false;
    }
});

R.menu.menu_toolbar_left.xml文件就是放置在menu文件夹下我们自定义的菜单资源文件。

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/left_back_btn"
        android:icon="@drawable/ic_titlebar_back"
        android:title="后退"
        app:showAsAction="always"/>

    <item
        android:id="@+id/left_text_btn"
        android:title=""
        app:actionLayout="@layout/menu_layout_text_btn"
        app:showAsAction="always"/>

    <item
        android:id="@+id/left_icon_btn"
        android:icon="@drawable/ic_launcher"
        android:title=""
        app:showAsAction="always"/>

</menu>

左边菜单显示效果

细心的同学应该看到我第二个id为left_text_btn的菜单使用了app:actionLayout属性,这是使当前菜单显示你指定的layout布局,也是非常方便的定制功能。因为ToolBar中所有菜单的颜色必须统一指定(通过在AppTheme中指定”android:actionMenuTextColor”属性),没办法分开设置,所以如果需要单独设置某个菜单的颜色,可以指定它的app:actionLayout,上面的”@layout/menu_layout_text_btn”布局为一个简单的TextView,就不贴了,也可以通过代码指定:

MenuItem menuItem = actionMenuView.getMenu().findItem(R.id.left_text_btn);
menuItem.setActionView(R.layout.menu_layout_text_btn);

还有一个细节可能也有人关注到,就是如果菜单按钮是通过icon属性设置的图标按钮,长按就会出现Toast文字(title属性设置的文字)提示这个图标按钮的作用,即便title设为空字符串,也还是会弹出Toast,这是Android系统的默认设置,无法取消,如果实在不想要这个提示,可以通过指定其app:actionLayout为一个自定义的ImageButton来实现。注意当使用app:actionLayout属性定制菜单时,点击事件就需要通过设置app:actionLayout指定的layout中的View的Click监听来实现了

// 此时menuItem.getActionView()获取的View就是自定义的ImageButton或TextView
menuItem.getActionView().setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {

    }
});

默认的MenuItem点击效果为一个小圆形的水波纹效果,查看自带style是通过下面的资源文件实现的,自定义时可以指定为它以保持点击效果一致:

android:background="?attr/actionBarItemBackground"

2.在布局文件中添加BGATitlebar

<cn.bingoogolapple.titlebar.BGATitlebar
        android:id="@+id/titlebar"
        style="@style/TitleBar"
        app:bgatitlebar_leftDrawable="@drawable/selector_nav_friendsearch"
        app:bgatitlebar_rightDrawable="@drawable/selector_nav_pop"
        app:bgatitlebar_titleDrawable="@drawable/selector_nav_arrow_orange"
        app:bgatitlebar_titleDrawablePadding="3dp"
        app:bgatitlebar_titleText="bingoogolapple" />

封装标题栏,适用大多数需求,对于左边的图片,我设置的是默认的返回图标,但也可以替换其他的,下面是我所提供的一些需要传递的属性和方法参考:

三. Menu的间距和文字属性设置

有时我们需要设置按钮文字的颜色以及大小,还需要调整相邻按钮之间的间距,比如上图中可能有人会觉得”<“后退按钮和“关闭”按钮之间的间距太大了,这要如何调整呢?都可以通过指定Theme中的属性来设置。

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:actionMenuTextColor">@color/primary</item>
        <item name="android:actionMenuTextAppearance">@style/ActionMenuTextAppearance</item>
        <item name="android:actionButtonStyle">@style/ActionButtonStyle</item>
    </style>

android:actionMenuTextColor属性用来指定菜单文字的颜色,android:actionMenuTextAppearance是用来指定菜单文字的大小等属性

    <style name="ActionMenuTextAppearance" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Menu">
        <item name="android:textSize">@dimen/title_right_textsize</item>
        <item name="android:textStyle">normal</item>
    </style>

android:actionButtonStyle可以修改按钮的大小和间距

    <style name="ActionButtonStyle" parent="Widget.AppCompat.Light.ActionButton">
        <item name="android:minWidth">44dp</item>
        <item name="android:paddingLeft">10dp</item>
        <item name="android:paddingRight">10dp</item>
    </style>

这里因为api17以下使用的是paddingLeft和paddingRight,而api17以上使用的是paddingStart和paddingEnd(通过查看Widget.AppCompat.Light.ActionButton的style源码也可以看到),所以这里需要新建values-v17文件夹,在其下新建styles.xml来专门指定api17以上的ActionButtonStyle:

    <style name="ActionButtonStyle" parent="Widget.AppCompat.Light.ActionButton">
        <item name="android:minWidth">44dp</item>
        <item name="android:paddingStart">10dp</item>
        <item name="android:paddingEnd">10dp</item>
    </style>

ActionButton默认的android:minWidth属性值为48dp,默认左右的padding值为12dp。

ActionButton默认的android:minWidth属性值

所以如果我们需要修改按钮的间距,可以修改以上三个属性值,改小之后可以明显看到间距减小

minWidth改为20dp,左右padding改为0dp的效果

澳门新葡萄京娱乐场,3.在Activity或者Fragment中配置BGATitlebar

mTitlebar = (BGATitlebar) findViewById(R.id.titlebar);
mTitlebar.setDelegate(new BGATitlebar.BGATitlebarDelegate() {
    @Override
    public void onClickLeftCtv() {
        // 可选,根据实际业务重写该方法
    }

    @Override
    public void onClickTitleCtv() {
        // 可选,根据实际业务重写该方法
    }

    @Override
    public void onClickRightCtv() {
        // 可选,根据实际业务重写该方法
    }
});

属性:
isshowLeftBackIcon:是否需要显示左边的图片
leftImage:左边的图片(默认是返回键的图标)
isChange:是否替换左边的图片
centerText:中间的标题
rightText:右边的文字
rightImage:右边的图片
backgroundColor:标题栏的背景色(不传的话,默认背景)

四. 总结

以上就是这次替换的一小点经验总结,右边的菜单通过直接给ToolBar添加Menu就可以了,当然你也可以通过自定义的方式实现。通过以上几点,我们可以看到ToolBar的非常灵活的可定制性,不仅如此,如果你的菜单还有更不一样的地方,可以把ToolBar中的内容全部通过自定义布局来实现,也就是全部通过ToolBar的子View们来展示ToolBar的内容。

自定义属性说明

建议在项目中把下面这五项定义在styles.xml里

  • bgatitlebar_leftAndRightTextColor 左右按钮文字颜色
  • bgatitlebar_titleTextColor 中间标题文字颜色
  • bgatitlebar_leftAndRightTextSize 左右按钮文字大小
  • bgatitlebar_titleTextSize 中间标题文字大小
  • bgatitlebar_leftAndRightPadding 左右按钮在水平方向上的padding

下面这几项根据每个页面的业务写在layout中(可以把带有返回按钮的titlebar也单独抽取一个style)

  • bgatitlebar_leftText 左边按钮的文字
  • bgatitlebar_rightText 右边按钮的文字
  • bgatitlebar_titleText 中间标题文字
  • bgatitlebar_leftDrawable 左边按钮图标
  • bgatitlebar_rightDrawable 右边按钮图标
  • bgatitlebar_titleDrawable 中间标题图标
  • bgatitlebar_titleDrawablePadding
    中间按钮文本和图标之间的间距(当既有titleText,又有titleDrawable时,设置该属性,例如新浪微博首页选择微博分类
  • bgatitlebar_leftDrawablePadding
    左边按钮文本和图标之间的间距(当既有leftText,又有leftDrawable时,设置该属性)
  • bgatitlebar_rightDrawablePadding
    右边按钮和图标之间的间距(当既有rightText,又有rightDrawable时,设置该属性)

下面三项通常情况下不用,使用默认值就好。某个界面标题特别长并且左右文字短或者左右文字特别长并且标题特别短时单独配置

  • bgatitlebar_leftMaxWidth 左边按钮的最大宽度
  • bgatitlebar_rightMaxWidth 右边按钮的最大宽度
  • bgatitlebar_titleMaxWidth 中间标题的最大宽度

下面三项通常情况下不用,使用默认值就好。

  • bgatitlebar_isTitleTextBold 标题文字是否为粗体,默认为true
  • bgatitlebar_isLeftTextBold 左边文字是否为粗体,默认为false
  • bgatitlebar_isRightTextBold 右边文字是否为粗体,默认为false

代码是最好的老师,更多详细用法请查看demo

方法:
leftPress:左边的点击事件(不传的话,默认是返回是上个页面)
rightpress:右边的点击事件(不传的话,无响应,无默认)

接下来是处理标题左部分代码:

//默认展示
//_pressBackButton 是默认的左边点击事件

澳门新葡萄京娱乐场 3

图1:处理标题左边

如图1:左边的返回按钮是可以控制显示与否,点击事件,如果没有传递,那就是默认的点击事件,图片显示,如果没有传递要显示的图片,默认显示返回键图片。

澳门新葡萄京娱乐场 4

图2:右边文字

图2:这是右边文字相关,如果没传rightpress,那就是null,无影响。

澳门新葡萄京娱乐场 5

图3:右边图片

图3:右边图片相关代码,如果rightImage为null,那就无右边图片。

澳门新葡萄京娱乐场 6

图4

图4:适配了ios,据我所知,要有20的距离,相当于状态栏的高度吧,不设置,会与状态栏重叠,这是整个标题栏的组合。

到这里,就结束了,好吧,我在把样式也贴出来吧。

样式:
conststyles = StyleSheet.create({
  containerText: {
     flex: 1,
     alignItems: ‘center’,
     justifyContent: ‘center’,
     flexDirection: ‘row’,
     height: 44,
},
leftImage: {
width: 44,
height: 44,
},
rightImage: {
width: 30,
height: 30,
},
titleText: {
fontSize: 18,
color: Dimens.color_text_33,
},
rightTxt: {
fontSize: 15,
color: Dimens.color_text_33,
},
rightGreyTxt: {
fontSize: 15,
color: Dimens.color_text_99,
},
TouchableOpacityLeftText: {
position: ‘absolute’,
left: 0,
top: 8,
bottom: 8,
justifyContent: ‘center’,
},
TouchableOpacityRightText: {
position: ‘absolute’,
right: 15,
top: 8,
bottom: 8,
justifyContent: ‘center’,
},
TouchableOpacityRightImgview: {
position: ‘absolute’,
right: 0,
top: 8,
bottom: 8,
justifyContent: ‘center’,
}

好了,到这里就结束了,来看下效果图:

澳门新葡萄京娱乐场 7

左边图片存在

澳门新葡萄京娱乐场 8

左右两边都没有

澳门新葡萄京娱乐场 9

右边文字存在

以上是效果图,还有的没截出来,大家自己去尝试吧,就到这。

澳门新葡萄京娱乐场 10

     
认真看的朋友肯定能按照上面的实现出来,自己动手丰衣足食,也希望广大程序员改掉粘贴复制的习惯,快速成长起来。
      之后会把文件的下载地址发出来~

     
代码地址:https://github.com/niyige/justCoder/blob/master/src/view/titleBar.js

发表评论

电子邮件地址不会被公开。 必填项已用*标注