很多时候,Androdi应用程序的UI都按照iOS的设计标准实现。以至于Android应用程序失去了许多系统特性。但并无法掩饰许多Android自带的非常好用的系统级控件。
这篇文章简单介绍ToolBar的知识,实践ToolBar的使用。
记录我跟Android的邂逅。
从 Android 3.0(API 级别 11)开始,所有使用默认主题的 Activity 均使用 ActionBar 作为应用栏。不过,经过不同 Android 版本的演化,应用栏功能已逐渐添加到原生 ActionBar 中。因此,原生 ActionBar 的行为会随设备使用的 Android 系统的版本而发生变化。相比之下,Toolbar 可以在任何能够使用该支持库的设备上使用。
例如,Toolbar 小部件能够在运行 Android 2.1(API 级别 7)或更高版本的设备上提供 Material Design 体验,但除非设备运行的是 Android 5.0(API 级别 21)或更高版本,否则原生操作栏不会支持 Material Design。
compile 'com.android.support:appcompat-v7:26.0.0-alpha1'
public class MyActivity extends AppCompatActivity {
// ...
}
<application
android:theme="@style/Theme.AppCompat.Light.NoActionBar"
/>
.support.v7.widget.Toolbar
android:id="@+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
Material Design 规范建议应用栏具有 4 dp 的仰角。
将工具栏定位在 Activity 布局的顶部,因为您要使用它作为应用栏。
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_my);
Toolbar myToolbar = (Toolbar) findViewById(R.id.my_toolbar);
setSupportActionBar(myToolbar);
}
经过以上5个步骤,ToolBar就已经成功添加到我们Activity的顶部了。
但是目前ToolBar的样式只是显示了我们应用的标题,接下来我们看如何在ToolBar中增加按钮。效果如图
ToolBar的一大亮点之一就是允许添加很多的Action动作在其上。
在res下新建menu资源文件夹,然后在menu文件夹中创建菜单栏按钮布局menu_main.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_search"
android:title="@string/action_search"
android:icon="@drawable/ic_search"
app:showAsAction="ifRoom|collapseActionView"
app:actionViewClass="android.support.v7.widget.SearchView" />
<item
android:id="@+id/action_favorite"
android:icon="@drawable/ic_favorite_black_48dp"
android:title="@string/action_favorite"
app:showAsAction="always"/>
<item android:id="@+id/action_settings"
android:title="@string/action_settings"
app:showAsAction="never"/>
menu>
其中一个关键的属性showAsAction是控制按钮在Item中的显示情况的。有几个值可以设置:
初始化menue的布局文件:
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
控制menue中item的点击事件:
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.action_settings:
// User chose the "Settings" item, show the app settings UI...
return true;
case R.id.action_favorite:
Toast.makeText(mContext,"点击了喜欢菜单",Toast.LENGTH_SHORT).show();
return true;
default:
// If we got here, the user's action was not recognized.
// Invoke the superclass to handle it.
return super.onOptionsItemSelected(item);
}
}
经过以上两个步骤,你就可以在ToolBar中随意定制右侧的按钮,并操作其点击事件。
使用ToolBar可以非常简单的实现页面的返回操作。例如,我现在新建了一个SecondActivity,并在SecondActivity中也加入了ToolBar控件,那么通过以下几步,就可以很简单的实现ToolBar上面添加一个返回按钮,点击返回上一页的操作。
<activity android:name=".SecondActivity"
android:parentActivityName=".MainActivity">
<meta-data
android:name="android.support.PARENT_ACTIVITY"
android:value=".MainActivity" />
activity>
Android4.1以后新增的android:parentActivityName属性可以帮助SecondActivity声明上一级Activity。这里为了适配低版本需要同时声明meta-data属性。
public class SecondActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_second);
Toolbar myToolbar = (Toolbar) findViewById(R.id.my_toolbar);
setSupportActionBar(myToolbar);
ActionBar ab = getSupportActionBar();
ab.setDisplayHomeAsUpEnabled(true);
}
}
这样ToolBar自己新增了返回按钮,并实现了点击返回按钮返回到上一级MainAcitity的动作。
此外,ToolBar不仅可以添加按钮,还可以添加一些特定的view,比如SearchView。
我们给menu_main文件中新增一个搜索的view
- "@+id/action_search"
android:title="@string/action_search"
android:icon="@drawable/ic_search"
app:showAsAction="ifRoom|collapseActionView"
app:actionViewClass="android.support.v7.widget.SearchView" />
效果如下:
由于我们给该item指定了
app:actionViewClass="android.support.v7.widget.SearchView"
当我们点击搜索按钮的时候,ToolBar会自动处理为SearchView的样式
没错,看似我们什么都没做,但其实已经实现了很棒的交互效果。那么添加了SearchView,我们如何实现其监听操作
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
MenuItem searchItem = menu.findItem(R.id.action_search);
final SearchView searchView =
(SearchView) MenuItemCompat.getActionView(searchItem);
searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
@Override
public boolean onQueryTextSubmit(String query) {
Toast.makeText(mContext,"开始搜索..." + query,Toast.LENGTH_SHORT).show();
Log.e("wj","开始搜索..." + query);
return false;
}
@Override
public boolean onQueryTextChange(String newText) {
Log.e("wj","输入框值..." + newText);
return false;
}
});
return true;
}
我们只需要在初始化Menue布局的地方实现SearchView的动作监听就可以。
至此,ToolBar的介绍就全部介绍了。有没有感觉ToolBar真的太强大了。当然,这里我还没有将ToolBar跟Material Design中的控件进行交互处理,可能有些同学知道Material Design中通过几个控件的结合使用,可以实现各种漂亮的页面交互效果。以后有时间我会继续实践ToolBar跟其他控件结合使用。
感觉有帮助的同学欢迎留言交流,点赞关注!谢谢。