TC官方合作论坛

标题: TC5.0android 精美界面设计教程 [打印本页]
作者: 630674852    时间: 2015-4-1 19:30
标题: TC5.0android 精美界面设计教程
本帖最后由 630674852 于 2015-4-1 19:46 编辑

   一个好的程序，除了强大的功能以外，还要有一个能吸引别人眼球的界面。那么，如何开发出这些界面。 下面讲解一下，模仿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代码：

  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代码：

  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)








作者: yfsoft    时间: 2015-4-1 19:35
感谢分享,
作者: TC    时间: 2015-4-1 19:45
堪比 原生JAVA做出的效果,一定要支持,大家可以多多学习
作者: jianxitt    时间: 2015-4-1 19:47
好抽象啊
作者: wanghq    时间: 2015-4-1 20:52
顶！！！
作者: jimye0526    时间: 2015-4-1 21:08
只想说你略屌
作者: 26666180    时间: 2015-4-1 23:31
好XX
作者: 美珍子    时间: 2015-4-2 23:18
无敌了。。爽。。。就一个字。。。超爽   二个字。。
作者: tylong21    时间: 2015-4-8 21:44
掉咋天
作者: 18856320305    时间: 2015-6-6 11:28
给力。。。。。。。。。。。。
作者: chencanhui    时间: 2015-9-15 11:16
看惯安卓的xml布局，突然看这些中文的感觉好不习惯



欢迎光临 TC官方合作论坛 (http://bbs.52tc.co/) Powered by Discuz! X3.1