如何实现令人印象深刻的登录屏幕?


  • 背景图。
  • 注册屏幕。
  • 登录屏幕。
  • 在每个屏幕的边缘空白。
  • 输入字段。
  • 徽标,底部按钮和登录/注册标签。

我认为,根据Android Views来解释这些组件并不是很大的努力。 例如,每个屏幕应该是一个Android Fragment ,您可以使用ViewPager在它们之间进行切换。 背景,徽标和按钮可以是简单的ImageView对象。

因此,该应用程序将具有以下结构:

  • 使用ViewPager进行 活动
  • 适配器
  • 登录片段
  • 注册片段

差距如何?

这就是为什么我选择使用ViewPager组件的原因之一。 其适配器具有getPageWidth方法,该方法返回给定页面的比例宽度,该百分比是ViewPager从(0.f-1.f]开始测得的宽度的百分比。您可以调整特定页面的宽度以满足您的需要,下一页/上一页将向左/右移动,以填补当前页面留下的空白。

看起来是这样的:

我们如何知道间隙的宽度? 那么应该垂直放置在间隙中间的文本呢?

不用担心 我们将创建一个因子变量 它是在适配器的构造函数中计算出来的,然后将在getPageWidth方法中使用该因子,如下面的代码所示。

我使用ConstraintLayout作为父视图,它允许您在平面视图层次结构中构建复杂的响应式布局。 Android中的著名建议是避免在布局中创建 视图的 深层次结构 因为这会损害性能并增加在屏幕上绘制UI的时间。

我假设您熟悉ConstraintLayout及其工作方式。 如果您不是,我强烈建议您阅读

什么是 AnimatedViewPager

AnimatedViewPager是一个自定义视图,它不响应任何触摸事件,并且会更改滑动时间。 您可以在此处查看代码

徽标和按钮。

这些元素将在“登录”和“注册”屏幕之间共享; 因此将它们放在一个地方是合理的。 徽标以及按钮是简单的ImageView对象,可以将它们从一个片段平滑转换为另一个片段。

其次是活动类。

让我们直接进入代码:

注意:只要您的应用进入该屏幕,输入就会获得焦点; 这样会导致键盘抬起,我们不希望这样。 这就是为什么我在布局的顶部有一个简单的View来捕获输入之前的焦点。

我对每个输入字段都使用一个简单的TextInputEditText视图, 视图包装在TextInputLayout中 (这就是我们在顶部获得浮动标签的方式)。

为了防止文件中每个TextInputEditText视图的属性重复,我创建了一种包含所有常用属性的样式。 我对TextInputLayout视图也做了同样的事情 您将在这里找到它。

顺便问一下,您在这里注意到了吗? 密码文本比电子邮件文本细。 此外,浮动标签还有一些小问题。 为了解决这个问题,您必须在onCreate方法中编写一些代码:

如您所见,我正在使用一个名为VerticalTextView的自定义视图。 这是显示“ 登录/注册”的粗体文本。 您可以在此处查看代码。

如果我们只能使用View.setRotation方法,为什么还要自定义TextView?

我希望我能做到。 这里的问题是它并没有真正旋转视图。 它仅旋转内部的文本,但根本不改变对象的宽度或高度。 这确实弄乱了布局。

我在手机上拍摄了快照,如果再仔细看,即使文本是垂直的,您也会看到视图的边界仍然是水平的。 (在拍摄之前,我已经启用了“ 显示布局范围”选项)

关键是VerticalTextView可以完成工作。 但是,它在动画方面存在一些问题(在本文后面)。 请参阅此链接以获取更多详细信息。


这里有三种动画:

  • 折叠 动画。
  • 展开动画。
  • 触摸输入时缩放动画。

重要!

TextSizeTransition不能将VerticalTextView (处于垂直位置)绘制到位图中。 它被修剪。

但是,我们可以在视图上升时将视图缓慢旋转90度。 过渡停止后,我们需要将rotation属性设置为0并调用VerticalTextView.setVerticalText(true)方法; 这样,我们将消除旋转视图后剩余的多余空间。 这是我们的做法:


如您所见,从水平位置回到垂直位置的旋转非常快。


谢谢阅读!