Android 的原生 Menu 有两种实现方式:
① ActionBar 形式
② ToolBar 形式
示例图:
示例图.gif
一、在 ActionBar 上添加 Menu
布局:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".bar.ActionBarActivity">
<TextView
android:id="@+id/tv_actionbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="ActionBar" />
</RelativeLayout>
可以看到,就是一个非常普通的一个布局。
主题:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
自定义 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/action_actionbar"
android:title="ActionBar Menu"
app:showAsAction="never" />
</menu>
核心部分:
public class ActionBarActivity extends AppCompatActivity {
private TextView mTextView;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_actionbar);
mTextView = findViewById(R.id.tv_actionbar);
setTitle("ActionBar Title");
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.action_actionbar:
Snackbar.make(mTextView, "ActionBar menu click.", Snackbar.LENGTH_SHORT).show();
break;
default:
break;
}
return super.onOptionsItemSelected(item);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_actionbar, menu);
return true;
}
}
在 onCreate() 里面设置 ActionBar 的标题,通过 onOptionsItemSelected() 和 onCreateOptionsMenu() 设置 ActionBar 的 Menu 。
二、在 ToolBar 上添加 Menu
导入 Android 官方库 Design Support 库:
implementation 'com.android.support:design:27.0.2'
布局:(Material Design 样式)
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".bar.ToolBarActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay"
app:title="ToolBar Title" />
</android.support.design.widget.AppBarLayout>
<include
android:id="@+id/menu_content"
layout="@layout/content_menu" />
</android.support.design.widget.CoordinatorLayout>
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/content_menu"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context=".bar.ToolBarActivity"
tools:showIn="@layout/activity_toolbar">
<TextView
android:id="@+id/tv_toolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="ToolBar" />
</RelativeLayout>
主题:
<style name="AppTheme.ToolBar" parent="Theme.AppCompat.Light.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="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
自定义 Menu:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/action_toolbar"
android:title="ToolBar Menu" />
</menu>
核心部分:
public class ToolBarActivity extends AppCompatActivity {
private Toolbar mToolbar;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_toolbar);
mToolbar = findViewById(R.id.toolbar);
mToolbar.inflateMenu(R.menu.menu_toolbar);
mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
Snackbar.make(mToolbar, "ToolBar menu click.", Snackbar.LENGTH_SHORT).show();
return false;
}
});
}
}
通过设置 inflateMenu() 和 setOnMenuItemClickListener() 对 ToolBar 的 Menu 做操作。
以上就是 ActionBar 和 ToolBar 上实现 Menu 的方式。
网友评论