Parsing Android style: layout is fundamental

If you used to be a WEB Front-end designer, and if you used to have design skills, you are very honored. If you switch to the Android platform, both previous knowledge and experience can be well transplanted to the Android platform. I think that learning is a long-term accumulation process and experience is very important. Why do some people make money regardless of their business? Because of his experience, experience, and flexibility, he is wise.

Layout is fundamental,This is true for both WEB design and mobile client design. If the game is not deployed in the first place, even if your details are well done, you should rebuild it in the end. Compared with the layout in traditional WEB design, there are quite a few Android platforms, but the layer layout of WEB design has a new definition in Android, called frame layout. The layout is not important in this article, because it is similar to the concept in the WEB, so it takes a while.

To be honest, I still like the style naming rules in WEB design, which are simple and easy to use. The most important thing is that WEB styles are well managed. Unlike Android style files, they are not very detailed and seem messy. If you have studied the SDK design method, you will find that the style of a button is very detailed. There are more than 20 style files, such as btn_default.xml and btn_default_small.xml.

The following describes how the SDK is designed. You can customize a button style file btn_default.xml, includingNon-Focus, focus, pressedThree different statuses.

 
 

  
  
1 <?xml version="1.0" encoding="utf-8"?>    
  
  
 2 <selector xmlns:android="http://schemas.android.com/apk/res/android">    
  
  
 3     <item android:state_pressed="true">    
  
  
 4         <shape>    
  
  
 5             <gradient      
  
  
 6                 android:startColor="#ff8c00"      
  
  
 7                 android:endColor="#FFFFFF"    
  
  
 8                 android:angle="270" />    
  
  
 9      
  
  
10             <stroke      
  
  
11                 android:width="2dp"      
  
  
12                 android:color="#dcdcdc" />    
  
  
13      
  
  
14             <corners      
  
  
15                 android:radius="2dp" />    
  
  
16      
  
  
17             <padding      
  
  
18                 android:left="10dp"      
  
  
19                 android:top="10dp"    
  
  
20                 android:right="10dp"      
  
  
21                 android:bottom="10dp" />    
  
  
22      
  
  
23         </shape>    
  
  
24      
  
  
25     </item>    
  
  
26      
  
  
27     <item android:state_focused="true">    
  
  
28         <shape>    
  
  
29             <gradient      
  
  
30                 android:startColor="#ffc2b7"      
  
  
31                 android:endColor="#ffc2b7"    
  
  
32                 android:angle="270" />    
  
  
33      
  
  
34             <stroke      
  
  
35                 android:width="2dp"      
  
  
36                 android:color="#dcdcdc" />    
  
  
37      
  
  
38             <corners      
  
  
39                 android:radius="2dp" />    
  
  
40      
  
  
41             <padding    
  
  
42                 android:left="10dp"      
  
  
43                 android:top="10dp"    
  
  
44                 android:right="10dp"      
  
  
45                 android:bottom="10dp" />    
  
  
46      
  
  
47         </shape>    
  
  
48      
  
  
49     </item>    
  
  
50          
  
  
51     <item>    
  
  
52         <shape>    
  
  
53             <gradient      
  
  
54                 android:startColor="#ff9d77"      
  
  
55                 android:endColor="#ff9d77"    
  
  
56                 android:angle="270" />    
  
  
57      
  
  
58             <stroke      
  
  
59                 android:width="2dp"      
  
  
60                 android:color="#fad3cf" />    
  
  
61      
  
  
62             <corners      
  
  
63                 android:radius="2dp" />    
  
  
64      
  
  
65             <padding      
  
  
66                 android:left="10dp"      
  
  
67                 android:top="10dp"    
  
  
68                 android:right="10dp"      
  
  
69                 android:bottom="10dp" />    
  
  
70      
  
  
71         </shape>    
  
  
72      
  
  
73     </item>    
  
  
74      
  
  
75 </selector      
 
 

Selector can be understood as a state switch. Different styles are switched under different states. In traditional WEB design, it is a pseudo-class hover. Shape indicates the shape of the button.

Style reference is very simple. Android uses style files as a resource. The following describes how to use styles.

 
 

  
  
1 <Button 
  
  
2                 android:background="@drawable/btn_default" 
  
  
3                 android:layout_width="wrap_content"   
  
  
4                 android:layout_height="wrap_content" 
  
  
5                 android:text="test Style" 
  
  
6             > 
  
  
7               
  
  
8             </Button> 
  
  
9               
 
 

Effect

 

Summary

In general, Android style design is very flexible. Most concepts in WEB design are applicable to Android platforms, including style inheritance concepts.

Note: This article is copyrighted by the author. Click here to connect to the original article.