Android应用性能优化系列视图篇——恼人的分割线留白解决之道

最新推荐文章于 2024-07-06 19:21:24 发布

MegatronKing

最新推荐文章于 2024-07-06 19:21:24 发布

阅读量1.8w

点赞数 20

分类专栏： Android性能优化文章标签： android 性能优化

本文链接：https://blog.youkuaiyun.com/MegatronKings/article/details/52156312

版权

相信很多一线的开发者都遇到过分割线，作为视觉设计中的最常用的元素之一，虽然简单易画，但在布局排版中往往却起影响视图层级结构的重要作用。往往由于一道小小的分割线，不仅在layout中多个数个视图，而且容易导致布局层级的加深，甚至还需要在Java代码中做逻辑控制。

虽然Android官方提供的布局中，比如ListView、LinearLayout等对分割线都有了相应的实现，但是在处理分割线留白这种设计时常常有心无力。而在越来越多的APP中，分割线留白已经成为了一种设计趋势，所以，如何简单高效地实现分割线成为了一个值得研究的命题。

1、ListView的分割线

首先，ListView是自带分割线属性的（而GridView并没有，不知道android官方咋想的），一共有四个相关的属性，divider、dividerHeight、headerDividersEnabled、footerDividersEnabled。支持定义分割线的颜色和高度等，非常实用的属性，但在实际开发中设计师却不喜欢按照常理出牌。

比如下面这些列表类型的设计图，设计师最喜欢这种左侧留白右侧通栏或者两侧留白的设计方式。

这里写图片描述

而官方的分割线则是左右通栏，开发者遇到这种问题，大概是有三种常规的解决方案。

方案1：ListView设置左右margin或者padding

这种方式虽然能够达到分割线留白的效果，但是有一定的局限性，分割线左侧并不总是被设计成和内容对齐。同时，缺陷很明显，给ListView设置了左右margin或者padding，会导致Item点击的按压背景也被留白（效果如下图）。当然，如果不在意这些细节，那也无可厚非。

这里写图片描述

缺陷：按压效果有瑕疵，另外如果分割线不与内容上下对齐，这种方式无效

方案2：给每个Item设置带有分割线留白的背景图

这是较为常用的方案之一，分割线正常显示，按压效果正常显示。看似很完美，但是不得不面对一个较大的问题，由于最后一个Item不显示分割线，所以需要在Java代码中控制，比如这样：

  @Override
  public View getView(int position, View convertView, ViewGroup parent) {
      ....

      if (position == getCount() - 1) {
          convertView.setBackground(null);
      } else {
          convertView.setBackgroundResource(R.drawable.bg_line);
      }
      return convertView;
  }

在Java代码中控制视图样式，无论如何都是一个相当不合理的选择。

其次，这种方式不支持footer和header的分割线，footerDividersEnabled和headerDividersEnabled两个属性就无法使用了。

接着，既然使用带有分割线的图片做背景，那么，如果页面设计修改，参数调整，就需要重新切图，所以维护起来相当吃力。

最后，为了一条分割线而给整个Item视图设置背景，基本可以认为是出现了过度绘制的情况。

缺陷：代码控制视图、footerDividersEnabled和headerDividersEnabled无用、留白距离难以维护，过度绘制

方案3：在Item中添加一个View设置高度背景作为分割线

<View
     android:layout_width="match_parent"
     a

最低0.47元/天解锁文章