下图是captain train的搜索页面的效果图,这篇文章我就来分析一下如何实现一个类似的效果。
分析Android中的动画效果,最好是从一个放慢的动画效果图来分析,可以通过Android系统中的开发者选项里面设置动画的时长。下图是10倍动画时长的效果
整个界面主要由两部分构成,正常模式显示的表单以及当某一个表单获取焦点的时候,需要显示出来的编辑面板(比如点击日期表单的时候,含有日期控件的编辑面板会显示出来),编辑面板可以使用fragment,这样也便于代码的模块化。
仔细观察,可以发现整个效果其实是由多个同时发生的子动画组成的。子动画主要有一下几个:
1.移动获取焦点的控件,以及这个控件上面的所有控件,最终的结果就是获取焦点的控件移动到actionbar下面。
2.获取焦点的控件下面的控件的淡出效果。主要就是隐藏在编辑模式下不需要的控件。
3.编辑面板(比如日期控件)的渐入效果。
4.附着(stick to)动画,主要是一些控件需要始终位于获取焦点的控件下方,这些控件会随着获取焦点的控件一起移动。
下面就是每个动画对应的代码实现:
layout很简单,主要容器就是一个scrollview,具体代码可以参考github代码。
1. 移动获取焦点的控件
如果获取焦点的控件是容器的直接子控件,通过getTop()方法就可以得到需要移动的距离,如果不是的话,就需要使用View#getDrawingRect(Rect)和容器的ViewGroup#offsetDescendantRectToMyCoords(View, Rect)方法。
private final Rect mTmpRect = new Rect();
private void focusOn(View v, View movableView, boolean animated) {
v.getDrawingRect(mTmpRect);
mMainContainer.offsetDescendantRectToMyCoords(v, mTmpRect);
movableView.animate().
translationY(-mTmpRect.top).
setDuration(animated ? ANIMATION_DURATION : 0).
setInterpolator(ANIMATION_INTERPOLATOR).
start();
}
2.获取焦点的控件下的控件的淡出效果
控件会在向下移动容器高度的一半后完全淡出。这里要通过容器的OnLayoutChangeListener来获取容器的高度。
private void fadeOutToBottom(View v, boolean animated) {
v.animate().
translationYBy(mHalfHeight).
alpha(0).
setDuration(animated ? ANIMATION_DURATION : 0).
setInterpolator(ANIMATION_INTERPOLATOR).
start();
}
3.编辑面板(比如日期控件)的渐入效果
编辑模式要现实的控件会放到一个容器中,这个容器默认是不可见的,进入编辑模式之后,设置容器可见,并且将容器的y坐标设置为0。为了避免遮挡住获取焦点的控件,可以给容器设置一个比较大的padding。
private void slideInToTop(View v, boolean animated) {
v.animate().
translationY(0).
alpha(1).
setDuration(animated ? ANIMATION_DURATION : 0).
setInterpolator(ANIMATION_INTERPOLATOR);
}
4.附着动画
这里就是让一个灰色的view始终保持在获取焦点的控件下面。
private void stickTo(View v, View viewToStickTo, boolean animated) {
v.getDrawingRect(mTmpRect);
mMainContainer.offsetDescendantRectToMyCoords(v, mTmpRect);
v.animate().
translationY(viewToStickTo.getHeight() - mTmpRect.top).
setDuration(animated ? ANIMATION_DURATION : 0).
setInterpolator(ANIMATION_INTERPOLATOR).
start();
}
github地址
https://github.com/lzyzsd/custom-animations-with-fragment.git
欢迎加Q Q群:104286694
- 大小: 3.4 MB
- 大小: 2.8 MB
分享到:
相关推荐
`Fragment`是Android SDK提供的一种机制,它允许你将界面的一部分(比如一个列表或一个表单)分离出来,使其可以在不同的条件下独立于Activity存在和操作,这在平板电脑或大屏幕设备上特别有用,因为它们通常显示更...
表单验证框架,支持对 activity/Fragment 内的 TextView/EditText 进行规则验证 compile 'com.github.LongMaoC:validateui:v2.3' 部分效果图(demo在根目录下 ./apk/demo.apk) 更新内容 20171010 : 新增输入监听...
在Android应用开发中,Fragment是Activity的一个模块化组件,它可以在屏幕中展示用户界面的某个部分,例如一个列表、一个表单或者一个对话框。Fragment的设计使得开发者可以更灵活地管理UI,特别是在处理平板和手机...
在Android系统中,特别是对于大屏幕设备如平板电脑,Fragment的使用可以提高界面的可交互性和用户体验。本篇文章将深入讲解Fragment的简单使用方法。 1. **Fragment的基本概念** Fragment并非一个独立的应用组件,...
3. **使用ListView展示选项**:在每个表单页面的Fragment布局中,添加一个ListView,并创建一个自定义的列表项布局,包括文本和单选/多选控件。接着,创建一个适配器来填充ListView的数据,如ArrayList或Cursor,...
- 当标签页被移除或不可见时,可以考虑使用Fragment的onPause()和onStop()方法释放资源。 7. **界面设计** - 用户界面的设计应直观易用,标签栏的位置、颜色和字体大小需符合用户习惯。标签页的数量限制也需考虑...
在Android应用开发中,EditText是用户输入数据的常见组件,而表单验证是确保用户输入数据有效性和安全性的关键步骤。一个高效的表单验证框架能够极大地简化开发过程,提高代码的可读性和可维护性。"Android之...
10. **Activity和Fragment**:登录和注册界面可能作为单独的Activity或Fragment实现,后者更利于在复杂的多屏布局中重用。 11. **生命周期管理**:理解Activity和Fragment的生命周期至关重要,确保在正确的时间保存...
在Android中,有两种主要的动画类型:属性动画(Property Animation)和视图动画(View Animation)。属性动画系统更强大,可以改变任何对象的任意属性,而视图动画仅限于改变视图的位置、大小、透明度等。实现抖动...
在Android设计规范中,BottomSheet是一种底部滑出的面板,它通常用于展示一些临时或附加的信息,比如选项列表、表单输入等。在Android SDK中,我们可以通过`androidx.appcompat.app.BottomSheetDialog`来创建此类...
- 使用ImageView、TextView、EditText、Button等Android UI组件构建商品展示、搜索栏、登录表单等常见界面。 - 考虑到用户体验,需进行响应式布局设计,确保不同屏幕尺寸和分辨率的设备上都能正常显示。 2. **...
11. **MaterialButton**: 替代了传统的Button,提供了Material Design风格的外观和动画效果。 12. **TextInputLayout**: 为EditText提供了增强的功能,如错误提示、浮动标签等,提高了输入表单的用户体验。 13. **...
在Android开发中,UI设计是至关重要的,因为它直接影响到用户对应用的第一印象和使用体验。本资源"安卓UI布局相关-AndroidUI组件库各种好看的组件.rar"提供了多种美观的UI组件,供开发者们在构建应用时参考和使用。...
在Android开发领域,掌握各种控件的使用是基础也是关键。这个"100多个Android Demo的集合"是一个非常宝贵的资源库,它包含了丰富的实例,旨在帮助初学者深入理解和实践Android开发中的各种组件和功能。下面,我们将...
如果布局是在Fragment中,可以尝试在软键盘弹出时使用`FragmentTransaction`的`setCustomAnimations()`方法,配合动画效果,使内容区域平滑地上移。 6. **使用 CoordinatorLayout 和 AppBarLayout**: 对于使用了...
提供接口或回调函数,让使用滑动锁的Activity或Fragment可以监听到解锁事件,以便进行后续操作,如提交表单、执行功能等。 6. **封装与复用**: 这个源码已经完成了封装,意味着它具有良好的可复用性。开发者可以...
1. **布局设计**:Android应用的用户界面主要是通过XML文件来定义的,这部分源码会包含一个或多个XML布局文件,用于创建注册表单。这些文件会定义输入字段(EditText)、按钮(Button)和其他UI组件的位置和样式。 ...
在“androidx的recyclerview新闻列表”项目中,我们主要关注如何使用`RecyclerView`来构建一个动态更新的新闻列表,并结合可拖动刷新的功能,为用户提供一个交互式的天气表单。以下是对这个项目中的关键知识点的详细...
- **使用**:使用`<GridLayout>`标签在XML布局文件中创建,通过`android:columnCount`和`android:rowCount`属性指定行数和列数。 5. **StackView/AdapterViewFlipper** - **定义**:StackView和...