使用ToolBar实现功能及原理

来源:互联网 发布:samba端口转发 编辑:程序博客网 时间:2024/06/05 06:58

什么是toolbar

Android 3.0  Android 推了 ActionBar这个控件,而到了2013Google开始大力地推动所谓的android style,想要逐渐改善过去android纷乱的界面设计,希望让终端使用者尽可能

android 手机有个一致的操作体验。ActionBar过去最多人使用的两大套件就是ActionBarSherlock以及官方提供在support library v 7里的AppCompat

 

oolbar的基本套用:

1)个性化 Color Palette

我们可以根据我们的app的风格,去定制Color Palette(调色板),重点有以下几个属性:

 

    colorPrimary 对应ActionBar的颜色。

    colorPrimaryDark对应状态栏的颜色

    colorAccent 对应EditText编辑时、RadioButton选中、CheckBox等选中时的颜色。

 

对于5.0以下的设备,目前colorPrimaryDark无法去个性化状态栏的颜色;底部的navagationBar可能也不一样,更别说设置颜色了。

 

ToolBar的使用:

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

1.隐藏原本ActionBar,通过修改我们的基础主体为:@style/Theme.AppCompat.Light.NoActionBar
(改主体在清单文件里进行修改,你可以改变某个Activity的主题,也可以直接改变应用的主题,应用主题改application节点下内容)

<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android"          package="com.example.android.toolbarapp">    <application        android:allowBackup="true"        android:icon="@mipmap/ic_launcher"        android:label="@string/app_name"        android:supportsRtl="true"        android:theme="@style/AppTheme">        <activity android:name=".MainActivity"                  <!--这里是设置ActionBar-->            android:theme="@style/Theme.AppCompat.Light.NoActionBar">            <intent-filter>                <action android:name="android.intent.action.MAIN"/>                <category android:name="android.intent.category.LAUNCHER"/>            </intent-filter>        </activity>    </application></manifest

然后我们在XML布局可通过ToolBar添加文本,或者按钮等

效果图

      


 2:Java布局

在布局文件里声明ToolBar

<?xml version="1.0" encoding="utf-8"?><RelativeLayout    xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent">    <!--设置ToolBar的背景颜色,可以把ToolBar直接当容器使用--><android.support.v7.widget.Toolbar    android:id="@+id/toolbar"    android:background="#ffbf00"    android:layout_width="match_parent"    android:layout_height="wrap_content">    <!--你也可以在这里设置标题的文本-->    <TextView        android:textColor="#f20606"        android:textSize="25sp"        android:text="TextView"        android:layout_width="wrap_content"        android:layout_height="wrap_content"/></android.support.v7.widget.Toolbar></RelativeLayout>

3:Java代码

代码中初始化ToolBar

对ToolBar做个性化设置:

1.通过:mToolbar.setTitle("主标题!");设置主标题

2.通过:setSupportActionBar(mToolbar);标题栏

3.通过:mToolbar.setLogo(R.mipmap.ic_launcher);设置图标

4:通过: mToolbar.setSubtitle("子标题!");设置子标题

public class MainActivity extends AppCompatActivity {    private Toolbar mToolbar;        @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        //初始化控件        mToolbar = (Toolbar) findViewById(R.id.toolbar);        //设置主标题,必须要在setSupportActionBar代码执行顺序的前面        mToolbar.setTitle("主标题!");        //必须有的一步操作,参数就是ToolBar对象        setSupportActionBar(mToolbar);        //设置APP Logo        mToolbar.setLogo(R.mipmap.ic_launcher);        //设置子标题,会出现在主标题的正下方        mToolbar.setSubtitle("子标题!");        //往toolBar填充菜单布局,起效果必须要复写onCreateOptionsMenu        //在res文件下创建menu文件夹,在创建xml布局文件即可.        mToolbar.inflateMenu(R.menu.toolbar_menu);    }

5.设置右上角的菜单点击事件的监听:



        mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {            @Override            public boolean onMenuItemClick(MenuItem item) {                Toast.makeText(MainActivity.this, "你点击的第" + item, Toast.LENGTH_SHORT).show();                return true;            }        });

6.重写onCreateOptionsMenu方法,使用getMenuInflater()填充布局,第二个参数固定是mune,返回值为true,才有效

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

最后在res下创建一个menu包,在menu创建一个XML资源:

toolbar_menu.xml布局:

showAsAction属性共有五个值:ifRoomneveralwayswithTextcollapseActionView,可以混合使用。

ifRoom:会显示在Item中,但是如果已经有4个或者4个以上的Item时会隐藏在溢出列表中。当然个数并不仅仅局限于4个,依据屏幕的宽窄而定

never:永远不会显示。只会在溢出列表中显示,而且只显示标题,所以在定义item的时候,最好把标题都带上。

always:无论是否溢出,总会显示。

withText:withText值示意Action bar要显示文本标题。Action bar会尽可能的显示这个标题,但是,如果图标有效并且受到Action bar空间的限制,文本标题有可能显示不全

collapseActionView:声明了这个操作视窗应该被折叠到一个按钮中,当用户选择这个按钮时,这个操作视窗展开。否则,这个操作视窗在默认的情况下是可见的,并且即便在用于不适用的时候,也要占据操作栏的有效空间。一般要配合ifRoom一起使用才会有效果。

<?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_search"        android:icon="@mipmap/ic_launcher"        android:title="item0"/>    <item        android:id="@+id/action_item"        android:icon="@mipmap/ic_launcher"        android:title="item1"/>    <item        android:id="@+id/action_item2"        android:icon="@mipmap/ic_launcher"        android:title="item2"        app:showAsAction="never"/></menu>


以上步骤完成后最终实现效果:

                                                  





1 0
原创粉丝点击