Android UI布局经验总结

简介:

Android布局分析工具HierarchyView

  http://www.2cto.com/kf/201404/296960.html


布局优化
  http://www.infoq.com/cn/articles/android-optimise-layout


Android使用include/merge/ViewStub优化布局

  http://www.111cn.net/sj/android/87027.htm  


List的item布局、Dialog的自定义布局的宽高设置是无效的,要用minXXX来指定宽高。


1.  画UI的原则

   能简则简,能用一个控件搞定的事情,不要用多个控件。

   能抽则抽,可以抽取复用的属性或布局就抽取.  

   style:抽属性      include:抽布局(如果想让include布局指定位置,就得给include套一个布局)

  

        Android主题切换方案总结 

         http://blog.csdn.net/xingfeng2010/article/details/22854977

   

2.  资源

    在android项目里,资源放在res文件夹下,资源可以是图片、xml等,不同类型的资源放在不同

  的文件下,如下图所示

    wKiom1XFPyvD-Hm-AAFACGdoPp4287.jpg   

    很多人都不知道的东西:values下的dimens.xml,strings.xml,styles.xml,attr.xml文件,其实

  名字可以自己定义,而且完全可以写在一个xml文件里,可以发现每个xml的根标签都是resources,只是

  为了便于管理和阅读,分成不同的xml文件。

       

   XML中引用资源

          @[android:]anim/ 

          @[android:]drawable/ 

          @[android:]layout/

          @[android:]menu/

          @[android:]layout/ 

          @[android:]menu/   

          @[android:]style/

            @[android:]string/ 

          @[android:]color/  

   如果加上android:表示调用系统的资源,系统本身就带了一些十分常用的、丰富的资源(包括图片

   布局、动画等),对于一些demo演示,可以直接调用系统的资源以节省时间。

  代码中引用资源

          Drawable drawable = getResources().getDrawable(R.drawable.ic_launcher);

          InputStream in = getAssets().open("11.txt"); 


  关于Android 获得图片的总结   http://www.oschina.net/code/snippet_4873_4437

   2-1  自定义图形资源(发挥想象)

      ⑴shape标签:利用这个标签可以绘制基本的图形,如矩形、圆形、环形、直线

          wKiom1XdxYfggAjuAAISjbIeNUc563.jpg      案例1:横幅广告切换圆点

          

1
2
3
4
5
6
7
         <?xml version= "1.0"  encoding= "utf-8" ?>        
         <shape xmlns:android= "http://schemas.android.com/apk/res/android" 
             android:shape= "oval"
             >
             <solid android:color= "#E34F1B"  />
             <size android:width= "6dp"  android:height= "6dp" />
         </shape>

         效果如右图所示  wKiom1XdxmzwMiA-AAAf6v1aZhs515.jpg   


      案例2:自定义环形滚动条   

        

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
         <?xml version= "1.0"  encoding= "utf-8" ?>
         <!-- 里面的旋转动画属性可写可不写。 -->
         <rotate xmlns:android= "http://schemas.android.com/apk/res/android"  >
             <shape
                 android:innerRadiusRatio= "3"   //内半径比  
                 android:shape= "ring"
                 android:thicknessRatio= "10"
                 android:useLevel= "false"  >
                 <gradient
                     android:centerColor= "#E04343"
                     android:endColor= "#33FEDCC4"
                     android:startColor= "#33F0F0F0"
                     android:type= "sweep"  />
             </shape>
         
         </rotate>

       

         效果如右图所示

            wKioL1Xdzv_g0s88AAFtPJQ-8pM113.jpg

 


         几个参数需要理解一下:

         ◆ innerRadiusRatio :内半径比   =  圆的内半径 / 控件的宽度,一般取3.

              wKiom1Xd0aTDbCleAACuLwL_dL8708.jpg

         ◆ thicknessRatio :厚度比   =  圆的厚度 / 控件的宽度

              wKiom1Xd09rCGarcAAByoqZe6Lc519.jpg   

        

        

        案例3:圆角矩形   

            经常用来作为背景使用

1
2
3
4
5
6
7
8
9
     <? xml  version = "1.0"  encoding = "utf-8" ?>    
     <!-- 圆角矩形 -->
     < shape  xmlns:android = "http://schemas.android.com/apk/res/android" 
         android:shape = "rectangle"
         >
         < solid  android:color = "#66968778"  />
         < corners  android:radius = "5dp" />
          
     </ shape >


    补充扩展:http://kofi1122.blog.51cto.com/2815761/521605   介绍了shape子标签

              

3.  状态选择器selector

  作用:管理资源(图片、颜色),根据控件所处的状态显示资源。

  应用场景:如在textview点击的时候,变换颜色或背景,可以让用户知道有没有点击上。

  定义步骤:

    1)在res/drawable目录下创建xml文件,选择selector标签。

      wKioL1XFNGihzyqCAAGjyxNLvcI739.jpg

      点击finish,会自动生成如下xml文件:

      wKiom1XFMtrDs62dAAC8FdZs1eo263.jpg

    2)定义item标签,表示不同状态下选择器指向的资源。

      ■item既可以指向drawable资源,也可以指向color资源(不能直接写颜色值,要定义在

       color标签里,transparent除外)。

      ■item的状态有很多,有的是短暂的、临时的状态(如pressed等),有的是永久的状态

        (如enabled、selected等)。

      ■一个xml文件里可以有多个item,但是默认的item(没有指明状态的)一定要放到最后

       (千万记住了)

       ■xml中各个item的资源可以保持一致,要么都是drawable,要么都是color,也可以即是

       drawable又是color,只要绑定这个选择器的属性同时支持图片和颜色,如background。

      示例1:指向color资源的选择器

        

         wKioL1XFN1GDlSvAAACsYrKfs_8814.jpg

      示例2:指向drawable资源的选择器  

wKioL1XFO1DA7dKOAACNAHCVcJY430.jpg


4. 自定义进度条样式

  还是使用系统自带的水平进度条样式

     style="@android:style/Widget.ProgressBar.Horizontal" 

  但是在它的基础上要修改一下它的样式

  wKioL1Zo_WKyuBVtAAH5Nj5kmlI585.png 

  其实,举一反三,系统任何的组件,都可以自定义它的样式。

   

Inflate:

 1)inflate的parent不为null,view会自动添加到parent中。

 final ViewGroup newView = (ViewGroup) LayoutInflater.from(this).inflate(

                R.layout.list_item_example, mContainerView, false);

          






      本文转自屠夫章哥  51CTO博客,原文链接:http://blog.51cto.com/4259297/1682845,如需转载请自行联系原作者



相关文章
|
6月前
|
开发者 容器
44.[HarmonyOS NEXT RelativeContainer案例一] 掌握组件锚点布局:打造灵活精准的UI定位系统
在HarmonyOS NEXT的UI开发中,精确控制组件位置是构建复杂界面的关键。RelativeContainer作为一种强大的布局容器,通过锚点系统提供了精确定位能力,使开发者能够创建出灵活且精准的UI布局。本教程将详细讲解如何使用RelativeContainer的锚点布局功能,帮助你掌握这一核心技术。
208 4
|
3月前
|
存储 消息中间件 人工智能
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
116 11
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
|
3月前
|
XML 存储 Java
【06】AI辅助编程完整的安卓二次商业实战-背景布局变更增加背景-二开发现页面跳转逻辑-替换剩余图标-优雅草卓伊凡
【06】AI辅助编程完整的安卓二次商业实战-背景布局变更增加背景-二开发现页面跳转逻辑-替换剩余图标-优雅草卓伊凡
109 3
【06】AI辅助编程完整的安卓二次商业实战-背景布局变更增加背景-二开发现页面跳转逻辑-替换剩余图标-优雅草卓伊凡
|
3月前
|
存储 消息中间件 人工智能
【04】AI辅助编程完整的安卓二次商业实战-寻找修改替换新UI首页图标-菜单图标-消息列表图标-优雅草伊凡
【04】AI辅助编程完整的安卓二次商业实战-寻找修改替换新UI首页图标-菜单图标-消息列表图标-优雅草伊凡
143 4
|
6月前
|
编解码 UED 开发者
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发之常见布局
本文主要介绍了自适应布局与响应式布局的相关内容。自适应布局部分涵盖线性布局、层叠布局、弹性布局和网格布局,详细说明了各布局的特性及使用方法,例如线性布局中的排列、拉伸与缩放,弹性布局的方向、换行与对齐方式等。响应式布局则重点讲解了栅格系统和媒体查询,阐述如何通过栅格组件和媒体查询条件实现不同设备上的适配效果。这些技术帮助开发者灵活应对多尺寸屏幕的设计需求,提升用户体验。
342 55
|
6月前
|
定位技术 容器
48.[HarmonyOS NEXT RelativeContainer案例五] 精确表单布局:辅助线定位技术打造专业级UI
在HarmonyOS NEXT的UI开发中,表单是常见且重要的界面元素。创建对齐精确、布局合理的表单需要精细的定位控制。RelativeContainer提供的辅助线(Guideline)功能,为表单布局提供了强大的支持。本教程将详细讲解如何使用RelativeContainer的辅助线功能实现精确的表单布局,帮助你掌握这一专业级UI技术。
177 7
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
|
12月前
|
UED
「Mac畅玩鸿蒙与硬件40」UI互动应用篇17 - 照片墙布局
本篇将带你实现一个简单的照片墙布局应用,通过展示多张图片组成照片墙效果,用户可以点击图片查看其状态变化。
362 67
「Mac畅玩鸿蒙与硬件40」UI互动应用篇17 - 照片墙布局
|
ARouter Android开发
Android不同module布局文件重名被覆盖
Android不同module布局文件重名被覆盖
|
XML 搜索推荐 前端开发
安卓开发中的自定义视图:打造个性化UI组件
在安卓应用开发中,自定义视图是一种强大的工具,它允许开发者创造独一无二的用户界面元素,从而提升应用的外观和用户体验。本文将通过一个简单的自定义视图示例,引导你了解如何在安卓项目中实现自定义组件,并探讨其背后的技术原理。我们将从基础的View类讲起,逐步深入到绘图、事件处理以及性能优化等方面。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的见解和技巧。