Android 自带ToolBar自定义中间标题&分类

好处

      官方自带的ToolBar很好用,省了很多多事,这里主要是有一个自定义的中间标题+分类

效果图:


代码

      采用include方式引进标题的:

布局代码

     activity_main.xml:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:orientation="vertical">

    <include
        android:id="@+id/common_toolbar"
        layout="@layout/common_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    其它代码
</LinearLayout>

toolbar布局代码

     common_toolbar.xml:

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:layout_width="match_parent"
       android:layout_height="wrap_content">

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

        <RadioGroup
            android:id="@+id/rg_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:orientation="horizontal">

            <RadioButton
                android:id="@+id/rb_recommend"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/btn_top_title_bac_selector"
                android:textColor="@drawable/font_white_pink_selector"
                android:textSize="16dp"
                android:button="@null"
                android:checked="true"
                android:text="推荐"/>

            <RadioButton
                android:id="@+id/rb_classify"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/btn_top_title_bac_selector"
                android:textColor="@drawable/font_white_pink_selector"
                android:textSize="16dp"
                android:button="@null"
                android:text="全部"/>
        </RadioGroup>
    </android.support.v7.widget.Toolbar>
</merge>

RadioButton样式简单不写了。。

java代码

      然后就是java中调用了:

HomeActivity.java必须继承BaseAppCompatActivity才可,然后实现其中的几个方法:

@InjectView(R.id.rg_title)
    RadioGroup rgTitle;

    @InjectView(R.id.rb_recommend)
    RadioButton rbRecommend;

    @InjectView(R.id.rb_classify)
    RadioButton rbClassify;

@Override
    public boolean onCreateOptionsMenu(Menu menu) {//ActionBar工具栏图标
        getMenuInflater().inflate(R.menu.menu_home, menu);
        return true;
    }

@Override
    public boolean onOptionsItemSelected(MenuItem item) {//ActionBar工具栏图标点击监听
        if (mActionBarDrawerToggle != null && mActionBarDrawerToggle.onOptionsItemSelected(item)) {
            return true;
        }

        switch (item.getItemId()) {
            case R.id.action_capture:
                readyGo(CaptureActivity.class);
                break;
            case R.id.action_about_us:
                readyGo(AboutUsActivity.class);
                break;
            case R.id.action_feedback:
                Bundle extras = new Bundle();
                extras.putString(FeedbackFragment.BUNDLE_KEY_CONVERSATION_ID, mFeedbackAgent.getDefaultConversation().getId());
                readyGo(FeedBackActivity.class, extras);
                break;
        }
        return super.onOptionsItemSelected(item);
    }

工具栏图标代码

      menu_home.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/action_capture"
        android:title="@string/menu_capture"
        android:orderInCategory="100"
        android:icon="@drawable/ic_search"
        app:showAsAction="always"/>

    <item
        android:id="@+id/action_about_us"
        android:title="@string/menu_about_us"
        android:orderInCategory="200"
        app:showAsAction="never"/>

    <item
        android:id="@+id/action_feedback"
        android:title="@string/menu_feedback"
        android:orderInCategory="300"
        app:showAsAction="never"/>
</menu>

自定义颜色字体大小背景色

     使用style来自定义字体颜色背景色和字体大小等

只用把app:popupTheme和app:Theme替换成自己的即可,这里只替换了app:popupTheme和增加了app:titleTextAppearance

布局代码

common_toolbar.xml:

<android.support.v7.widget.Toolbar
        android:id="@+id/common_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        app:titleTextAppearance="@style/ToolbarTitle"
        app:popupTheme="@style/ToolbarPopupTheme"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

样式代码

style.xml

 <!-- toolbar弹出菜单样式 -->
    <style name="ToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat">
        <item name="android:textSize">12sp</item>
        <item name="android:textColor">@color/font_pink</item>
        <item name="android:colorBackground">#FFFFFFFF</item>
    </style>

    <!-- toolbar标题样式 -->
    <style name="ToolbarTitle" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">
        <item name="android:textSize">14sp</item>
        <item name="android:textColor">@android:color/white</item>
    </style>


评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Beluga_白鲸

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值