Android MaterialDesign简单使用_toolbar
2014年Googel I/O大会上重磅推出了一套全新的界面设计语言MaterialDesign。因为设计人员也不了解这个东西,开发人员实现起来也很费劲,几乎没有一个可以用的API,都需要自己实现所以普及程度比较低。
而google也意识到了这一问题,于是2015年的Google I/O大会上推出了一个Design Support库,这个库将一些具有代表性的一些控件和效果进行了封装,这样就大大的简化了实现难度。
1.DarkActionBar
toolbar继承了ActionBar的所有功能,而且灵活性很高,可以配合一些其他的控件开完成一些Material Drsign的效果。
新建一个工程没有做任何操作的话进入如下:
如果我们需要使用toolbar需要先把原有的 AndroidManifest中application中的theme对应的Theme.AppCompat.Light.DarkActionBar修改为NoActionBar。但是这个NoActionBar有两种分别为Theme.AppCompat.Light.NoActionBar和Theme.AppCompat.DayNight.NoActionBar他们有什么去区别呢?
首先Theme.AppCompat.Light.NoActionBar淡色主题会将主题颜色设置为淡色陪衬颜色设置为深色
然后 Theme.AppCompat.DayNight.NoActionBar深夜主题
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
我们可以清楚的看到除了AppTheme做了对应的修改后我们还可以看到还有单个item他们分别为:
colorPrimary 、colorPrimaryDark 、colorAccent 他们三个分别代表什么位置的颜色呢?
但是图上并没表明colorAccent属性,其实这个就是并不是指定哪个按钮颜色,更多的是强调的意思。
2.使用toolBar:
2.1首先将style中的主题替换了:
我们选择淡色主题来进行下面的讲解
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
添加toolbar
<?xml version="1.0" encoding="utf-8"?>
<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">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toobar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</FrameLayout>
android:theme:toolbar单独使用深色主题,但是如果toolbar中有按钮 按钮也回成为深色主题
app:popupTheme:单独将弹出的菜单项指定成单色主题,同时popuptheme是在Android5.0系统中添加的,使用 app:popupTheme可以兼容5.0以下版本。
然后再activity中添加:
package com.example.mytoolbar;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = findViewById(R.id.toobar);
setSupportActionBar(toolbar);
}
}
如下图:
看上去和actionbar并没有什么不同,但是他已经不是actionbar了,然后我们继续。
在标题栏修改名称:android:label,如果不添加这个属性系统回默认使用applicaton的属性也就是我们项目的名称
<activity android:name=".MainActivity"
android:label="大不懂">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
我们在标题中添加一个menu:
首先在点击res ->右键->new->Dirrctory 创建一个menu包,然后点击menu->右键->new->Menu resource file创建一个toolbar.xml
然后编写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="@android:drawable/stat_sys_upload_done"
android:title="backup"
app:showAsAction="always" />
<item
android:id="@+id/frame"
android:icon="@android:drawable/menu_frame"
android:title="backup"
app:showAsAction="always" />
<item
android:id="@+id/delect"
android:icon="@android:drawable/ic_menu_delete"
android:title="delect"
app:showAsAction="ifRoom" />
<item
android:id="@+id/add"
android:icon="@android:drawable/ic_menu_add"
android:title="add"
app:showAsAction="ifRoom" />
<item
android:id="@+id/send"
android:icon="@android:drawable/ic_menu_send"
android:title="send"
app:showAsAction="never" />
<item
android:id="@+id/call"
android:icon="@android:drawable/ic_menu_call"
android:title="call"
app:showAsAction="never" />
</menu>
item:定义按钮
android:id:唯一标识
android:icon:图片 我这里使用的是系统默认的图片
android:title:按钮名称
app:showAsAction:显示位置 always:永远显示在toolbar中、ifRoom:如果显示空间足够显示在toolbar中如果显示的不够显示在菜单中、never:永远显示在菜单中。 toolbar中只显示图标不显示文字、菜单中只显示文字不显示图标。
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.toolbar, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.backup:
Toast.makeText(this, "backup", Toast.LENGTH_SHORT).show();
break;
case R.id.frame:
Toast.makeText(this, "frame", Toast.LENGTH_SHORT).show();
break;
case R.id.delect:
Toast.makeText(this, "delect", Toast.LENGTH_SHORT).show();
break;
case R.id.add:
Toast.makeText(this, "add", Toast.LENGTH_SHORT).show();
break;
case R.id.send:
Toast.makeText(this, "send", Toast.LENGTH_SHORT).show();
break;
case R.id.call:
Toast.makeText(this, "call", Toast.LENGTH_SHORT).show();
break;
}
return true;
}
以上就是toolbar的基本使用了。
转发表明出处:https://blog.csdn.net/qq_35698774/article/details/107892669
android互助群:
感谢:郭霖的《第一行代码 第二版》
本文地址:https://blog.csdn.net/qq_35698774/article/details/107892669