Phase 1: complete implementation of a simple weather forecast application (Phase 2)

Phase 1: complete implementation of a simple weather forecast application (Phase 2)

"Phase 1" means the first time I systematically studied Android development. This is mainly to record my learning process.

 

PreviousPhase 1: complete implementation of a simple weather forecast application (I)After completing the core functions of the application, we need to optimize it. Today, I optimized some of its UI and set some animations.

First of all, I want to share my experience on the whole process.

I plan to make the app google's Material design style, with a lot of content. In this step, we only need to implement two points. First, the TextView that displays information has a shadow, like a card, second, these textviews are displayed from left to right. Find the implementation method after you know what effect you want to achieve. For such a clear purpose, it is better for me to be Baidu, because there are very few tool books in such a fine place, then I will open the official API documentation and Kingsoft. Because there are several situations in this process, one is that the keywords are incorrect and no relevant content can be found, so we can only switch to the keywords to continue searching, and the other is that the searched tutorials are in the fog of the cloud, this may be a problem of the author, or I do not understand this knowledge, so I need to check the API documentation. In addition, even if the tutorial is clear, it is best to check the document for a comparison. In addition to understanding more, there may be version differences.

In addition, reading the API documentation is bitter, not only because it is full of English, but also because it has a lot of content. Some labels or keywords are displayed during the tutorial, but you do not know where the document is. You can enter the code in Android Studio and press ctrl to point to the code, the package that it belongs to is displayed. You can also press ctrl + shift + N to enter the keyword. In the following illustration, I will explain where these labels are in the document. Finally, because I cannot figure its dynamic graph, it is very easy to write it for anyone who wants to see the animation effect.

1. Implement shadow in TextView

First

Although the shadow is not big, you should be able to see the changes. Compared with the previous article, there are several more textviews, which are used to display weather information. You only need to modify the JSON data in the previous article.

The following is the code. This is based on an online tutorial.

This is an xml file placed under res/drawable.

Add it to styles. xml first, and then reference this style in TextView.

Note:

(1) This <layer-list> can store other drawable objects, but other objects must be included in <item> </item>. Each object is an item. This relationship is a bit like the layout method in the layout file and the view in it.

(2) <shape> draws a shape.

(3) <solid> only the color attribute is used. This label is used to fill the shape with this color.

(4) <corners> the rectangle is converted to a rounded corner only when the rectangle is in shape.

(5) <item android: left = "1dp" android: bottm = "1dp"> it controls the shape offset of the upper layer. In fact, this is not very similar to the offset, because according to the preview Effect of, it does not feel like moving, but loses the length of 1 DP. Of course, this preview effect is also a bit strange. When you write an attribute in <item>, You can preview it normally, but if you write one more, it will be completely distorted.

The principle of shadow is that two identical rectangles overlap, and the upper layer is shifted. The bottom layer is the shadow. Therefore, the color of the underlying shape is the color of the shadow. The upper layer color is the background color of TextView.

The introduction and explanation of all the labels here are in the Drawable below, which appears after you click API Guides.

2. Implement TextView pop-up from left to right

The Animation contains a lot of content. After a long time, I realized that the <scale> attribute in the Tween animation in View Animation can achieve the desired effect.

First, set the animation attribute in xml.

This is an xml file under res/anim/(anim is a self-created folder)

Note:

(1) <scale> can be directly used as the root element.

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

(3) fromXScale = "0.0", toXScale = "1.0", which means that from scratch, and eventually the normal size, smaller than 1.0 is reduced, greater than 1.0 is enlarged, therefore, 0.0 indicates the size is 0, and 1.0 indicates the normal size. Note that the Y axis does not change here. Because what I need is the pop-up effect of TextView from left to right on the X axis. To start from the right, set TX to 100%.

(4) Tx and Ty = "0%", which means the starting position of the animation. 0% is equivalent to the origin, and 50% is the midpoint. About coordinatesPhase 1: the location of drawText and problems related to Stroke and drawArcAs mentioned in, the larger x goes to the right, the larger y goes down.

(5) In fact, the relationship between fromXScale and feature Tx is a bit fantastic. For example, fromYScale and toYScale here are both 1.0, so it makes no sense to adjust ty = "0%, in fact, it is okay to delete this attribute, because the Y axis direction does not change, so there is no so-called starting position.

(6) duration = "300" means that the animation lasts for 300 milliseconds from playback to playback, that is, 0.3 seconds. That is, this attribute sets the animation duration.

(7) android: interpolator = "@ android: anim/accelerate_interpolator, the system also provides controllers in other Playback modes.

Then set the animation playing in. java.

In fact, I implemented four textviews that show the weather information in turn. To achieve this effect, I added android to the <set> tag: startOffset = "300" is still available. add zoominAnimation in java. setStartOffset (300); this method is used to play an animation after a delay of 300 milliseconds. Of course, four textviews should be displayed in sequence, and they must be set separately.

The preceding <set>, <scale> label, and other attributes are described in the Animation in the figure above in the API documentation, from there, you will know more about Animation.