Meterial Design常见控件的使用（一），retrofit使用

最新推荐文章于 2022-01-24 16:14:26 发布

m0_65146387

最新推荐文章于 2022-01-24 16:14:26 发布

阅读量105

点赞数

分类专栏：程序员文章标签：面试 android 移动开发

本文链接：https://blog.csdn.net/m0_65146387/article/details/122027588

版权

程序员专栏收录该内容

75 篇文章 0 订阅

订阅专栏

本文详细介绍了Meterial Design中Toolbar的使用，包括如何设置scrollFlags属性，如`scroll|enterAlways|snap`等，以及结合menu配置文件实现不同展示效果。还提到了与AppBarLayout和CollapsingToolbarLayout的结合使用，展示了各种场景下的滚动行为。同时，文中还提及了如何自定义标题的样式和处理点击事件。

摘要由CSDN通过智能技术生成

<android.support.v7.widget.Toolbar

android:id="@+id/toolbar"

android:layout_width=“match_parent”

android:layout_height="?attr/actionBarSize"

android:background="@color/colorAccent"

app:logo="@mipmap/ic_launcher"

app:navigationContentDescription=""

app:navigationIcon="@drawable/ic_back_white_24dp"

app:subtitle=“子标题”

app:subtitleTextColor="@color/white"

app:title=“标题”

app:titleMarginStart=“90dp”

app:titleTextColor="@color/white">

同样如果不在xml中设置参数的话，代码中的设置:

这里就不在贴出代码啦，设置的时候，先敲打出xml配置中的关键单词或首字母，就会自动提示的。大部分在xml有的属性，代码中都可以设置

效果图：

在这里插入图片描述

注意事项：

1：如果你添加了这行代码 setSupportActionBar(toolbar); 那么 toolbar.setNavigationOnClickListener监听方法，要放到其后面，否则点击事件，监听不到的。如果你用不到ActionBar的一些特性的话，建议setSupportActionBar(toolbar); 这行代码不用添加了。

如果你想修改主标题和子标题的文字大小，你可通过如下方式：

首先定义一个style：

然后：

<android.support.v7.widget.Toolbar

android:id="@+id/toolbar"

android:layout_width=“match_parent”

android:layout_height="?attr/actionBarSize"

android:background="@color/colorAccent"

app:logo="@mipmap/ic_launcher"

app:navigationContentDescription=""

app:navigationIcon="@drawable/ic_back_white_24dp"

app:subtitle=“子标题”

app:subtitleTextColor="@color/white"

app:title=“标题”

app:titleMarginStart=“90dp”

app:titleTextAppearance="@style/ToolbarTitle"

app:titleTextColor="@color/white">

效果图这里不在贴出了，通过app:titleTextAppearance=”@style/ToolbarTitle”方法的设置，就能修改标题字体的大小，当然文字颜色也可以修改。

到这里，你可能要问了，如果，我想要标题居中，怎么办呢？查看api，toolbar没有使其居中的方法，也就提供了使其距左右，上下边距大小的方法。不过不用担心，这里还是有办法的。看如下代码：

<android.support.v7.widget.Toolbar

android:id="@+id/toolbar"

android:layout_width=“match_parent”

android:layout_height="?attr/actionBarSize"

android:background="@color/colorAccent">

<TextView

android:id="@+id/title"

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:layout_gravity=“center”

android:text=“标题”

android:textColor="@color/white"

android:textSize=“22sp” />

</android.support.v7.widget.Toolbar>

效果图：

在这里插入图片描述

注意： 此时 TextView 控件的宽和高都是自适应大小，java 代码中此行代码setSupportActionBar(toolbar);就不要添加了，否则就会显示不正常。如果你非要添加setSupportActionBar(toolbar);这行代码的话，TextView 控件的宽要用match_parent属性。这里再次建议setSupportActionBar(toolbar);这行代码就不要点添加了。

至于它的作用，在此做一下简单的说明吧：

1）在Toolbar这个控件出现之前，其实我们也可以通过 ActionBar actionBar = getSupportActionBar(); 方法获取到acitonbar，（前提你的activity主题theme，是采用的带actionbar的主题，如果你采用这样的主题android:theme="@style/Theme.AppCompat.Light.NoActionBar">拿到的actionBar也是 null,显然是不行的）之后你就可以采用诸如下面的方面来操作actionbar啦。

ActionBar actionBar = getSupportActionBar();

if (actionBar != null) {

actionBar.setDisplayHomeAsUpEnabled(true);

actionBar.setDisplayShowTitleEnabled(true);

actionBar.setTitle(“主标题”);

…

} else {

Log.i(TAG, “onCreate: actionBar is null”);

}

但是，原生自带的ActionBar设置的灵活性，还是有限，因此Toolbar 这个控件，也就应运而生啦！此时，有的小伙伴说了，我虽然使用了Toolbar来代替ActionBar，但是我还想使用ActionBar的一些特性怎么办呢？这个时候 setSupportActionBar(toolbar);就发挥其作用啦。添加这行代码，你的toolbar可以说也就具有了ActionBar的相关属性了。好啦，到此setSupportActionBar(toolbar) 的作用也讲完了。如果你还不太明白的话，可以参考一下篇文章：

ActionBar和Toolbar的基础使用

结合menu配置文件的用法。

这里先看一下效果图：

在这里插入图片描述

首先在menu文件夹中，创建名为 menu.xml 文件（文件名随意的）：

xmlns:app=“http://schemas.android.com/apk/res-auto”>

<item

android:id="@+id/action_search"

android:icon="@drawable/ic_search"

android:title=“Search”

app:showAsAction=“ifRoom” />

<item

android:id="@+id/action_notifications"

android:icon="@drawable/ic_delete_white_24dp"

android:title=“notifications”

app:showAsAction=“ifRoom” />

<item

android:id="@+id/action_settings"

android:icon="@mipmap/ic_launcher"

android:orderInCategory=“100”

android:title="@string/action_settings"

app:showAsAction=“never” />

然后在代码中这样加载该menu文件即可：

toolbar.inflateMenu(R.menu.menu);

最后运行代码，就是上图的效果。

在这里，app:showAsAction 属性还是很有必要介绍一下滴。

app:showAsAction 有以下三个属性：

ifRoom 表示在屏幕空间足够的情况下显示在Toolbar中，不够的话就显示在菜单中
never 表示永远不显示在Toolbar中，而是一直显示在菜单中
always 表示永远显示在Toolbar中，如果屏幕空间不够则不显示

注意:Toolbar中的action按钮只会显示图标，菜单中的action按钮只会显示文字。

那如果设置了ifRoom 属性之后，既然只显示图标不显示文字，那还设置 android:title=”Search” 文字干嘛呢?如果你设置了之后，虽然不显示，但是你长按相应按钮后，就会吐司相应文字内容的。

细心的你可能发现还有些不足的地方，就是上图的点击菜单选项时，弹出的菜单位置有点太靠上啦，能不能设置呢，还有菜单的背景和文字颜色能不能设置呢？答案当然是可以的！

首先设置好样式：

然后直接在这里引用就可以了： app:popupTheme=”@style/ToolbarPopupTheme”

<android.support.v7.widget.Toolbar

android:id="@+id/toolbar"

android:layout_width=“match_parent”

android:layout_height="?attr/actionBarSize"

android:background="@color/colorAccent"

app:popupTheme="@style/ToolbarPopupTheme">

<TextView

android:id="@+id/title"

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:layout_gravity=“center”

android:text=“标题”

android:textColor="@color/white"

android:textSize=“22sp” />

</android.support.v7.widget.Toolbar>

效果图：

在这里插入图片描述

与AppBarLayout结合的使用

（1）： app:layout_scrollFlags=”scroll”

xml代码：

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.CoordinatorLayout 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.design.widget.AppBarLayout

android:layout_width=“match_parent”

android:layout_height=“wrap_content”>

<android.support.v7.widget.Toolbar

android:id="@+id/toolbar"

android:layout_width=“match_parent”

android:layout_height="?android:attr/actionBarSize"

android:background="@color/colorAccent"

app:layout_scrollFlags=“scroll”

app:popupTheme="@style/ToolbarPopupTheme">

</android.support.v7.widget.Toolbar>

</android.support.design.widget.AppBarLayout>

<android.support.v4.widget.NestedScrollView

android:id="@+id/nestedScrollView"

android:layout_width=“match_parent”

android:layout_height=“match_parent”

app:layout_behavior="@string/appbar_scrolling_view_behavior">

<LinearLayout

android:layout_width=“match_parent”

android:layout_height=“match_parent”

android:orientation=“vertical”>

<TextView

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:layout_margin=“16dp”

android:text="@string/large_text" />

</android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>

首先注意最外层：包裹了一层 android.support.design.widget.CoordinatorLayout 布局，那CoordinatorLayout 布局是什么的，我们可以理解为它是加强版的FramLayout。然后注意：Toolbar 的新添加的这条属性 app:layout_scrollFlags=”scroll” 。最后看一看效果图：

在这里插入图片描述

PS：对于 scroll 属性，网上也有说的比较专业的，不过我认为从产生的效果角度去分析的话，那就是：往上滑动就不说了，往下滑动就是当下面的滚动布局滑动到顶端时，标题栏toolbar才会滑出来。该属性实用性一般吧。

（2）：app:layout_scrollFlags=”scroll|enterAlways”

scroll 与 enterAlways 结合产生的效果图如下：

在这里插入图片描述

PS：我们还是从产生的效果角度去分析的：往下滑动时，，标题栏 toolbar 会优先滑出来，然后滚动布局才开始滑动。就像该单词的意思一样：总是在。也就是只要添加了该属性值，下滑时 toolbar 总是优先滑出来。该属性比较实用。

（3）： app:layout_scrollFlags=”scroll|enterAlways|snap”

在以上基础上，在与 snap 结合所产生的效果图如下：

在这里插入图片描述

PS：还是从产生的效果角度去分析的：不管是往下或者往上滑动时，，标题栏 toolbar 首先还是和（2）中一样的，不过有个细微的不同，toolbar会根据当前的滚动距离，自动选择是隐藏还是显示。该属性实用性也一般。

（4）： app:layout_scrollFlags=”scroll|enterAlways|exitUntilCollapsed”

scroll 与 enterAlways 与 exitUntilCollapsed 结合所产的效果图如下：

在这里插入图片描述

注意此时Toolbar的布局有些许改变（改变后的）：

<android.support.v7.widget.Toolbar

android:id="@+id/toolbar"

android:layout_width=“match_parent”

android:layout_height=“100dp”

android:background="@color/colorAccent"

android:minHeight=“40dp”

app:layout_scrollFlags=“scroll|enterAlways|exitUntilCollapsed”

app:popupTheme="@style/ToolbarPopupTheme">

</android.support.v7.widget.Toolbar>

我们给Toolbar 设置了一个最小高度 android:minHeight=”40dp”，然后又把正常高度改变了，并随意改成了100dp。

PS：还是从产生的效果角度去分析的：默认toolbar 显示的正常高度值我们设置成的100dp，当我们上滑的时候，高度达到最小高度40dp时，toolbar不在滑动了。该属性感觉实用性不强。

（5）： app:layout_scrollFlags=”scroll|enterAlways|enterAlwaysCollapsed”

scroll 与 enterAlways 与 enterAlwaysCollapsed 结合所产的效果图如下：

在这里插入图片描述

xml中Toolbar 的布局和（4）还是一样的，不过app:layout_scrollFlags属性，由原来的exitUntilCollapsed改为enterAlwaysCollapsed。

PS：还是从产生的效果角度去分析的：默认toolbar 显示的正常高度值我们设置成的100dp，当我们上滑的时候，toolbar直到完全隐藏时，下面的滚动布局才开始发生滚动；下滑时toolbar会优先滑出设置的最小高度值，然后当滚动布局下滑到顶部时，后面的toolbar部分，才开始完全显示（滑）出来。该属性感觉实用性也不强。

与CollapsingToolbarLayout结合的使用

（1）：先看下效果图：

在这里插入图片描述