Toolbar拾遗

本次接着上篇《Toolbar的基本使用》，来点实战吧 ~

上篇文章遗留的问题，在下面的实战中会有具体体现，开始战斗吧 ~~

1. 网易云音乐

来张演示gif先 ~

开始，Toolbar使用前准备还记得吗？
- 禁用ActionBar
- 启用Toolbar

接下来，在 activity_layout.xml 中添加 toolbar 元素

<android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize">...
</android.support.v7.widget.Toolbar>

设置 Toolbar 背景色， colors.xml 中，我们设置的 colorPrimary 值为 #FFCE3D3A
```
android:background="?attr/colorPrimary"
```

添加 NavigationIcon

app:navigationIcon="@drawable/ic_nav_main"

设置不显示Title

toolbar.setTitle("");//这里我使用的是这种方式，感觉不是很好

添加 Custom Views

中间的三个图标，我使用的是 RadioButton 方式实现的

    <RadioGroupandroid:layout_gravity="center"       // 设置居中显示android:orientation="horizontal"      // 设置内部的RadioButton横向显示...><RadioButtonandroid:id="@+id/ib_disco"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:background="@drawable/ic_ib_disco"  // 设置背景图片,这里用到了selector哟android:button="@null"                      // 不显示RadioButton那个圆形按钮android:scaleX="0.8"                        // 设置背景图片的缩放比例 android:scaleY="0.8"  /><RadioButton                                    //三个RadioButton的样式设置是同样的android:id="@+id/ib_music".../><RadioButtonandroid:id="@+id/ib_friends".../></RadioGroup>

来看看背景图的drawable吧，selector是这样写的：

    <?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:drawable="@drawable/ic_discover_checked"android:state_checked="true"/> <!-- checked --><item android:drawable="@drawable/ic_discover_normal"/> <!-- default --></selector>

旁白： RadioButton设置背景图片拉伸，样子丑陋，设置scaleX/Y属性进行美化

好蠢啊我，Google搜索 “radiobutton背景图片拉伸” 愣是找不到解决方案，换成 “radiobutton background size” 就找到了，大概 stackflow 欺我四级没过，强制我使用英文吧！！

最后，还有一个搜索按钮（Action Menu，你还记得吗？）

在 res 文件夹下新建 menu 文件夹，然后在 res/menu 文件夹下新建 menu_resource_file

它的内容是这样的：

<?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"><itemandroid:id="@+id/action_search"                              app:actionViewClass="android.support.v7.widget.SearchView"   // 注意前缀是appandroid:icon="@drawable/ic_action_search"                    android:title="@string/action_search"                        app:showAsAction="ifRoom|collapseActionView"/>
</menu>

是不是已经有些样子了 ~~ ，同样的，有躯体更要有灵魂，添加事件监听吧 ~

RadioButton的选中事件

实现 RadioGroup.OnCheckedChangedListener 即可

    public class MainActivity extends AppCompatActivityimplements RadioGroup.OnCheckedChangeListener {private RadioGroup mRadioGroup;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);...mRadioGroup = (RadioGroup) findViewById(R.id.rg_container);mRadioGroup.setOnCheckedChangeListener(this);//注意看这里，我们在这里设置默认状态下，第一个RadioButton被选中((RadioButton) mRadioGroup.getChildAt(0)).setChecked(true);         }@Overridepublic void onCheckedChanged(RadioGroup group, @IdRes int checkedId) {switch (checkedId) {case R.id.rb_disco:...break;...}}}

运行看下，是不是感觉很棒，可以的，那NavigationIcon不用说了，关于 Action Views & Providers 还有 SearchView 因为可以单门做一个专题去写，就不多说，这里以一种简单的方式实现

SearchView的搜索文本事件

@Override
public boolean onCreateOptionsMenu(Menu menu) {getMenuInflater().inflate(R.menu.toolbar_action, menu);MenuItem searchItem = menu.findItem(R.id.action_search);mSearchView = (SearchView) MenuItemCompat.getActionView(searchItem);mSearchView.setSubmitButtonEnabled(true);// 这里是设置展开的搜索框中，搜索按钮的点击事件// 你看到的搜索按钮的样子是不是很尴尬，一个大于号 > ,没关系，那个图标可以通过反射的方式更改mSearchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {@Overridepublic boolean onQueryTextSubmit(String query) {Toast.makeText(MainActivity.this, query, Toast.LENGTH_SHORT).show();return true;}@Overridepublic boolean onQueryTextChange(String newText) {...return true;}});return true;
}

好吧，上面这个案例就到此结束吧，好像还有些东西没讲到，恩，继续（下面的例子就不一步步的写了，直接贴代码好了..）

2. 标题居中

先看效果图

实现思路，Toolbar中间位置，添加TextView，同时设置Title为空字符串，代码如下

<android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"android:background="?attr/colorPrimary"app:navigationIcon="@drawable/ic_arrow_back"app:theme="@style/AppTheme.AppBarOverlay"><TextViewandroid:id="@+id/tv_title"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"           // 不要忘记这里设置居中android:text="标题居中"   android:textColor="@android:color/white"android:textSize="20sp"/></android.support.v7.widget.Toolbar>

3. 新浪微博

先看效果图 ~

实现思路，Toolbar作为一个ViewGroup，那就往里面可劲添加子View吧（真的是这样子吗？？），看代码

     <android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"android:background="?attr/colorPrimary"app:theme="@style/AppTheme.AppBarOverlay"><Buttonandroid:id="@+id/btn_add_friends"style="@style/Widget.AppCompat.Button.Borderless"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="start"                     //位置居左，和left效果相似android:text="添加好友"android:textColor="@android:color/white"android:textSize="16sp"/><TextViewandroid:id="@+id/tv_title"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"                    //位置居中android:text="我"android:textColor="@android:color/white"android:textSize="20sp"/><Buttonandroid:id="@+id/btn_settings"style="@style/Widget.AppCompat.Button.Borderless"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="end"                        //位置居右，和right效果相似android:text="设置"android:textColor="@android:color/white"android:textSize="16sp"/></android.support.v7.widget.Toolbar>

哈，看似还挺简单哈，右侧的设置看到了吗？其实右侧的设置我们使用Action Menu就可以了 ~~，像下面这样：

    <?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:id="@+id/action_settings"android:title="@string/action_settings"/></menu>

不过这里有一点就是： Toolbar 样式，因为直接这样写，menu文字是黑色的，那么注意到，上面我写了这样一行代码

    app:theme="@style/AppTheme.AppBarOverlay"

设置 Toolbar的样式 ，那么这个 AppTheme.AppBarOverlay 又是什么鬼？

     <style name="AppTheme.AppBarOverlay" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar"></style>

嘿，基本什么都没配置，直接继承自 ThemeOverlay.AppCompat.Dark.ActionBar

在 style 标签中我们可以配置toolbar的相关样式，比如设置toolbar和menu文字的颜色：

    <item name="android:textColorPrimary">@color/...</item>

哈，什么，你怎么知道有这么个属性？ Na，最直接的方式就是网上直接搜解决方案（很多时候结果并不满意！），比较好的方式我认为就是看API文档

嗯？篇幅似乎长了点，好吧，算是对Toolbar有些认识了吧，对于Toolbar右侧的操作或是图标或是文字，好像大都是Menu完成的，那么关于Menu，尤其是actionViewClass中我们自定义Action View实现一些效果，比方说一个Toolbar右侧刷新的图标，那我们点击的时候，这个图标有一个旋转的动画，另外还有一些PopupMenu相关内容，那么具体怎么实现呢？

嘿，等着把其他的写完，再开一个Menu专题吧！

本次就结束了，如果你有更好的建议或意见，欢迎关注左侧公众号oogh，后台留言，（公众号刚注册，没有原创，留言功能…）

Toolbar实战（来点小栗子...）相关推荐

c语言 lookup函数怎么用_菜鸟记502用lookup和vlookup函数核对数据的一个小栗子
欢迎转发扩散点在看万一您身边的朋友用得着呢? 各位朋友早上好,小菜继续和您分享经验之谈,截止今日小菜已分享400+篇经验之谈,可以文章编号或关键词进行搜索. 微信推送规则发生改变,如果您想看到小菜每 ...
一个小栗子聊聊JAVA泛型基础
背景周五本该是愉快的,可是今天花了一个早上查问题,为什么要花一个早上?我把原因总结为两点: 日志信息严重丢失,茫茫代码毫无头绪. 对泛型的认识不够,导致代码出现了BUG. 第一个原因可以通过以后编码 ...
web servieces 学习小栗子
苦恼啊公司总是派我出差一出就是一个月总这么着日子过不下去啊媳妇都怒了催我赶紧找工作这就得强化能力应付笔试面试不扯了 web services 总听这个名词儿,但是还真是没深究,因为项目中也 ...
Cocos Creator入门实战：桌球小游戏
Cocos Creator入门实战:桌球小游戏转载请保留原文链接:https://blog.csdn.net/zzx023/article/details/90035153 本篇主要是希望能够通过C ...
HaaS EDU物联网项目实战：微信小程序实现云养花
HaaS EDU K1是一款高颜值.高性能.高集成度的物联网开发板,板载功能强大的4核(双核300Mhz M33+双核1GHz A7)主芯片,2.4G/5G双频Wi-Fi,双模蓝牙(经典蓝牙/BLE) ...
前端实战小案例--canvas实战之FlappyBird小游戏
前端实战小案例--canvas实战之FlappyBird小游戏想练习更多前端案例,请进个人主页,点击前端实战案例->传送门觉得不错的记得点个赞?支持一下我0.0!谢谢了! 不积跬步无以至千里 ...
Pygame从0实战9(泡泡小游戏碰撞检测)
1.Pygame从0实战8(泡泡小游戏碰撞检测) 1.自己实现碰撞检测思路: Rect()对象center属性就是小球的圆心,那么两个Rect()对象(两个小球) center属性的距离和一个Rec ...
Pygame从0实战10(泡泡小游戏添加音效)
1.Pygame从0实战10(泡泡小游戏添加音效) 这节我们将如何在Pygame游戏中添加音效并且在上节未完成的泡泡游戏中添加音效下面是资源链接点击打开链接密码:hfjz 播放声音和音效建议 ...
Linux一键自动安装小栗子桌面可以用来挂小栗子机器人
Linux系统还是用7.6的吧,当然,你要用别的也没问题,这不是硬性要求 Linux系统对新手虽然不太友好(特别是我之前想挂机器人,就要弄个Windows系统的服务器或者挂机宝) 某天我看到网上分享出 ...
Cocos Creator游戏引擎可以支持鼠标吗_Cocos Creator入门实战：桌球小游戏
本文作者:BigBear 多年游戏行业研发经验精通Unreal.CocosCreator游戏引擎参与过多款手游.端游项目的研发 Cocos Creator入门实战:桌球小游戏本篇主要是希望能够通 ...

Toolbar实战（来点小栗子...）

Toolbar拾遗

1. 网易云音乐

2. 标题居中

3. 新浪微博

Toolbar实战（来点小栗子...）相关推荐

最新文章

热门文章