Phase One: The complete implementation of a simple weather forecast application (II.)

"Phase One" refers to the first time I have systematically studied Android development. This is mainly a record of my learning process.

Previous Stage One: A simple weather forecast application of the complete implementation process (a) completed the application of the core functions, the next is to optimize it. Today I'm going to optimize some of its UI and set some animations.

First, explain, this part is I now learn to do, make time also quite toss, so I want to first the whole process of experience to share.

I'm going to use Google's material design style, it's a lot of content, as far as this step, as long as the implementation of two points, one is to display the information of the TextView has a shadow, like a card, and the second is that these textview from left to right bounce out. Once you know what you want to achieve, find a way to achieve it. There is such a clear purpose, for now I, the best is Baidu, because such a fine place, the book of tools is rarely mentioned, and then I will open the official API documentation and PowerWord. Because this process has such a few cases, one is the wrong keyword, search is not relevant content, this has no way, can only change the keyword to continue searching, two is the search of the tutorial speak Foggy, this may be the author's problem, it may be I do not understand this knowledge, so you need to view the API documentation, and even if the tutorial is very clear It's better to look at the documentation as well, in addition to being able to learn more, there is a possibility of version differences.

In addition to reading the API documentation is bitter, not only because it is full English, but also because it has a lot of content. Look at the tutorial, see some tags or keywords, but do not know where in the document, you can enter the code in Android Studio, and then hold down CTRL, point to the code, it will show which package it belongs to, and also can be directly pressed CTRL + SHIFT + N input keywords, will also be displayed. As explained below, I'll give you where these tags are in the documentation. Finally, because I can not get its dynamic map, so want to see the animation effect of the friend to write their own, very simple two steps.

First, the realization of TextView with Shadow

First on

Although the shadow is not big, but should be able to see what changes it. Here, compared to the previous article, a few more textview, which is used to display the weather information, as long as the previous parsing JSON data there to modify it.

And here's the code, which I'm doing based on a tutorial on the web.

This is an XML file placed under the res/drawable/.

The following is the first to add it to styles.xml, and then refer to this style in TextView

Description

(1) This <layer-list> can store other drawable objects, except that other objects are included in the <item></item>, each object is an item. This relationship is a bit like the layout of layout files and the view in them.

(2) <shape> is drawing a shape out.

(3) <solid> only the color attribute, the function of this tag is to fill this shape with this color.

(4) <corners> only when the shape is a rectangle rectangle, the effect is to turn the rectangle into a rounded corner.

(5) <item android:left= "1DP" android:bottm= "1DP" > is to control the upper shape offset, in fact, this is not quite like the offset, because from the preview effect of AS, it does not move the feeling, but lost the length of 1DP. Of course, this preview effect is also a bit strange, in the <item> write a property, can be normal preview, but write more one is completely deformed.

The principle of this implementation is that the two identical rectangles overlap, then the upper offset, and the shadows are the ones that are exposed at the bottom. So the color of the bottom shape is the color of the shadow. The upper color is the background color of the TextView.

All the tags here are described and explained in the drawable below, this is the one that appears after clicking API Guides

Second, realize TextView from left to right pop

Animation part of a lot of content, I have been blindfolded for a long time, only to know that only the view animation in the tween animation in the <scale> properties can do the effect I want.

Set animation properties in XML first

This is an XML file under res/anim/(Anim is the folder you created)

Description

(1) You can actually use <scale> as the root element directly.

(2) <set> is a container that can contain other elements, similar to the above <layer_list>.

(3) fromxscale= "0.0", toxscale= "1.0", this meaning is from scratch, and eventually the normal size, less than 1.0 is reduced, greater than 1.0 is magnified, so 0.0 represents the size of 0, 1.0 represents the normal size. Note that there is no change in the y-axis. Because what I need is a textview effect that pops up from left to right in the x-axis direction. If you want to start from the right, set the Pivotx to 100%.

(4) Pivotx and pivoty= "0%", which means the beginning of the animation position, 0% equivalent to the origin point, 50% is the midpoint. Coordinate the situation with the previous stage one: DrawText the position of the problem and stroke, DRAWARC related issues , as mentioned in the case of X, the greater the right, y the greater the downward.

(5) In fact, Fromxscale and pivotx These two attributes of the relationship is a bit strange, like now I here Fromyscale and Toyscale are 1.0, then pivoty= "0%" is meaningless, in fact, delete this attribute is not a problem, Because the y-axis does not change, there is no so-called start position.

(6) duration= "300", meaning that the animation from play to the end of 300 milliseconds, also 0.3 seconds, that is, this property is set to animate the duration.

(7)android:interpolator= "@android: Anim/accelerate_interpolator", the function is to call the system provides speed controller, here is the call accelerator, accelerated playback, There are other playback mode controllers available in the system.

Then set the animation to play in. java

In fact, I achieve the effect is 4 display weather information TextView in turn, to achieve this effect, I was in the <set> tag add android:startoffset= "300" this property, In fact, you can add Zoominanimation.setstartoffset (300) to the. Java method, which is a delay of 300 milliseconds before the animation starts playing. Of course, to 4 TextView to bounce out in turn, but also to set separately.

The <set>, <scale> tags and other properties above are detailed in the animation of the API documentation above, from where you will know more about animation.

Phase One: The complete implementation of a simple weather forecast application (II.)