TC5.0android 精美界面设计教程

630674852

   一个好的程序，除了强大的功能以外，还要有一个能吸引别人眼球的界面。那么，如何开发出这些界面。 下面讲解一下，模仿ET天气的界面UI设计的一个示例，（tc移动版下个版本将为我们提供完善界面美化设计。）
    首先给大家看点击运行后的效果图：
     
1.总布局的总体思构。
接下来我们讲如合设计这个界面，首先我们在最外面写一个线性布局，宽,高都为填充，纵向排列，并为其添加背景图片，作为父窗体 ,
然后在这个最大父线性布局中，我们用3个线性布局将整个页面封成3块，而这个3个线性布局我用的是其，高度="0"  和权重，就可以让这3个线性布局，按比例的高度占满整个页面，（注：在用权重按比例去排版时，横向占：其父线性布局为的宽填充，众向占：其父线性布局为的高填充。）




2.设计最顶部布局（即1的部分）
总结经验：当线性布局横向排列时，只能上下的排动里面的子控件，而不能左右排动，这是如果我们要子控件左右排动，那么只要在线性布局中，加一个不包含任何子控件与子布局的线性布局，然后用权重就能实现我们要的效果，当线性布局纵向排列时，也可以这要处理。

顶部线性布局思路划分效果图（红色的框相当于一个线性布局，包含的相单于父子关系，并列相当于兄弟关系）：

顶部线性布局的tc代码：

1. <线性布局
   
2.         宽度="填充"
   
3.         高度="0"
   
4.         排列方向="纵向排列"
   
5.         权重="4">
   
6.         <线性布局
   
7.             宽度="填充"
   
8.             高度="匹配内容"
   
9.             排列方向="横向排列"
   
10.             权重="1"
    
11.             右边填充="100"
    
12.             >
    
13.             <线性布局
    
14.                 宽度="匹配内容"
    
15.                 高度="匹配内容"
    
16.                 排列方向="纵向排列"
    
17.                 权重="1">
    
18.             </线性布局>
    
19.             <标签
    
20.                 文本="长沙"
    
21.                 宽度="匹配内容"
    
22.                 高度="匹配内容"
    
23.                 文本颜色="#FFFFFF"
    
24.                 控件对齐="右对齐"
    
25.                 文本大小="35"
    
26.                 控件对齐="居中">
    
27.             </标签>
    
28.             <图片框
    
29.                 宽度="匹配内容"
    
30.                 高度="匹配内容"
    
31.                 控件对齐="居中"
    
32.                 加载图片="rc:more_city.png">
    
33.             </图片框>
    
34.         </线性布局>
    
35.         
    
36.         <线性布局
    
37.             宽度="填充"
    
38.             高度="匹配内容"
    
39.             权重="2"
    
40.             排列方向="横向排列">
    
41.             <线性布局
    
42.                 宽度="0"
    
43.                 高度="填充"
    
44.                 权重="1"
    
45.                 排列方向="纵向排列">
    
46.                 <标签
    
47.                     名称="标签01"
    
48.                     文本="5"
    
49.                     宽度="匹配内容"
    
50.                     高度="匹配内容"
    
51.                     文本颜色="#FFFFFF"
    
52.                     控件对齐="居中"
    
53.                     文本大小="120"
    
54.                     >
    
55.                 </标签>
    
56.                 <线性布局
    
57.                     宽度="匹配内容"
    
58.                     高度="填充"
    
59.                     排列方向="横向排列"
    
60.                     左边填充="40">
    
61.                     <图片框
    
62.                         宽度="50"
    
63.                         高度="50"
    
64.                         弹起效果="rc:update.png"
    
65.                         按下效果="rc:update_press.png"
    
66.                         控件对齐="居中">
    
67.                     </图片框>
    
68.                     <线性布局
    
69.                         宽度="匹配内容"
    
70.                         高度="匹配内容"
    
71.                         排列方向="纵向排列"
    
72.                         顶部填充="10"
    
73.                         控件对齐="居中">
    
74.                         <标签
    
75.                             宽度="匹配内容"
    
76.                             高度="匹配内容"
    
77.                             文本="点击刷新"
    
78.                             文本颜色="#FFFFFF">
    
79.                         </标签>
    
80.                         <标签
    
81.                             宽度="标签10"
    
82.                             宽度="匹配内容"
    
83.                             高度="匹配内容"
    
84.                             文本="时间"
    
85.                             文本颜色="#FFFFFF">
    
86.                         </标签>
    
87.                     </线性布局>
    
88.                 </线性布局>
    
89.             </线性布局>
    
90.             
    
91.             
    
92.             <线性布局
    
93.                 宽度="0"
    
94.                 高度="填充"
    
95.                 权重="1"
    
96.                 排列方向="横向排列">
    
97.                 <线性布局
    
98.                     宽度="匹配内容"
    
99.                     高度="匹配内容"
    
100.                     排列方向="纵向排列"
     
101.                     控件对齐="居中">
     
102.                     <标签
     
103.                         宽度="填充"
     
104.                         高度="匹配内容"
     
105.                         文本="天气"
     
106.                         名称="标签11"
     
107.                         文本颜色="#FFFFFF"
     
108.                         文本大小="30"
     
109.                         控件对齐="左对齐">
     
110.                     </标签>
     
111.                     <标签
     
112.                         宽度="填充"
     
113.                         高度="匹配内容"
     
114.                         文本="气温差"
     
115.                         名称="标签12"
     
116.                         文本颜色="#FFFFFF">
     
117.                     </标签>
     
118.                     <标签
     
119.                         宽度="填充"
     
120.                         高度="匹配内容"
     
121.                         文本="星期"
     
122.                         名称="标签13"
     
123.                         文本颜色="#FFFFFF">
     
124.                     </标签>
     
125.                     
     
126.                 </线性布局>
     
127.                
     
128.                
     
129.             </线性布局>
     
130.             
     
131.         </线性布局>
     
132.         
     
133.     </线性布局>
     

复制代码

3.设计中部布局（即2的部分）
总结经验： 这个部分设计，在这个部分的最大的线性布局中，加背景，就能实现这种带框的效果，
                其中星期与星期之间的白色的竖线，是用图片框显示出来得。
                中部线性布局思路划分效果图
               思路划分效果图                                      
      
部分图


中部线性布局的tc代码：

1. 
   
2.     <线性布局
   
3.         宽度="填充"
   
4.         高度="0"
   
5.         排列方向="横向排列"
   
6.         权重="2"
   
7.         
   
8.         加载背景="rc:widget_bg_4x1.png">
   
9.         <线性布局
   
10.             宽度="匹配内容"
    
11.             高度="填充"
    
12.             排列方向="纵向排列"
    
13.             右边填充="20"
    
14.             左边填充="20"
    
15.             顶部距离="20"
    
16.             底部填充="20"
    
17.             权重="1">
    
18.             
    
19.             <标签
    
20.                 名称="标签21"
    
21.                 文本="星期"
    
22.                 宽度="匹配内容"
    
23.                 高度="匹配内容"
    
24.                 文本颜色="#FFFFFF"
    
25.                 权重="1"
    
26.                 内容对齐="横向居中">
    
27.             </标签>
    
28.             
    
29.             <图片框
    
30.                 名称="图片框22"
    
31.                 宽度="匹配内容"
    
32.                 高度="匹配内容"
    
33.                 加载图片="rc:baoxue.png"
    
34.                 内容对齐="横向居中"
    
35.                 权重="1"
    
36.                 >
    
37.             </图片框>
    
38.             <标签
    
39.                 名称="标签23"
    
40.                 文本="温度"
    
41.                 内容对齐="横向居中"
    
42.                 宽度="匹配内容"
    
43.                 高度="匹配内容"
    
44.                 文本链接方式="网络"
    
45.                 文本链接地址="http://www.tyuyan.com"
    
46.                 权重="1">
    
47.             </标签>
    
48.             <标签
    
49.                 名称="标签24"
    
50.                 文本="温度"
    
51.                 内容对齐="横向居中"
    
52.                 宽度="匹配内容"
    
53.                 高度="匹配内容"
    
54.                 文本链接方式="网络"
    
55.                 文本链接地址="http://www.tyuyan.com"
    
56.                 权重="1">
    
57.             </标签>
    
58.             
    
59.             <标签
    
60.                 名称="标签25"
    
61.                 文本="天气"
    
62.                 内容对齐="横向居中"
    
63.                 宽度="匹配内容"
    
64.                 高度="匹配内容"
    
65.                 文本链接方式="网络"
    
66.                 文本链接地址="http://www.tyuyan.com"
    
67.                 文本大小="15"
    
68.                 权重="1">
    
69.             </标签>
    
70.         </线性布局>   
    
71.         
    
72.         <图片框
    
73.             宽度="匹配内容"
    
74.             高度="填充"
    
75.             加载图片="rc:divider_vertical.png">
    
76.         </图片框>
    
77.         
    
78.         
    
79.         <线性布局
    
80.             宽度="匹配内容"
    
81.             高度="填充"
    
82.             排列方向="纵向排列"
    
83.             右边填充="20"
    
84.             左边填充="20"
    
85.             顶部距离="20"
    
86.             底部填充="20"
    
87.             权重="1">
    
88.             <标签
    
89.                 名称="标签31"
    
90.                 文本="星期"
    
91.                 宽度="匹配内容"
    
92.                 高度="匹配内容"
    
93.                 文本颜色="#FFFFFF"
    
94.                 权重="1"
    
95.                 内容对齐="横向居中">
    
96.             </标签>
    
97.             
    
98.             <图片框
    
99.                 名称="图片框32"
    
100.                 宽度="匹配内容"
     
101.                 高度="匹配内容"
     
102.                 加载图片="rc:baoxue.png"
     
103.                 内容对齐="横向居中"
     
104.                 权重="1"
     
105.                 >
     
106.             </图片框>
     
107.             <标签
     
108.                 名称="标签33"
     
109.                 文本="温度"
     
110.                 内容对齐="横向居中"
     
111.                 宽度="匹配内容"
     
112.                 高度="匹配内容"
     
113.                 文本链接方式="网络"
     
114.                 文本链接地址="http://www.tyuyan.com"
     
115.                 权重="1">
     
116.             </标签>
     
117.             <标签
     
118.                 名称="标签34"
     
119.                 文本="温度"
     
120.                 内容对齐="横向居中"
     
121.                 宽度="匹配内容"
     
122.                 高度="匹配内容"
     
123.                 文本链接方式="网络"
     
124.                 文本链接地址="http://www.tyuyan.com"
     
125.                 权重="1">
     
126.             </标签>
     
127.             
     
128.             <标签
     
129.                 名称="标签35"
     
130.                 文本="天气"
     
131.                 内容对齐="横向居中"
     
132.                 宽度="匹配内容"
     
133.                 高度="匹配内容"
     
134.                 文本链接方式="网络"
     
135.                 文本链接地址="http://www.tyuyan.com"
     
136.                 文本大小="15"
     
137.                 权重="1">
     
138.             </标签>
     
139.             
     
140.             
     
141.             
     
142.         </线性布局>
     
143.         
     
144.         <图片框
     
145.             宽度="匹配内容"
     
146.             高度="填充"
     
147.             加载图片="rc:divider_vertical.png">
     
148.         </图片框>        
     
149.         
     
150.         <线性布局
     
151.             宽度="匹配内容"
     
152.             高度="填充"
     
153.             排列方向="纵向排列"
     
154.             右边填充="20"
     
155.             左边填充="20"
     
156.             顶部距离="20"
     
157.             底部填充="20"
     
158.             权重="1">
     
159.             <标签
     
160.                 名称="标签41"
     
161.                 文本="星期"
     
162.                 宽度="匹配内容"
     
163.                 高度="匹配内容"
     
164.                 文本颜色="#FFFFFF"
     
165.                 权重="1"
     
166.                 内容对齐="横向居中">
     
167.             </标签>
     
168.             
     
169.             <图片框
     
170.                 名称="图片框42"
     
171.                 宽度="匹配内容"
     
172.                 高度="匹配内容"
     
173.                 加载图片="rc:baoxue.png"
     
174.                 内容对齐="横向居中"
     
175.                 权重="1"
     
176.                 >
     
177.             </图片框>
     
178.             <标签
     
179.                 名称="标签43"
     
180.                 文本="温度"
     
181.                 内容对齐="横向居中"
     
182.                 宽度="匹配内容"
     
183.                 高度="匹配内容"
     
184.                 文本链接方式="网络"
     
185.                 文本链接地址="http://www.tyuyan.com"
     
186.                 权重="1">
     
187.             </标签>
     
188.             <标签
     
189.                 名称="标签44"
     
190.                 文本="温度"
     
191.                 内容对齐="横向居中"
     
192.                 宽度="匹配内容"
     
193.                 高度="匹配内容"
     
194.                 文本链接方式="网络"
     
195.                 文本链接地址="http://www.tyuyan.com"
     
196.                 权重="1">
     
197.             </标签>
     
198.             
     
199.             <标签
     
200.                 名称="标签45"
     
201.                 文本="天气"
     
202.                 内容对齐="横向居中"
     
203.                 宽度="匹配内容"
     
204.                 高度="匹配内容"
     
205.                 文本链接方式="网络"
     
206.                 文本链接地址="http://www.tyuyan.com"
     
207.                 文本大小="15"
     
208.                 权重="1">
     
209.             </标签>
     
210.             
     
211.             
     
212.             
     
213.         </线性布局>
     
214.         
     
215.         <图片框
     
216.             宽度="匹配内容"
     
217.             高度="填充"
     
218.             加载图片="rc:divider_vertical.png">
     
219.         </图片框>  
     
220.         
     
221.         
     
222.         
     
223.         <线性布局
     
224.             宽度="匹配内容"
     
225.             高度="填充"
     
226.             排列方向="纵向排列"
     
227.             右边填充="20"
     
228.             左边填充="20"
     
229.             顶部距离="20"
     
230.             底部填充="20"
     
231.             权重="1">
     
232.             
     
233.             
     
234.             <标签
     
235.                 名称="标签51"
     
236.                 文本="星期"
     
237.                 宽度="匹配内容"
     
238.                 高度="匹配内容"
     
239.                 文本颜色="#FFFFFF"
     
240.                 权重="1"
     
241.                 内容对齐="横向居中">
     
242.             </标签>
     
243.             
     
244.             <图片框
     
245.                 名称="图片框52"
     
246.                 宽度="匹配内容"
     
247.                 高度="匹配内容"
     
248.                 加载图片="rc:baoxue.png"
     
249.                 内容对齐="横向居中"
     
250.                 权重="1"
     
251.                 >
     
252.             </图片框>
     
253.             <标签
     
254.                 名称="标签53"
     
255.                 文本="温度"
     
256.                 内容对齐="横向居中"
     
257.                 宽度="匹配内容"
     
258.                 高度="匹配内容"
     
259.                 文本链接方式="网络"
     
260.                 文本链接地址="http://www.tyuyan.com"
     
261.                 权重="1">
     
262.             </标签>
     
263.             <标签
     
264.                 名称="标签54"
     
265.                 文本="温度"
     
266.                 内容对齐="横向居中"
     
267.                 宽度="匹配内容"
     
268.                 高度="匹配内容"
     
269.                 文本链接方式="网络"
     
270.                 文本链接地址="http://www.tyuyan.com"
     
271.                 权重="1">
     
272.             </标签>
     
273.             
     
274.             <标签
     
275.                 名称="标签55"
     
276.                 文本="天气"
     
277.                 内容对齐="横向居中"
     
278.                 宽度="匹配内容"
     
279.                 高度="匹配内容"
     
280.                 文本链接方式="网络"
     
281.                 文本链接地址="http://www.tyuyan.com"
     
282.                 文本大小="15"
     
283.                 权重="1">
     
284.             </标签>
     
285.             
     
286.         </线性布局>
     
287.         
     
288.     </线性布局>

复制代码

   
   4.设计底部布局（即3的部分）

总结经验：
其中下图上的白色横线用的是线性布局加背景显示出来得，在想显示某个图片时，我们可一用图片框或者线性布局，
两者的区别是：线性布局加背景显示图片，布局有多大图片就会相对应的放大或缩小（单图片比较小而又要放的比较大，就可能比较模糊）；
                   图片框显示时，单图片框宽高大于图片本身的宽高是，图片不会扩大，只会显示本身图片的大小，其他部分会被透明色填充；
  底部线性布局思路划分效果图
               思路划分效果图                               

             部分图
   


底部线性布局的tc代码：

1. 
   
2.     <线性布局
   
3.         宽度="填充"
   
4.         高度="0"
   
5.         排列方向="横向排列"
   
6.         权重="1">
   
7.         <线性布局
   
8.             宽度="匹配内容"
   
9.             高度="填充"
   
10.             排列方向="纵向排列"
    
11.             权重="1">
    
12.             
    
13.             <图片框
    
14.                 名称="图片框53"
    
15.                 宽度="60"
    
16.                 高度="60"
    
17.                 加载图片="rc:ziwaixian.png"
    
18.                 控件对齐="居中"
    
19.                 权重="1"
    
20.                
    
21.                 >
    
22.             </图片框>
    
23.             <标签
    
24.                 名称="标签54"
    
25.                 文本="紫外线"
    
26.                 控件对齐="居中"
    
27.                 宽度="匹配内容"
    
28.                 高度="匹配内容"
    
29.                 文本颜色="#FFFFFF"
    
30.                 权重="1">
    
31.             </标签>
    
32.         </线性布局>   
    
33.         
    
34.         <图片框
    
35.             宽度="匹配内容"
    
36.             高度="填充"
    
37.             加载图片="rc:divider_vertical.png">
    
38.         </图片框>
    
39.         
    
40.         
    
41.         <线性布局
    
42.             宽度="匹配内容"
    
43.             高度="填充"
    
44.             排列方向="纵向排列"
    
45.             权重="1">
    
46.             
    
47.             
    
48.             <图片框
    
49.                 名称="图片框53"
    
50.                 宽度="60"
    
51.                 高度="60"
    
52.                 加载图片="rc:chuanyi.png"
    
53.                 控件对齐="居中"
    
54.                 权重="1"
    
55.                 >
    
56.             </图片框>
    
57.             
    
58.             
    
59.             <标签
    
60.                 名称="标签54"
    
61.                 文本="穿衣"
    
62.                 控件对齐="居中"
    
63.                 宽度="匹配内容"
    
64.                 高度="匹配内容"
    
65.                 文本颜色="#FFFFFF"
    
66.                 权重="1">
    
67.             </标签>
    
68.             
    
69.             
    
70.             
    
71.         </线性布局>
    
72.         
    
73.         <图片框
    
74.             宽度="匹配内容"
    
75.             高度="填充"
    
76.             加载图片="rc:divider_vertical.png">
    
77.         </图片框>        
    
78.         
    
79.         <线性布局
    
80.             宽度="匹配内容"
    
81.             高度="填充"
    
82.             排列方向="纵向排列"
    
83.             
    
84.             权重="1">
    
85.             
    
86.             
    
87.             <图片框
    
88.                 名称="图片框53"
    
89.                 宽度="60"
    
90.                 高度="60"
    
91.                 加载图片="rc:shushi.png"
    
92.                 控件对齐="居中"
    
93.                 权重="1"
    
94.                 >
    
95.             </图片框>
    
96.             
    
97.             
    
98.             <标签
    
99.                 名称="标签54"
    
100.                 文本="舒适度"
     
101.                 控件对齐="居中"
     
102.                 宽度="匹配内容"
     
103.                 高度="匹配内容"
     
104.                 文本颜色="#FFFFFF"
     
105.                 权重="1">
     
106.             </标签>
     
107.             
     
108.             
     
109.             
     
110.         </线性布局>
     
111.         
     
112.         <图片框
     
113.             宽度="匹配内容"
     
114.             高度="填充"
     
115.             加载图片="rc:divider_vertical.png">
     
116.         </图片框>  
     
117.         
     
118.         
     
119.         
     
120.         <线性布局
     
121.             宽度="匹配内容"
     
122.             高度="填充"
     
123.             排列方向="纵向排列"
     
124.             权重="1">
     
125.             
     
126.             
     
127.             <图片框
     
128.                 名称="图片框53"
     
129.                 宽度="60"
     
130.                 高度="60"
     
131.                 加载图片="rc:ganmao.png"
     
132.                 控件对齐="居中"
     
133.                 权重="1"
     
134.                
     
135.                 >
     
136.             </图片框>
     
137.             
     
138.             
     
139.             <标签
     
140.                 名称="标签54"
     
141.                 文本="感冒"
     
142.                 控件对齐="居中"
     
143.                 宽度="匹配内容"
     
144.                 高度="匹配内容"
     
145.                 文本颜色="#FFFFFF"
     
146.                 权重="1">
     
147.             </标签>
     
148.             
     
149.         </线性布局>         
     
150.         
     
151.         
     
152.         
     
153.     </线性布局>

复制代码

5.以下源码下载地址:

天气预报源码
天气预报.rar (782.85 KB, 下载次数: 1385)

2015-4-1 19:20 上传

点击文件名下载附件

chencanhui

看惯安卓的xml布局，突然看这些中文的感觉好不习惯

18856320305

给力。。。。。。。。。。。。

tylong21

掉咋天

美珍子

无敌了。。爽。。。就一个字。。。超爽   二个字。。

26666180

好XX

jimye0526

只想说你略屌

wanghq

顶！！！

jianxitt

好抽象啊

TC

堪比 原生JAVA做出的效果,一定要支持,大家可以多多学习