注册 留言板
当前位置:首页 > 移动开发 > 其它 > 正文

Material Design——Toolbar

来源:CSDN   发布时间: 2017-06-19   作者:qiaoshi96_bk   浏览次数:
摘要: Material Design Material Design里面许多控件都可以设计出非常美观的UI效果Toolbar就是其中之一并且在许多APP上面都广泛应用 ...

Material Design
Material Design里面许多控件都可以设计出非常美观的UI效果Toolbar就是其中之一并且在许多APP上面都广泛应用
Toolbar
Toolbar和Actionbar非常的类似也可以说Toolbar是Actionbar的升级版。
首先在布局里面:
既然说Toolbar是Actionbar的升级版并且作用的范围都是在头部,所以要想Toolbar显示我们需要设置一下ActionBar
在styles.xml里面设置APP主题字面也可以理解:.NoActionBar

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

然后在activity_main.xml里面实现布局

<?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:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.administrator.toolbar.MainActivity">
    <FrameLayout  xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent">
        <android.support.v7.widget.Toolbar  android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary"></android.support.v7.widget.Toolbar>

    </FrameLayout>


</RelativeLayout>

里面有好多我们不常用 的知识点:
xmlns:android=”http://schemas.android.com/apk/res/android”:其实这个属性我们可以简单理解为它会指定一个空间只有它我们才能调用类似android:layout_width,android:id这些属性。
android:layout_height=”?attr/actionBarSize”:我们把我们自己定义的Toobar高设置和Actionbar的高一样大小
android:background=”?attr/colorPrimary”:同理这个就是引用Actionbar的背景颜色
此时只要在MainActivity里面:

   setContentView(R.layout.activity_main);
        toolbar= (Toolbar) findViewById(R.id.toolbar);
        //调用setSupportActionBar(toolbar)传入实例
        setSupportActionBar(toolbar);

其实到这里Toolbar的空能基本上就实现了只是我们没有给它具体 的操作我们也可以随意更改主题了:只需要在AndroidManifest.xml

    <activity android:name=".MainActivity"
    <!-- android:label便可以设置Toolbar显示的内容 -->
            android:label="GGG">

当然要想实现类似效果:
这里写图片描述
我们还需要在res——>New——>Directory 创建一个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/one" android:icon="@mipmap/ic_launcher" android:title="one" app:showAsAction="always"/>
    <item  android:id="@+id/two" android:icon="@mipmap/ic_launcher" android:title="two" app:showAsAction="always"/>  <item  android:id="@+id/three" android:icon="@mipmap/ic_launcher" android:title="three" app:showAsAction="never"/>


</menu>

对于 app:showAsAction:
如果是aways表示一定会在Toolbar上面显示
ifRoom表示如果有空间
never:省略成三个点点开才可以看见
到这里我们只要在MainActivity里面引入我们的Menu便可以做具体实用的操作了

package com.example.administrator.toolbar;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
        private Toolbar toolbar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar= (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
    }
//重写onCreateOptionsMenu方法来加载我们引入的menu布局
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar,menu);
        return true;

    }
//对点击上面每个标识进行具体的逻辑操作
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case R.id.one:
                Toast.makeText(MainActivity.this,"你点击了按钮",Toast.LENGTH_SHORT).show();
            break;
            case R.id. two:
                Toast.makeText(MainActivity.this,"你点击了按钮",Toast.LENGTH_SHORT).show();
                break;
            case R.id.three:
                Toast.makeText(MainActivity.this,"你点击了按钮",Toast.LENGTH_SHORT).show();
                break;
        }
        return true;
    }
}


我来说两句
评论内容:
验  证  码:
 
(网友评论仅供其表达个人看法,并不表明本站同意其观点或证实其描述。)
评论列表
已有 0 条评论(查看更多评论)
精彩专题
友情链接:
QQ交流群:①群 155252576 ②群 469193068 ③群 531831996 ④群 243504572
设为首页 - 加入收藏 Copyright @2016 Infocool 版权所有 粤ICP备16000626号