1.Toolbar
还记得我们每次打开的程序的标题栏吗?那不是 tool bar 做的,那是 acti onbar 做的, Tool bar 可以说是Acti onbar 的升级版了。 Tool bar 不仅有 Acti onbar 的所有功能,而且还更加灵活.
在项目运行在虚拟机上时,都可以看见屏幕上方有一个栏目(下图红框圈出的部分),此为系统默认的DarkActi onBar ,可在 themes . xml 中查看。
是用于替换该栏目的,以便于我们更灵活的编辑栏目内容,所以我们先将主题文件中的DarkActionBar改为NoActionBar,再次运行就可以发现顶端的栏目不见了
1.1基本框架
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
ndroid:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:background="@color/teal_200"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
</LinearLayout>
注意尖括号里不是普通的Toolbar,而是androidx.appcompat.widget.Toolbar。然后栏目的宽度直接与屏幕一致,高度则调用ActionBar的高度。设置好后在虚拟机上运行我们就能看到一个自定义颜色的工具栏:
1.2常用属性
设置了一番,看看效果:
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/mDrawer"
tools:context=".MainActivity">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#319FF6"
app:navigationIcon="@drawable/ic_baseline_keyboard_arrow_left_24"
app:title="ShadyPi's blog"
app:titleMarginStart="50dp"
app:subtitle="Android学习笔记"
app:logo="@mipmap/hg"
app:menu="@menu/toolbar_menu"/>
</androidx.drawerlayout.widget.DrawerLayout>
1.3添加工具栏点击事件
给Toolbar加上id,我们就可以在java代码里获取并监听用户对工具栏图标的点击:
public class MainActivity2 extends AppCompatActivity {
private Toolbar toolbar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);
toolbar = findViewById(R.id.toolbar);
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(MainActivity2.this, "返回",
Toast.LENGTH_SHORT).show();
}
});
}
}
1.4溢出菜单
首先我们在res的menu目录中创建一个menu资源文件 toolbar_menu.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/toolbar_user"
android:icon="@drawable/ic_baseline_person_24"
android:title="用户"
app:showAsAction="never"/>
<item
android:id="@+id/toolbar_setting"
android:icon="@drawable/ic_baseline_settings_24"
android:title="设置"
app:showAsAction="never"/>
<item
android:id="@+id/toolbar_other"
android:icon="@drawable/ic_baseline_more_horiz_24"
android:title="其他"
app:showAsAction="never"/>
</menu>
然后在中添加代码
1.5溢出菜单的点击事件
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
if (item.getItemId()==R.id.toolbar_user) {
Toast.makeText(MainActivity.this, item.getTitle(), Toast.LENGTH_SHORT).show();
}else if (item.getItemId()==R.id.toolbar_setting) {
Toast.makeText(MainActivity.this, item.getTitle(), Toast.LENGTH_SHORT).show();
}else if (item.getItemId()==R.id.toolbar_other) {
Toast.makeText(MainActivity.this, item.getTitle(), Toast.LENGTH_SHORT).show();
}
return false;
}
});
2.DrawerLayout 滑动菜单
2.1基本框架
布局----在这个布局中允许放入两个直接子控件
屏幕中显示的内容
滑动菜单中显示的内容
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/mDrawer"
tools:context=".MainActivity">
< ! - -主屏幕中显示的内容- ->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#319FF6"
app:navigationIcon="@drawable/ic_baseline_keyboard_arrow_left_24"
app:title="ShadyPi's blog"
app:titleMarginStart="50dp"
app:subtitle="Android学习笔记"
app:logo="@mipmap/hg"
app:menu="@menu/toolbar_menu"/>
</FrameLayout>
< ! --滑动菜单中的内容-->
< !--and roid:layoutg ravity="start"指定了滑动菜单在屏幕的哪边start是指系统语言是从左到右读就在右边反之就在左边- ->
< !--android:layout_gravity="start"必须要指定,指定了的就是滑动菜单- ->
<TextView
android: layout_width="match_parent"
android: layout_height="match_parent"
android: background="#FFF"
android:layout_gravity="left"
android:text="菜单"
android:textSize="30sp"/>
</androidx.drawerlayout.widget.DrawerLayout>
点击Toolbar的图标弹出滑出菜单
//点击事件
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
mDrawer.openDrawer(GravityCompat.START);
}
});
2.2NavigationView
滑动窗口里面用TextView太丑了,尝试尝试NavigationView
1.引入开源项目 CircleImageView,可以轻松实现图片圆形化
dependencies {
implementation 'de.hdodenhof:circleimageview:3.0.1'
}
2.创建menu,作为滑动菜单 drawerlayout_men.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/navCall"
android:icon="@drawable/ic_baseline_add_ic_call_24"
android:title="打电话" />
<item
android:id="@+id/navFriend"
android:icon="@drawable/ic_baseline_mobile_friendly_24"
android:title="朋友" />
<item
android:id="@+id/navLocation"
android:icon="@drawable/ic_baseline_location_on_24"
android:title="位置" />
<item
android:id="@+id/navTask"
android:icon="@drawable/ic_baseline_library_books_24"
android:title="记事本" />
</group>
</menu>
3.在layout创建headerLayout nav_header.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:background="#A9E7EF"
android:layout_height="200dp">
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="70dp"
android:layout_height="70dp"
android:id="@+id/iconImage"
android:src="@mipmap/img"
android:layout_centerInParent="true"/>
<TextView
android:id="@+id/textView"
android:layout_marginTop="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/iconImage"
android:layout_centerHorizontal="true"
android:textSize="20sp"
android:text="孙悟空" />
</RelativeLayout>
4.修改基本框架
<com.google.android.material.navigation.NavigationView
android:id="@+id/nv_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/nav_header"
app:menu="@menu/drawerlayout_menu"
/>
5.给滑动菜单设置点击事件
nav_view.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
if (item.getItemId()==R.id.nav_call) {
Toast.makeText(MainActivity.this, "打电话", Toast.LENGTH_SHORT).show();
}else if (item.getItemId()==R.id.nav_friend) {
Toast.makeText(MainActivity.this,"联系人", Toast.LENGTH_SHORT).show();
}else if (item.getItemId()==R.id.nav_address) {
Toast.makeText(MainActivity.this, "位置", Toast.LENGTH_SHORT).show();
}else if (item.getItemId()==R.id.nav_book) {
Toast.makeText(MainActivity.this,"记事本", Toast.LENGTH_SHORT).show();
}
return true;
}
});
3.FloatingActionButton 悬浮按钮和可交互提示
3.1基本框架
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="55dp"
android:src="@drawable/ic_baseline_done_24"
android:elevation="8dp"/>
4.Snackbar
Toast提示是不是有点拉,可以用Snackbar提示,但是Toast并非是不如Snackbar,他们有不同的应用场景。
Toast只能告诉用户现在发生了什么事情,用户只能被动接收这件事情。
Snackbar允许在提示中加入一个可交互按钮,当用户点击按钮的时候,就可以执行一些额外的逻辑 操作
4.1基本框架
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view,"删除数据",Snackbar.LENGTH_SHORT).setAction("取消", new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(MainActivity.this, "已恢复数据", Toast.LENGTH_SHORT).show();
}
}).show();
}
});
5.CoordinatorLayout
但是此时我们会发现Snackbar弹出的时候会把悬浮按钮遮住,但是这个问题我们可以用
CoordinatorLayout解决
CoordinatorLayout可以是一种加强版的FrameLayout(帧布局)
CoordinatorLayout会监听所有子控件的各种事件,并且自动帮助我们做出最为合理的响应
5.1基本框架
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/mDrawer"
tools:context=".MainActivity">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#319FF6"
app:navigationIcon="@drawable/ic_baseline_keyboard_arrow_left_24"
app:title="ShadyPi's blog"
app:titleMarginStart="50dp"
app:subtitle="Android学习笔记"
app:logo="@mipmap/hg"
app:menu="@menu/toolbar_menu"/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/fab"
android:layout_gravity="bottom|end"
android:layout_margin="35dp"
android:src="@drawable/ic_baseline_done_24"
app:elevation="8dp"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.material.navigation.NavigationView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/navView"
android:layout_gravity="start"
app:headerLayout="@layout/nav_header"
app:menu="@menu/drawerlayout_men"/>
</androidx.drawerlayout.widget.DrawerLayout>
其实就是把原本的FrameLayout布局改成了androidx.coordinatorlayout.widget.CoordinatorLayout就 行了 效果就是当点击悬浮按钮Snackbar出现的时候,悬浮按钮会上移来适应Snackbar是自己不会被Snackbar遮住
但是Snackbar并不是CoordinatorLayout的子控件,而是DrawerLayout的子控件,为什么也能成功 呢?
是因为Snackbar.make()传入了一个view,这是用来指定Snackbar是哪个View触发的,所以传入的是悬浮 按钮控件本身,悬浮按钮控件是CoordinatorLayout的子控件,所以能成功