Android5.X之ToolBar

作者: Reathin | 来源:发表于2017-03-20 20:45 被阅读69次

ToolBar

众所周知,在使用ActionBar的时候,一堆的问题:这个文字能不能定制,位置能不能改变,图标的间距怎么控制神马的,由此暴露出了ActionBar设计的不灵活。为此官方提供了ToolBar,并且提供了supprot library用于向下兼容。Toolbar之所以灵活,是因为它其实就是一个ViewGroup,我们在使用的时候和普通的组件一样,在布局文件中声明。

隐藏ToolBar

直接隐藏原本的ActionBar即可

  • 使用Theme.AppCompat.Light.NoActionBar样式
  • 使用如下属性:

<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>(SDK <= 21)
<item name="windowNoTitle">true</item>(SDK >= 22)

例:

<style name="AppTheme" parent="Theme.AppCompat.Light">

        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>

        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <item name="android:textColorPrimary">@android:color/white</item>
        <item name="android:navigationBarColor">#4876FF</item>

        <item name="android:textSize">15sp</item>
        <item name="android:textColor">@android:color/white</item>

        <item name="android:windowBackground">@android:color/background_light</item>
        
    </style>

在布局文件中声明

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent" />

代码中设定

public class MainActivity extends AppCompatActivity 
{
    @Override
    protected void onCreate(Bundle savedInstanceState) 
   {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

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

注意: setSupportActionBar要求你的activity继承自ActionBarActivity或者V7中的AppCompatActivity

自定义ToolBar

ToolBar中包含Nav Icon , Logo , Title , Sub Title , Menu Items

代码中定义

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
// App Logo
toolbar.setLogo(R.mipmap.ic_launcher);
 // Title
toolbar.setTitle("App Title");
// Sub Title
toolbar.setSubtitle("Sub title");
setSupportActionBar(toolbar);
//Navigation Icon
toolbar.setNavigationIcon(R.drawable.ic_launch);

布局设置部分属性

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

  <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        app:title="App Title"
        app:subtitle="Sub Title"
        app:navigationIcon="@drawable/ic_toc_white_24dp"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        android:layout_width="match_parent"
        android:background="?attr/colorPrimary"/>
</LinearLayout>

Menu Item

MenuItem设置同ActionBar,MenuItem,依然支持在menu/menu_xxx.xml去声明,然后复写onCreateOptionsMenu和onOptionsItemSelected即可。

?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/menu_search"
        android:icon="@android:drawable/ic_menu_search"
        android:title="action_search"
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="always"/>

    <item
        android:id="@+id/menu_share"
        android:icon="@android:drawable/ic_menu_share"
        android:title="action_share"
        app:actionProviderClass="android.support.v7.widget.ShareActionProvider"
        app:showAsAction="always"/>

    <item
        android:id="@+id/menu_setting"
        android:title="Setting"
        app:showAsAction="never"/>
</menu>

@Override
    public boolean onCreateOptionsMenu(Menu menu)
    {
        getMenuInflater().inflate(R.menu.main_menu,menu);
    }

MenuItem设置事件回调

toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() 
{
     @Override
     public boolean onMenuItemClick(MenuItem item) 
     {
         return false;
     }
});

在ToolBar中添加控件

布局定义

<android.support.v7.widget.Toolbar
        android:id="@+id/tb_header"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        app:navigationIcon="@mipmap/ic_launcher"
        app:titleMarginStart="30dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="@string/app_name"/>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="right"
            android:gravity="center_vertical"
            android:layout_marginRight="15dp">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@android:drawable/ic_menu_search"
                android:layout_marginRight="10dp"/>

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@android:drawable/ic_menu_share"/>
        </LinearLayout>

    </android.support.v7.widget.Toolbar>

Toolbar其实就是一个ViewGroup,我们在使用的时候和普通的组件一样使用

相关文章

网友评论

    本文标题:Android5.X之ToolBar

    本文链接:https://www.haomeiwen.com/subject/yzminttx.html