学习Android的新的UI控件Material Design（一）——Toolbar的使用

最新推荐文章于 2020-12-25 19:13:45 发布

胖得可爱的小三

最新推荐文章于 2020-12-25 19:13:45 发布

阅读量291

点赞数

分类专栏：学习练习类

学习练习类专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本篇文章主要记录了新的UI控件Material Design的使用其中主要包括下面几种控件的应用：

—————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————我是分割线——————————————————————-————

1.Toolbar的实现

需要在res/values/styles.xml中修改项目的Theme的主题为

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

此时ActionBar已经隐藏起来了，接下来的额activity_main.xml的布局的代码如下：

<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:laytou_heigth="matcht_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:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.AppBarLayout>
    </FrameLayout>

在MainActivity中的代码如下

public  class  MainActivity extends AppCompatActivity{
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
    }
}

将toolbar加载到ActionBar中，然后这时候toolbar就变成了一个actionBar了，虽然看起来没有多大的差别，但是可以实现了Material Design的功能，然后修改AndroidManifest.xml中如下

<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:supportsRtl="true"
    android:theme="@style/AppTheme">
    <activity
        android:name=".FruitActivity"
        android:label="Fruits"///添加这一行

这里创建了一个toolbar.xml文件代码如下：

<?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/backup"
        android:icon="@drawable/ic_backup_black_24dp"
        android:title="Backup"
        app:showAsAction="always"/>

    <item
        android:id="@+id/delete"
        android:icon="@drawable/ic_delete_black_24dp"
        android:title="Delete"
        app:showAsAction="ifRoom"/>

    <item
        android:id="@+id/settings"
        android:icon="@drawable/ic_settings_black_24dp"
        android:title="Settings"
        app:showAsAction="never"/>

</menu>

其中使用到的showAsAction表示按钮的显示位置，有三种方法表示不同的位置

修改MainActivity的代码如下：

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.backup:
                Toast.makeText(this,"you clicked Backup",Toast.LENGTH_SHORT).show();
                break;

            case R.id.delete:
                Toast.makeText(this,"you clicked Delete",Toast.LENGTH_SHORT).show();
                break;

            case R.id.settings:
                Toast.makeText(this,"you clicked Settings",Toast.LENGTH_SHORT).show();
                break;
            default:
        }
        return true;
    }