The realization of the natural excessive effects between the selection control and the selection interface in android-a new interactive design, android Control

The realization of the natural excessive effects between the selection control and the selection interface in android-a new interactive design, android Control

Reprinted please indicate the source: http://blog.csdn.net/jianghejie123/article/details/40648931

In Android, you often need to select a feature, such as selecting a date, a file, and a location. Generally, we use the select dialog box, for example, using datepicker to select a date, sometimes activity is also used, but both methods have a disadvantage, that is, the user obviously feels the switching between interfaces. Sometimes, the following data interaction method should be better:

In fact, the above app effect comes from the CapitaineTrain application. It seems like a train app, and the author of this app also introduced this effect in his blog, at the same time, the source code to achieve this effect is open. This article is based on the author's blog.

I didn't translate it directly, because the ideas here are complicated and I didn't understand what the author meant. I also read many comments below the original article and said that I didn't understand what the author meant, it is estimated that the author has not made it clear. After I implemented a demo based on the author's source code, I wrote a bit about my understanding. At the end of the article, I will post the original article address and the download address of the Code.

In the image above, after you click "select date button", the date selection page will gradually display, at the same time, the "select date button" will slowly move to the top position, while the section under "select date button" will slowly move down and there is a process of low transparency until it disappears. When the animation ends, only the "select date button" and date selection page are left. The whole process is like giving space to the interface to be presented by all elements on the interface according to certain rules. It is too natural, in addition, the upper and lower translation animations triggered by the selection controls at different locations are different (for example, when the Selection control is on the top, the control will not have the upper-shift animation effect), which is very flexible, the idea of switching between the two interfaces is closely related.

Maybe only foreign developers will be so careful.

After the results are completed, let's look at the source code structure:

Among them, FormAnimatorDemoActivity. java is a demo added by myself, because the author's example is dazzling.

MainWithAnimatorActivity and MainWithoutAnimatorActivity are two ways to achieve this effect:Attribute Animation ModeAnd GeneralGradient Animation Mode.Gradient Animation ModeThe results are not satisfactory, but the specific code helps us to understand the implementation logic.

CustomAnimator is a custom animation class, which isAttribute Animation ModeCore code.

Positions encapsulates attributes of different objects in some columns.

PositionTypeEvaluator is the custom Estimation Method of property animation. For details about this concept, refer to the usage of property animation.

You only need the following three lines of code to use property Animation:

animator.setAnimatorViews(mMainContainer, localfrom, mFirstGroup, Arrays.asList(new View[]{mSecondGroup,mFirstSpacer,mThirdGroup}), null, mEditModeContainer, Arrays.asList(new View[]{}));                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   animator.prepareAnimation();animator.start();

The definition of animator is as follows:

private CustomAnimator animator =newCustomAnimator();

What is hard to understand here isThe seven parameters of animator. setAnimatorViews do not understand the meaning of these seven parameters. They neither know how to call them nor study the source code of CustomAnimator.

Let's look at CustomAnimator.setAnimatorViewsDefinition:

public void setAnimatorViews(ViewGroup mainContainer, View focusedView, View focusedViewContainer, List<View> fadedOutToBottomViews, View stickyTo, ViewGroup editModeView, List<View> slideToTop)

mainContainer: The upper-layer container of the entire layout.

focusedView: The clicked control, that is, the selection control mentioned above.

focusedViewContainer:focusedViewThe parent container.

fadedOutToBottomViews: The view list will disappear to the bottom during the animation process

stickyTo: I don't know why.

editModeView: Hidden selection interface.

slideToTop: Slides to the Top view list during the animation process.

What I want to talk about here is that at the api design level, the author's design is very bad. However, this is also the most code-saving, and the author has many skills in processing attribute animations.

Where,mainContainer,FocusedView,FocusedViewContainer,editModeViewFour parameters are required. HoweverFadedOutToBottomViews andslideToTopIf it is empty at the same time, the effect will be greatly reduced. ActuallyFadedOutToBottomViews andslideToTopThe specific view required in the list is determined by the developer based on the current UI. So far, I have not studied the code in depth.

Address: http://www.cyrilmottier.com/2014/05/20/custom-animations-with-fragments/

Finally, it is the source code. The author did not fully implement the effect in the above GIF image in his own demo, but made a simple demo that can describe the usage method. I personally think this demo is not doing well, the author's demo is:

https://git.mika-dev.com/Mika/custom-animations-with-fragment


In addition, in order to see the effect more intuitively, I imitated the layout in the gif image and made a demo.

Http://download.csdn.net/detail/jianghejie123/8102407

In the android interface layout, how do I achieve coverage and set the z-axis order of controls?

Currently, I have not found the concept of Z in the android ui.
The order of adding a view is determined.

How can I implement the pull-down effect on an android interface? What controls are used instead of refreshing the effect?

Webview or Scrollview. The content in these controls can be pulled up and down.