网站导航
> 技术文档 > [Android] UI进阶笔记：从 Toolbar 到可折叠标题栏的完整实战

[Android] UI进阶笔记：从 Toolbar 到可折叠标题栏的完整实战

网友: 技术文档 2025-09-02 19:10:21

学习 Android 开发的过程中，UI 控件往往是最直观也最容易踩坑的部分。本文整理了我在学习《第一行代码》后的实践笔记，涵盖 Toolbar、自定义标题栏、菜单、Snackbar、CoordinatorLayout、可折叠标题栏、SwipeRefreshLayout 下拉刷新、FloatingActionButton 悬浮按钮 等常见控件的使用方法和心得体会。通过这些总结，希望能帮助你快速掌握 Android 界面开发的核心知识点，让界面更灵活、更具交互感eve~

Toolbar

Toolbar是什么？

  • Toolbar 是 Android 5.0）后引入的新控件，用来替代以前的 ActionBar，可以自由控制位置、样式
  • 因为是可自定义的，所以比 ActionBar 灵活得多

Toolbar 的常见功能

  1. 应用标题
    默认显示 App 名称，你可以改成自定义标题
  2. 导航按钮（返回键 / 菜单按钮）
    可以添加返回箭头、菜单按钮，或者换成你想要的图标
  3. 菜单
    可以在右上角加“搜索”“更多”等按钮
  4. 完全自定义布局
    Toolbar 内部可以放 TextView、ImageView，甚至自定义控件

Toolbar的使用（配合菜单）

  • 可以直接在layout布局文件中使用：

以上代码中有两个较为陌生的属性：

  • android:theme=\"@style/ThemeOverlay.AppCompat.Dark.ActionBar\"代表顶部导航栏的主题颜色

@style/ThemeOverlay.AppCompat.Dark.ActionBar代表白色字体图标；@style/ThemeOverlay.AppCompat.Light表示深色字体图标

  • app:popupTheme = \"@style/ThemeOverlay.AppCompat.Dark\" 表示菜单的主体颜色

@style/ThemeOverlay.AppCompat.Light→ 白色弹窗
@style/ThemeOverlay.AppCompat.Dark → 深色弹窗

  • app:navigationIcon
    设置左上角的导航图标（常见是返回箭头）

菜单项这样来写：

app:showAsAction = \"always\"
代表表现的方式：

always代表一定要显示在顶部导航栏，否则不显示

ifRoom代表如果能显示显示，不能显示就去菜单项

never一定在菜单项

最后把菜单项膨胀到视图，一定要使用这个方法，因为有菜单时，系统会回调这个方法；

public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.toolbai,menu); return true;}public boolean onOptionsItemSelected(MenuItem item) { if (item.getItemId() == R.id.action_search) { Toast.makeText(this, \"点击了搜索\", Toast.LENGTH_SHORT).show(); return true; } return super.onOptionsItemSelected(item);}

设置toolbar

Toolbar toolbars = (Toolbar)findViewById(R.id.toolbar);setSupportActionBar(toolbars);

设置导航按钮（返回箭头）

getSupportActionBar().setDisplayHomeAsUpEnabled(true);toolbars.setNavigationOnClickListener(v -> finish());

注意：toolbar最好使用androidx

androidx.appcompat.widget.Toolbar

使用Androidx的toolbar时需要添加依赖，依赖如下：

implementation \'androidx.appcompat:appcompat:1.6.1\'

当然我们也可以自定义toolbar,在toolbar中自定义控件：

Toolbar toolbar = findViewById(R.id.custom_toolbar);setSupportActionBar(toolbar);// 去掉系统默认标题，使用我们自己的 TextViewgetSupportActionBar().setDisplayShowTitleEnabled(false);

getSupportActionBar().setDisplayShowTitleEnabled(false);核心就是设置后setSupportActionBar的这一句代码，我们就可以使用自定义控件了，那么具体怎么自定义，那就看你想要什么样子的效果啦；

不过需要注意一点，这里只是去掉了默认的标题，所以系统默认的标题不显示了，但是我们仍然可以使用其他方法，比如设置返回图标；

好了，Toolbar的简单学习先到这里；

FloatingActionButton

这是悬浮按钮，我们可以做点击事件

在xml文件中简单使用如下

属性解释：

android:elevation=\"2dp\"
数值越大，阴影面积大，但浅，反之则相反；

android:src = \"@drawable/ic_launcher_foreground\"可用来添加图片

Snackbar

一个功能类似toast提示框，与toast不同的是，可以和用户交互

floatingActionButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Snackbar.make(view,\"嘿嘿\",Snackbar.LENGTH_LONG).setAction(\"确定\", new View.OnClickListener() { @Override public void onClick(View view) { Toast.makeText(MainActivity.this,\"雪雪学安卓\",Toast.LENGTH_SHORT).show(); } }).show(); }});

Snackbar.make(view,\"嘿嘿\",Snackbar.LENGTH_LONG)；

  • make方法是确认提示主体，第一个参数是界面任意一个view，snackbar会自动选择最上层那一个，第二个参数是提示语

  • setAction方法
    通过setaction方法和用户交互，第一个参数是按钮效果，第二个参数做监听

最后别忘记show（）!

CoordinatorLayout布局

这个布局和帧布局差不多

但是它可以监听所有的子控件，从而做出最佳响应：比如悬浮按钮和提示框重合问题

需要注意的是：

那前提得是子控件，所以提示框传入的view参数得是coordinatorlayout的子控件了；

glide依赖如下

 implementation \'com.github.bumptech.glide:glide:4.16.0\'

Recycleview进阶版

可能照片资源过大，所以这个时候就需要它了；

依赖如下：

implementation \'com.github.bumptech.glide:glide:4.16.0\'

Glide.with(mcontext).load(fruit.getImageid()).into(holder.imageView);

第一个参数是context，第二个是把这个id加载到第三个参数的布局中；

GridLayoutManager layoutManager = new GridLayoutManager(this,2);

代表两列

陌生属性介绍：

  • com.google.android.material.appbar.AppBarLayout
    这个布局为了顶部导航栏的显示；

  • app:layout_behavior=\"@string/appbar_scrolling_view_behavior\" 为了顶部导航栏的显示，否则可能遮挡顶部导航栏；

  • app:layout_scrollFlags=\"scroll|enterAlways|snap\"

scroll
作用：视图会随着内容滚动而一起滚动（向上滑时隐藏，向下滑时显示）

enterAlways
作用：
向下滚动时立即显示视图（不需要滚动到顶部）

snap
作用： 滚动停止时自动\"吸附\"到最近的边界（要么完全显示，要么完全隐藏， 提供更流畅的用户体验）

exitUntilCollapsed

作用：

  • 视图会滚动退出，但不会完全消失，而是停留在折叠状态
  • 必须与 scroll 标志一起使用
  • 需要定义 minHeight 属性指定折叠后的高度

我们通常是scroll和exitUntilCollapsed搭配使用！

SwipeRefreshLayout下拉刷新

依赖：

implementation \'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0\'

xml文件：用法包在recyview外面表示刷新

在mainactivity

我把过程中难以理解的代码都标注出来啦

SwipeRefreshLayout swipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.swip);swipeRefreshLayout.setColorSchemeColors(R.color.black);//刷新的颜色swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {//每次刷新都会回调 @Override public void onRefresh() { //经常得到数据之后，开始刷新，所以要在子线程中 new Thread(new Runnable() { @Override public void run() { try {  Thread.sleep(2000); } catch (InterruptedException e) {  throw new RuntimeException(e); } //回到主线程中  runOnUiThread(new Runnable() {  @Override  public void run() {  //适配器刷新Notify fruitadapots.notifyDataSetChanged(); //表示刷新事件结束，隐藏刷新进度条 swipeRefreshLayout.setRefreshing(false);  }  }); } }).start(); }});

可折叠式表示栏

CoordinatorLayout

这是最外层的布局

然后你需要把你的用于折叠的照片，还有顶部导航栏，都设置在**appbarlayout**布局中

定义在CollapsingToolbarLayout

  • android:theme=\"@style/ThemeOverlay.AppCompat.Dark.ActionBar\" 代表设置一个主题

  • app:contentScrim=\"?attr/colorPrimary\"代表这个布局在趋于折叠和折叠后的背景色

  • app:layout_scrollFlags=\"snap|scroll|exitUntilCollapsed\"是appbarlayout中的属性

app:layout_collapseMode=\"parallax\"表示折叠模式

有三种折叠模式：

Pin代表在折叠时永不消失，这里代表顶部导航栏，在折叠会回固定在顶部，通常和toolbar一起联合使用；

parallax模式（视差模式）
效果：控件以较慢速度滚动，产生景深效果，我们还可以设置它的滚动的速度，更有感觉。

滚动的速度通过此来控制，数值越小，速度越慢：
app:layout_collapseParallaxMultiplier=\"0.7\"

默认模式（无模式）
效果：控件会随滚动完全消失，一般不设置，无折叠效果。

中间内容：经常是recycleview等等

app:layout_behavior=\"@string/appbar_scrolling_view_behavior\"
这个属性搭配折叠效果；

NestedScrollView**只能有一个直接子项布局**

体会

编者对于在运用折叠式标题栏时有了一些新的体会：

  1. 当你在某控件中设置parallax，即使折叠后仍然显示当前折叠时的背景，它不会因为折叠就直接消失显示pin模式下的控件，假如parallax设置的是背景图，那么背景图会和pin模式下的视图重叠，直接你看不到是因为通常toobar设置的是pin,toolbar的会挡住背景图，当你尝试把toolbar设置为透明时，你会发现有重合的问题qvq；
  2. 折叠后的高度由谁决定？
    AI中会解释道：由toolbar的高度决定，但你仔细看，你就会发现是由使用pin模式的控件决定的，因为toolbar设置了pin,所以AI才会这样解释，当我们toolbar中的设置为100dp,那么折叠后的高度就是100dp了；此时又发现一个属性minheigh（控制 CollapsingToolbarLayout的最小可见高度），它也会影响高度，当它的高度大于PIN模式下控件的高度时，那么此时折叠后的高度就是minheight了，所以如果是minHeight比toolbar的高度要高，最后的结果就是上面是toolbar,折叠后仍然留有一部分高度是minheight的剩余高度；
  3. 可折叠模式写在coll布局的直接子view中；
  4. 当有很多空间都设置了pin模式，按照在xml文件中的排布在顶部依次显示；
  5. 可折叠式标题栏的核心：

最外层是coor的一个布局

中间套appbarlayout负责响应滑动：android:fitsSystemWindows=\"true\"这里这个属性true代表toolbar在状态栏下方，避免系统的窗口区域和布局重叠；

里面是coll的一个布局：里面写两个重要属性：app:layout_scrollFlags，控制滚动的效果，app:contentScrim 折叠后显示的背景色（不写会出现透明/白色突兀问题）；

在未折叠的布局中写属性控制折叠后的效果；

在内容区例如recycleview或者scroll中写app:layout_behavior=\"@string/appbar_scrolling_view_behavior\"不然滑动不会带动 AppBar 折叠；

希望编者的理解对你有帮助哦！

悬浮按钮升级版

app:layout_anchor=\"@id/appbar\" 锚定谁

app:layout_anchorGravity=\"bottom|end\" 锚定谁的哪里

anchor锚点：

这么设置就会出现在标题栏的区域内

另外：

collapsingToolbarLayout.setTitle(\"i like\");

这里也可以设置折叠后导航栏的标题，搭配顶部导航栏的使用；

本次分享到这里结束！

网络标签：

相关问题