搜索
您的当前位置:首页正文

ToolBar的简单使用

来源:二三娱乐

第一步:就是要确保你的Activity要继承自AppCompatActivity

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        }
}

第二步:要做的就是隐藏掉默认的ToolBar,方法很简单,有两种。

  1. 可以修改主题
<application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity
            android:name=".MainActivity"
            android:theme="@style/AppTheme.NoActionBar"
            android:icon="@mipmap/ic_launcher"
            android:label="ACTIONBAR"
            >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
            </intent-filter>
        </activity>
    </application>

从上面的代码可以看到application的主题是默认主题,mainactivity的主题则是修改的主题,修改主题样式的代码如下:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">       
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
    <style name="AppTheme.NoActionBar" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/DodgerBlue</item>
        <item name="colorPrimaryDark">@color/RoyalBlue</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>
</resources>
  1. java代码隐藏
ActionBar actionBar = getSupportActionBar();
actionBar.hide();  //隐藏ActionBar
actionBar.show();  //显示ActionBar

第三步:在布局中加入ToolBar

<android.support.v7.widget.Toolbar
            android:id="@+id/main_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:elevation="20dp"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
        </android.support.v7.widget.Toolbar>

这里popupTheme的样式也可以自己修改,如让popupmenu显示在actionbar下方:

<style name="ToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat.Light">
        <item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item> <!--新增一个item,用于控制menu-->
    </style>
    <style name="OverflowMenuStyle" parent="Widget.AppCompat.Light.PopupMenu.Overflow">
        <item name="overlapAnchor">false</item>  <!--把该属性改为false即可使menu位置位于toolbar之下-->
    </style>

在 Activity 的 onCreate()方法中,调用 Activity 的setSupportActionBar()方法,然后传递 Activity 的工具栏。该方法会将工具栏设置为 Activity 的应用栏。

Toolbar toolbar = (Toolbar) findViewById(R.id.main_toolbar);
 setSupportActionBar(toolbar);

第四步:toolBar添加一些操作
在资源文件夹中创建menu文件夹,新建一个xxxx.xml(test.xml)添加如下代码:

<?xml version="1.0" encoding="utf-8"?>
<menu
    
    
    <item
        android:id="@+id/action_favorite"
        android:icon="@mipmap/ic_launcher"
        android:title="@string/action_favorite"
        app:showAsAction="ifRoom">
    </item>
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="@string/action_settings"
        app:showAsAction="never" />
</menu>

showAsAction属性有三个值

  1. always表示永远显示在ActionBar中,如果屏幕空间不够则无法显示
  2. ifRoom表示屏幕空间够的情况下显示在ActionBar中,不够的话就显示在overflow中,
  3. never则表示永远显示在overflow中

第五步:为Action添加点击事件

@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return super.onCreateOptionsMenu(menu);
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case R.id.action_settings:
                Toast.makeText(this, item.getTitle(), Toast.LENGTH_SHORT).show();
                break;
            case R.id.action_favorite:
                Toast.makeText(this, item.getTitle(), Toast.LENGTH_SHORT).show();
                break;
            default:
                break;
        }
        return super.onOptionsItemSelected(item);
    }
Top