Android imitates the QQ space style UI and androidui
Content
- Environment
- Demonstrate the UI that imitates the QQ space Style
Although this UI is a little different from the current QQ space, you can also learn a lot.
Download Demo Environment
- Windows 7 64-bit
- Eclipse ADT V22.6.2, Android 4.4.3
- SAMSUNG GT-I9008L, Android OS 2.2.2
Demonstrate the UI that imitates the QQ space Style
Although this UI is a little different from the current QQ space, you can also learn a lot. For example,
- How is the effect achieved when you click the plus sign;
- How is the effect achieved when I click "My Space Dynamics;
- How to Implement the button at the bottom, especially the plus sign in the middle.
In fact, every Android APP is a collection of various functions and effects. At the beginning of our learning, we can learn more deeply by constantly imitating these functions and effects.
Figure 1 "main program" on the left, "plus sign" in the middle, and "dynamic space" on the right
Download Demo
In the android project, how does one control the consistency of layout style? Is there a dedicated UI development? Details
As a developer, these are not really our relationships, and we do not need to spend too much time on them, the layout style is mainly achieved through the uniform effect of color fonts one by one to achieve consistent style effect, design style, all of these will be adjusted with the help of the artist. All we need to do is to use the code to control the layout, so that our design will keep the style while running on different mobile phones, and the layout will not be distorted.
Android UI Effect
Write a style for the background, put it under your res/drawable folder, and reference this style file in the android: background attribute of the background layout. Others you will do. For example, the style is bg. xml,
Content:
<Shape> <! -- Solid -->
<Solid android: color = "# ff9d77"/> <! -- Gradient -->
<Gradient
Android: startColor = "# ff8c00"
Android: endColor = "# FFFFFF"
Android: angle = "270"/> <! -- Stroke -->
<Stroke
Android: width = "2dp"
Android: color = "# dcdcdc"/> <! -- Rounded corner -->
<Corners
Android: radius = "2dp"/>
<Padding
Android: left = "10dp"
Android: top = "10dp"
Android: right = "10dp"
Android: bottom = "10dp"/>
</Shape>