Android UI布局问题总结

在做新行程项目期间,遇到了很多关于UI布局的问题,这里总结一部分,都是一些小细节,希望能加深理解,以后少走弯路。

一 页面唤起后view创建完成的时间

    Activity的生命周期为下图所示:

    Activity在onCreate中使用setContentView()方法中载入xml布局,那么布局中的view是在何时完成创建的呢?在父布局中添加一个TextView,使用getLeft()、getRight()方法获取TextView在父布局中的左右边界的位置,打印出来可以看到

   

    在onResume方法中获取的位置依然为0,按下home键后,将应用置为后台运行,可以看到

   
    在onPause方法中打印出了位置,所以Activity中view创建完成的时间是在调用OnResume()方法返回之后,在此之前是无法获取view的位置信息的,fragment也是类似的,fragment的生命周期如图:

     

    同样在布局中添加一个TextView,页面启动后打印TextView的位置,可以看到

  

    在OnResume方法中也并没有打印出TextView得位置,按下home键,可以看到

   
    
    打印出了TextView得位置,所以Fragment中view从创建完成到可见也是在OnResume()方法返回之后。那么如何才能知道activity已经完全加载,view已经可见了呢,可以根据OnWindowFocusChange()回调方法来判断。
OnWindowFocusChange()在OnResume()或者OnPause()方法调用完成之后被调用,可以保证activity已经完全加载,如图所示

   

二 复用View时避免之前View的属性的影响   

    在使用RecyclerView,ListView或者GridView时,为了节省内存,android系统将新创建的view直接复用上一个同类型的、当前已不可见的view,以RecyclerView为例,设置RecyclerView的item布局为一个ImageView加一个TextView,在adapter的

OnBindViewHolder()中设置第一个item的字体颜色为红色,代码如下:

@Override
    public void onBindViewHolder(MyViewHolder holder, int position) {
        String url = mUrlList.get(position);
        Picasso.with(mContext).load(url).into(holder.mIvPic);
        holder.mTvText.setText("这是第 " + position + "个");
        if(position == 0){
            holder.mTvText.setTextColor(Color.parseColor("#ff0000"));
        }
    }

运行效果如图所示:
     

咋看起来满足了要求,只有第一个item的字体标红了,但是上下滚动几次,使得别的view能够复用第一个view,可以看到
    
    

别的item也出现了字体被标红的效果,这是由于在view复用的时候,只是对特殊情况进行了处理,并没有对正常情况进行处理,简单来说就是只设置第一个位红色,没有设置非第一个为黑色,没有做到有if就有else,重写onBindViewHolder方法为:

    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {
        String url = mUrlList.get(position);
        Picasso.with(mContext).load(url).into(holder.mIvPic);
        holder.mTvText.setText("这是第 " + position + "个");
        if(position == 0){
            holder.mTvText.setTextColor(Color.parseColor("#ff0000"));
        }else{
            holder.mTvText.setTextColor(Color.parseColor("#000000"));
        }
    }
这样就不会出现非0个view字体标红的情况了,如图:

   

与此类似,当使用RecyclerView、ListView或者GridView时,要注意上一个view对之后view复用的影响,对于特殊属性的处理,要做到有if就要有else,避免属性不同的影响。
三 .9图片的可绘制区域

    Android使用9patch处理图片以保证图片不会随着屏幕尺寸的变化而失真,如图:
    
    

背景图片会随着文字内容的变化动态调整大小而不会失真,在使用.9图片时候需要注意可操作区域的大小,每条边都要设置操作区域,如果设置.9图片的拉伸区域为:

    

那么在尖角上面的区域就是不可操作的区域,如图:

    

文本只存在于下方可操作区域内,上面的空间就无法使用了,正确的设置方法为:

    

保证可编辑区域的大小范围满足要求。

总结

    还有一些小细节,比如RelativeLayout使用wrap_content属性,如果其内部View使用alignParentBottom或者alignParentRight等需要依赖父布局位置时,RelativeLayout就会撑满全屏等,都是一些小细节,陆续还会总结,以便加深记忆,提高效率。

该文章来自于阿里巴巴技术协会(ATA)

作者:萧锁

时间: 2025-01-27 00:43:08

Android UI布局问题总结的相关文章

Android中使用GridView进行应用程序UI布局的教程_Android

0.简介GridView 和 ListView 有共同的父类:AbsListView,因此 GridView 和 ListView 具有一定 的相似性.GridView与ListView的主要区别在于:ListView只是在一个方向上分布:而 GridView则会在两个方向上分布. 与ListView类似的是,GridView也需要通过Adapter来提供显示的数据:开发者既可通 过SimpleAdapter来为GridView提供数据,也可通过开发 BaseAdaptei的子类来为GridVi

linearlayout-android UI布局中layout_weight的问题,请高人指教

问题描述 android UI布局中layout_weight的问题,请高人指教 当我把占比例0.45的LinearLayout的visibility 设置为gone后,占比例为0.55的linearlayout就会占满全屏,请高人指教. <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/re

Android UI基本测验:线性布局

你已经阅读过了如何在Android使用线性布局.用这些包括线性布局控件的渐进测验来测试你的新知识,并且巩固你Java编程和Androidhttp://www.aliyun.com/zixun/aggregation/7236.html">用户界面设计与开发的知识. 准备 为了准备这个测验,你希望以一个基本的Android程序开始.你只需要在Eclipse中创建一个Android程序然后编辑它的默认活动(Activity),特别是onCreate()方法,就可以测试你为本次测验写的代码了.

android主流UI布局

http://www.cnblogs.com/xzuo/archive/2011/11/11/2245546.html Android UI设计技巧 http://www.cnblogs.com/playing/archive/2011/05/17/2048287.html

Android UI 优化——使用HierarchyViewer工具

    进入正题,我们这一篇文章会提到为什么使用HierarchyViewer,怎么使用HierarchyViewer,后者内容会多一下. 为什么使用HierarchyViewer     不合理的布局会使我们的应用程序UI性能变慢,HierarchyViewer能够可视化的角度直观地获得UI布局设计结构和各种属性的信息,帮助我们优化布局设计.HierarchyViewer是我们优化程序的工具之一,它是Android自带的非常有用的工具,可以帮助我们更好地检视和设计用户界面(UI),绝对是UI检

谷歌Android UI设计技巧:框架特性

本系列文章原是Android的官方开发者博客的一份Android UI设计的幻灯片,51CTO的译者将这份教程5部分进行翻译整理,希望对Android开发者能有帮助.本文为<谷歌Android UI设计技巧>第三部分:框架特性. 本文为<谷歌Android UI设计技巧>第三部分:框架特性. 注:相对布局和线性布局是Android里面常用的两种布局,线性布局比较简单,而相对布局可以做出比较复杂的布局管理,所以仅仅了解线性布局,很多时候是不够的.不过以作者之前Qt的经验来看,Andr

Android UI实现多行文本折叠展开效果_Android

上文介绍了单行文本水平触摸滑动效果,通过EditText实现TextView单行长文本水平滑动效果. 本文继续介绍了多行文本折叠展开,自定义布局View实现多行文本折叠和展开 1.概述 经常在APP中能看到有引用文章或大段博文的内容,他们的展示样式也有点儿意思,默认是折叠的,当你点击文章之后它会自动展开.再次点击他又会缩回去. 网上有找到部分效果,感觉不是很满意.最后自己尝试用 自定义布局layout 写了个demo.比较简陋,不过可以用了.有这方面需求的朋友可以稍加改造下.如有更好的创意,也不

【Android UI设计与开发】第08期:底部菜单栏(三)Fragment+FragmentTabHost实现仿新浪微博底部菜单栏

    PS:这是转载CSDN作者yangyu20121224的文章,真的非常不错.它主要讲述如何通过Fragment碎片实现点击TabHost切换页面.可惜作者很长时间没有更新了,他写的那系列文章都很实用.以后在做Android布局时会用到该篇文章内容,所以转载作为在线笔记.希望对大家也有所帮助吧!    转载源地址:http://blog.csdn.net/yangyu20121224/article/details/9016223     在上一篇文章中,我们花了大量的篇幅来讲解Fragm

Android UI”设计官方教程

我们曾经给大家一个<MeeGo移动终端设备开发UI设计基础教程>,同时很多朋友都在寻找Android UI开发的教程,我们从Android的官方开发者博客找了一份幻灯片,介绍了一些Android UI设计,我们把这个教程整理出来,希望大家喜欢. 想了解全部Android UI教程内容请点击51CTO独家专题:谷歌官方教程:Android UI设计技巧 作为开发者,为啥我们要关心UI,前面的一堆通通可以忽略掉,直接跳到最后一条.因为好的UI设计可以帮助我们卖出更多拷贝,赚到更多钱. 简介 这个教