动态生成分享图片

写在最前

本文描述了如何实现该需求的思路,代码可能不通用,但是该思路应该可以解决很多类似的需求…

需要分享的内容

  • 上半部分,1-4张图片
  • 下半部分,包含很多细小的东西,签名、用户名、用户头像、二维码图片…
  • ​…

实现原理

因为我的需要还是比较复杂的(主要来自于上半部分的排列规则),所以直接 extends 了 ViewGroup 来 layout 这些子 View,然后用数据填充这些布局,然后创建分享 Bitmap。

对 ViewGroup 里的元素做一个抽象

对自定义View(我们就叫它 DynamicShareView 好了),它关心的是如何拿到上半部分的 View下半部分的 View,所以这里定义一个 Adapter 接口:

public interface Adapter {

  /**
   * 获取封面个数
   */
  int getCoverCount();

  /**
   * 获取封面 View
   */
  View getImage(ViewGroup viewGroup, int position);

  /**
   * 获取底部 View
   */
  View getBottom(ViewGroup viewGroup);
}

对调用者来说,我们只需要调用 DynamicShareView 实例的 setAdapter 方法,然后将一个实现了 Adapter 接口的对象传给它,接着 DynamicShareView 会将这些 View 挨个添加到进来,如下:

public void setAdapter(@NonNull Adapter adapter) {

   mAdapter = adapter;

   removeAllViews(); // 移除所有子View

   // 添加图片
   int imageCount = Math.min(mAdapter.getCoverCount(), MAX_COUNT);
   for (int index = 0; index < imageCount; index++) {

     View image = mAdapter.getImage(this, index);
     addView(image);
     mImages.add(image);
   }

   // 添加底部
   View bottomLayout = mAdapter.getBottom(this);
   mBottomLayout = bottomLayout;
   addView(bottomLayout, new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
 }

这步完成之后,才是重头戏,我们需要自己来 measure 内部的子 View,计算出 DynamicShareView 的宽高。

测量高度&布局

这里的实现,emmmmmmmmm,复杂度和产品的需求成正比。栗如,我这里的复杂度主要来自上半部分的排列规则:

1.一张封面时,封面的宽高等于屏幕的宽度

2.两张封面时,封面的宽度等于屏幕的宽度,高度为屏幕宽度的一半,上下排列

3.三张封面时,封面的高度等于屏幕宽度的一半,前两张图片占一行,均分;第三张图片独占一行

4.// 省略…

怎么破,这里,我定义了一个 Rule 接口:

public interface Rule {

  void measureChildren(int screenWidth, int screenHeight, int spacing, View... children);

  void layoutChildren(int screenWidth, int screenHeight, int spacing, View... children);
}

然后定义5个子类来测量布局,如下图:

Rule1Impl 对应只有 1 个封面的情况,Rule2Impl 对应有 2 个封面的情况,以此类推。BottomRule 负责下半部分子 View测量和布局。当然,如果你喜欢,也可以写成一坨代码来 work。我们先来看下,onMeasure 方法长咋样吧。

onMeasure 步骤

@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
   super.onMeasure(widthMeasureSpec, heightMeasureSpec);

   int widthSize = MeasureSpec.getSize(widthMeasureSpec);

   int heightSize = MeasureSpec.getSize(heightMeasureSpec);
   int heightMode = MeasureSpec.getMode(heightMeasureSpec);

   mActualWidth = widthSize; // 宽度等于屏幕宽度

   switch (mImages.size()) {

     case 1:
       mRule1.measureChildren(mActualWidth, mActualHeight, mSpacing, mImages.get(0));
       break;

     case 2:
       mRule2.measureChildren(mActualWidth, mActualHeight, mSpacing, mImages.get(0),
           mImages.get(1));
       break;

     case 3:
       mRule3.measureChildren(mActualWidth, mActualHeight, mSpacing, mImages.get(0),
           mImages.get(1), mImages.get(2));
       break;

     case 4:
       mRule4.measureChildren(mActualWidth, mActualHeight, mSpacing, mImages.get(0),
           mImages.get(1), mImages.get(2), mImages.get(3));
       break;
   }

   // 测量底部高度
   mBottomRule.measureChildren(mActualWidth, mActualHeight, mSpacing, mBottomLayout);

   // 获得实际高度
   mActualHeight = mActualWidth + mBottomLayout.getMeasuredHeight();

   // 设置 ViewGroup 尺寸
   setMeasuredDimension(mActualWidth,
       heightMode == MeasureSpec.EXACTLY ? heightSize : mActualHeight);
 }

layout 步骤

@Override protected void onLayout(boolean changed, int l, int t, int r, int b) {

    if (mImages == null || mImages.isEmpty()) return;

    switch (mImages.size()) {

      case 1:
        mRule1.layoutChildren(mActualWidth, mActualHeight, mSpacing, mImages.get(0));
        break;

      case 2:
        mRule2.layoutChildren(mActualWidth, mActualHeight, mSpacing, mImages.get(0),
            mImages.get(1));
        break;

      case 3:
        mRule3.layoutChildren(mActualWidth, mActualHeight, mSpacing, mImages.get(0), mImages.get(1),
            mImages.get(2));
        break;

      case 4:
        mRule4.layoutChildren(mActualWidth, mActualHeight, mSpacing, mImages.get(0), mImages.get(1),
            mImages.get(2), mImages.get(3));
        break;
    }

    mBottomRule.layoutChildren(mActualWidth, mActualHeight, mSpacing, mBottomLayout);
  }

看上去是不是很干净呢23333!

静态 View 的布局&测量

这里和上半部分不同,不需要根据业务动态排列子 View,所以使用一个 xxxx.xml 来布局,如图:

NOTE:这里的根布局,没有写 layout_height=match_parent,因为下半部分的高度实际上应由内部的子 View 高度来决定!这也就是说,我们进行下半部分测量的时候,我们需要自己计算下半部分的高度到底是多少,这样,才能得到 DynamicShareView 的高度数值!那么问题来了,如何测量 layout_heigh=wrap_contentView的高度呢?看代码:

public class BottomRule extends AbsRule {
  public BottomRule(Context context) {
    super(context);
  }

  @Override
  public void measureChildren(int screenWidth, int screenHeight, int spacing, View... children) {
    measureManually2(children[0], screenWidth);
  }

  @Override
  public void layoutChildren(int screenWidth, int screenHeight, int spacing, View... children) {
    children[0].layout(0, screenWidth, screenWidth, screenHeight);
  }
}

public abstract class AbsRule implements Rule {

  private Context mContext;

  public AbsRule(@NonNull Context context) {
    mContext = context;
  }

  protected void measureManually2(View target, int widthSize) {

    int widthMeasureSpec = View.MeasureSpec.makeMeasureSpec(widthSize, View.MeasureSpec.EXACTLY);
    int heightMeasureSpec =
        View.MeasureSpec.makeMeasureSpec((1 << 30) - 1, View.MeasureSpec.AT_MOST);
    target.measure(widthMeasureSpec, heightMeasureSpec);
  }
}

看到 measureManually2 这个方法,我想机智的童鞋已经豁然开朗了。至于为什么可以用这种方式测量出 layout_width=wrap_contentView 的高度,答案在 《Android开发艺术探索》一书中的 自定义View 一章。

implements Adapter 的坑

上面讲过只要实现 Adapter 这个接口就可以了,然而实际上,能否成功生成图片的关键也在这里,稍微不注意,就会陷入异步问题的深坑中。

如何加载图片呢

主流方案一般是用 Picasso、Glide 这样的图片加载库,这里,我使用的是 Glide。那直接 Glide.with().load().into ... 不就万事大吉了嘛!nonono,不是这样滴,因为 Glide 加载图片的过程是异步的,也就是说 ImageView 可能已经全部添加到 DynamicShareView 了,onMeasure、layout 的步骤也完成了,但图片还未从网络、磁盘加载完,ImageView 里的 Bitmap 是不存在的 。这时,我们再这么做:

public void share(View target) {

	// 测量 DynamicShareView 的大小
   measureManually(target, ScreenUtil.getScreenWidth(mContext),
       ScreenUtil.getScreenWidth(mContext) + DensityUtil.dip2px(mContext, 175.0F));
// 布局 DynamicShareView
   target.layout(0, 0, target.getMeasuredWidth(), target.getMeasuredHeight());
   //  生成 Bitmap
   Bitmap bitmap = generateBitmap(target, target.getMeasuredWidth(), target.getMeasuredHeight());

   //  将 Bitmap 保存为临时文件
   try {
     saveBitmap(bitmap);
   } catch (FileNotFoundException e) {
     e.printStackTrace();
   } catch (IOException e) {
     e.printStackTrace();
   }

   mContext.startActivity(createShareIntent());
 }

生成的 Bitmap 很可能是没有图片的。因为这些图片都是需要 Glide远程图片服务器加载,解析后才能得到的。而我们并不知道加载这些图片需要多久,甚至都没有等待这些加载工作完成,就直接填充数据到 DynamicShareView 上,然后满怀期待地生成 Bitmap 了…

解决方案

简单来说,就是在知道图片全部加载完成之后,我们再生成最后的分享图,关键就是等!

这里我使用了一个计数器,每当 Glide 加载完成,拿到 Bitmap 后,我就让计数器+1,当计数器等于需要加载的图片个数时,回调。如下:

Glide.with(viewGroup.getContext())
          .load(mImages.get(position).getImageUrl())
          .asBitmap()
          .into(new SimpleTarget<Bitmap>() {
            @Override public void onResourceReady(Bitmap resource,
                GlideAnimation<? super Bitmap> glideAnimation) {

              ivCover.setImageBitmap(resource);
              mloadImageCount++;
              if (mloadImageCount == getCoverCount() + 1) {
                mOnImageLoadedListener.onImageLoaded();
              }
            }
          });

外部构造 Adapter 实例时,传入一个 OnImageLoadedListener 即可。

// MyAdapter 的签名
public MyAdapter(@NonNull Context context, List<Image> images, @NonNull Bottom bottom,
      @NonNull OnImageLoadedListener onImageLoadedListener) {
      
 }

优化&思考

  • Bitmap 的生成其实是一个耗时的操作,能否搬移到工作线程中
  • 有没有比计数器更好的实现来解决异步问题
  • 该实现有没有 leak memory 的风险
  • 如果下半部分的文字内容很长,是否会导致 OOM

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android-薛之涛

Android-Fragment

我们在创建Fragment的管理器的时候,会选择导入那个包下的FragmentManager.有app包下和v4包下的,这里我推荐用v4包的FragmentMa...

26130
来自专栏梦里茶室

Activity四种launchMode

总共有四篇关于Activity,task,launchMode的文章,可以在我的博客中查看,或者在文章底部点下一篇。 1.Standard 默认模式,多次实例化...

20390
来自专栏向治洪

检查app的activity是否在当前

APP开发中经常会遇到这种需求,需要检查当前的APP是不是可见的,比如,如果是可见的就维持一个socket长连接,如果切到后台不可见了,就断开这个连接。And...

21190
来自专栏Android干货

Fragment问题集

36070
来自专栏世界第一语言是java

Android全能开源项目xUtils3开发教程、简单封装

24640
来自专栏三流程序员的挣扎

Navigation 详解一

Navigation 是 JetPack 中的一个组件,用于方便的实现页面的导航,所以抽象出了一个 destination 的概念,大部分情况一个 destin...

23710
来自专栏天天P图攻城狮

Android基础:Fragment,看这篇就够了

Fragment 作为 Android 最基本,最重要的基础概念之一。本文从为什么出现 Fragment 开始,介绍了相关的方方面面。

2.5K100
来自专栏指尖下的Android

菜鸡的MVP架构漫谈

相信大家在网上看过关于MVP架构的博客数不胜数,至于MVP到底是什么,也不需要我再从百度百科复制一遍了,通俗的说MVP就是解决Model和View的耦合,没有使...

10020
来自专栏緣來來來

安卓基础干货(四):安卓网络编程的学习

21210
来自专栏cloudskyme

gwt之mvc4g

Mvc4g是一个简单的框架来实现的GWT应用程序的MVC模式。 主要思想 其主要思想是,以减轻开发人员的工作,以单独的视图从模型。该框架是一个XML文件,将允...

34260

扫码关注云+社区

领取腾讯云代金券