2019上半年项目中的自定义View

一 ParagraphLayoutViewGroup  段落式布局ViewGroup

1.1 主要功能：

主要实现子View的整段换行，当某个子View在当前行剩余的空间无法展示下时会整体换到下一行展示，避免自身内容跨行展示。

该View可以设置最大展示行数，如果某些子View在设置的最大行数内没有剩余的空间供其展示，则这些子View将不会展示出来。整个“ParagraphLayoutViewGroup  ”只会展示最大行数内能展示的下的子view

 

1.2 可设参数：

     2.1: setMaxLine   设置最大可展示行数，默认不限制行数个数

     2.2: setHorizionMargin  设置每个子View的水平间距

     2.3: setHorizonAlignType 设置子View的布局时在水平方向对齐方式(left-左对其,right-右对齐), 默认是left

     2.4: setAlignType  设置同一行的子View在垂直方向的对其方式(top, verticalCenter, bottom) 默认是bottom

 

1.4 使用注意点：

  4.1 注意子View的布局属性，一般其宽度不要超过“ParagraphLayoutViewGroup ”能展示的最大宽度，否则此View肯定不会展示。

  4.2 子View的宽度可以是定值也可以是wrapContent的自适应，当然是在考虑4.1的注意点的基础上。请不要用matchParent，会侵占后面子View的空间，达不到整段换行的效果，把后面在同一行可能放下的子View直接挤到下一行去了。

  4.3 作为在ListView这种复用的Item的控件中使用时，注意自己做子View的复用，提高性能，类似可以参考“3.1”中给出的” bindServiceIndexInfo”的用法，后续会考虑把这个做成一种自动的方式。

 

二 几种图像效果的实现

2.1 圆形图片:

      有时候UED要求我们把图片以圆形的形式展示，公共也提供了一个控件给我们“CircleImageView”，不过这个控件在我们工程里无法直接用公共的ImageLoader搭配使用，因为公共的ImageLoader是桥接的Fresco，Fresco的展示对象是一个Drawable的图层，而公共的这个控件在实现圆形图片时是直接在“onDraw”处理的，此时并不能改变图层的效果，因此没法搭配使用。

     我们可以直接使用Fresco实现圆形图片，注意这个地方我们要使用Fresco帮我们封装的SimpleDraweeView。

     原理：利用Fresco帮我们提供的“RoundAsCirclePostprocessor”图片后处理器。

示例代码如下，：

private void displayCircleImage(String url, SimpleDraweeView mirrorImageView) {

   if (mirrorImageView == null ||

       StringUtil.emptyOrNull(url)) {

      return;

   }

 

   ImageRequest imageRequest = createImageRequest(url);

   DraweeController draweeController = Fresco.newDraweeControllerBuilder()

        .setOldController(mirrorImageView.getController())

        .setImageRequest(imageRequest)

        .build();

 

   mirrorImageView.setController(draweeController);

}

 

private ImageRequest createImageRequest(String url) {

   int width = DeviceUtil.getPixelFromDip(40);

   int height = DeviceUtil.getPixelFromDip(40);

 

   if (mRoundAsCirclePostprocessor == null) {

      mRoundAsCirclePostprocessor = new RoundAsCirclePostprocessor();

   }

 

   ResizeOptions resizeOptions = new ResizeOptions(width, height);

   ImageRequestBuilder imageRequestBuilder = ImageRequestBuilder

           .newBuilderWithSource(Uri.parse(url))

           .setAutoRotateEnabled(false)

           .setPostprocessor(mRoundAsCirclePostprocessor)

           .setResizeOptions(resizeOptions)

           .setFromRN(false);

 

   return imageRequestBuilder.build();

}

 

2.2 镜像图片，高斯模糊图片，镜像高斯模糊等效果

   原理跟2.1是类似的只不过后处理器换成如下了几个处理器。

    镜像图片-------- MirrorPostprocessor

高斯模糊-------- BlurPostprocessor

高斯+镜像-------- MirrorBlurPostprocessor

 

注意点：高斯模糊的后处理可能比较耗时，因此对某张比较大的图片（比如详情页头部的大图）第一次做处理时其处理时间可能会比较长，展示出这张图片会有延迟感，这其实对用户体验不是很好。此时我们可以稍微优化一下，因为高斯图片模糊的特殊性，我们可以对图片的分辨率进行一些压缩，因为高斯出来的图片本来也是模糊的，这样处理对用户的体验性影响也不大，但是可以大大减少图片出来的时延

 private BlurPostprocessor mBlurPostprocessor;

 private ImageRequest createImageRequest(String url) {

    int width = 1080;

    int height = 720;

 

    if (Application.getInstance() != null &&

        Utils.getAdaptScreenWidth() > 0 &&

        Utils.getAdaptScreenHeight() > 0) {

        width = Utils.getAdaptScreenWidth();

        height = Utils.getAdaptScreenHeight();

    }

 

    if (mBlurPostprocessor == null) {

       mBlurPostprocessor = new BlurPostprocessor(20, 5);

    }

 

ResizeOptions resizeOptions = new ResizeOptions(width / 8, height / 8);

//这个地方我们可以看到压缩了请求图片的分辨率为八分之一来加快变换速度

    ImageRequestBuilder imageRequestBuilder = ImageRequestBuilder

           .newBuilderWithSource(Uri.parse(url))

           .setAutoRotateEnabled(false)

           .setPostprocessor(mBlurPostprocessor)

           .setResizeOptions(resizeOptions)

           .setFromRN(false);

 

    return imageRequestBuilder.build();

}

 

 

三 StairsView 二楼控件

3.1 主要功能：可以让用户从当前页面下拉出一个二楼页面，类似天猫的首页，可以下拉一个新页面。

 

3.2 可设参数

      3.2.1：setDownStairsView 设置一楼的View

 

      3.2.2： setUpStairsView 设置二楼的View

 

      3.2.3: isEnableUnfoldUpstairs 是否enable展开二楼功能

 

      3.2.4: 如下一些状态回调接口

                     public interface StairsViewStateListener {

                      void onFoldUpstairsDoneEvent(); //二楼全部收起

 

                      void onUnFoldUpstairsStartEvent(); //二楼全部展开process开始

 

                      void onUnFoldUpstairsDoneEvent(); //二楼全部展开process结束

 

                      void onPullDownOffset(int offset, int totalOffset);

 

                      void onUnfoldUpstairsAnimation(final int offset);

}

 

四 ImageLoopShowView 图片循环轮播控件

4.1 主要功能：

将一组图片循环轮播，效果是前一张图片渐渐变透明，后一张图片渐渐显现出来

4.2 可设参数:

   4.2.1 public void start(final List<String> urlList)

启动播放

   4.2.2 public void setIsPause(final boolean isPause)

控制播放是否暂时还是恢复播放

 

4.3 效果示例

  

 

五 EqualWidthImageContainerView

5.1 主要功能：

在EqualWidthImageContainerView显示的宽度下，将图片按一行等分宽度在其内部展示。

 

5.2 可设参数:

5.2.1: public void setDataList(final List<String> urlList, final List<String> titleList) 设置要展示的图片参数

 

5.3 效果

  

 

六 PageIndicateView

6.1 页数指示图标，通过圆圈小图标提示用户总共有多少页，当前浏览到了第几个。

 

6.2 可设参数:

6.2.1 public void setCurrentIndex(int currentIndex, final int num)

    设置当前页数和总页数

 

6.3 效果 下图中灰色框框中的控件