Android 生成长图并添加水印（二）

本文主要介绍一下RecyclerView生成长图。
是接着上一篇Android 生成长图并添加水印（一）写的，不过单独看也是可以的，如有不清楚的地方可以先看上一篇或在下方留言。
先附效果图：

RecyclerView长图.png
再撸代码：
页面布局没什么好写的，有RecyclerView就行，上条目布局item_recycler_list.xml：

<?xml version="1.0" encoding="utf-8"?>
<layout>

    <data>

        <variable
            name="item"
            type="com.test.qby.newtestapplication.model.Test2Model" />

    </data>

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:gravity="center"
            android:padding="@dimen/dp_16"
            android:text="@{String.valueOf(item.id)}"
            android:textColor="@color/green"
            android:textSize="@dimen/sp_16" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="3"
            android:gravity="center"
            android:padding="@dimen/dp_16"
            android:text="@{item.name}"
            android:textColor="@color/green"
            android:textSize="@dimen/sp_16" />

    </LinearLayout>
</layout>

JavaBean中创建两个字段，Test2Model.java：

public class Test2Model {
    public ObservableField<Integer> id = new ObservableField<>();
    public ObservableField<String> name = new ObservableField<>();
}

数据源这次是自己随便造的假数据：

private void initData() {
        for (int i = 0; i < 15; i++) {
            Test2Model text2Model = new Test2Model();
            text2Model.id.set(i);
            text2Model.name.set("测试" + (i + 1));
            mList.add(text2Model);
        }
}

生成图片的触发事件我是在RecyclerView之上写了一个按钮，页面中点击事件的方法：

public void tClick(View view) {
        Bitmap itemsToBitmap = PhotoUtil.getRecyclerItemsToBitmap(Test2Activity.this,rv,mList);
        bitmapDialog = DialogUtil.showBitmapDialog(Test2Activity.this, itemsToBitmap, bitmapCallback);
    }

具体的生成图片的方法是写在了工具类中：

/**
     * 生成长图
     *
     * @param activity 页面上下文
     * @param view     列表控件
     * @param mList    数据源
     * @return bitmap
     */
    public static Bitmap getRecyclerItemsToBitmap(Activity activity, RecyclerView view, List<Test2Model> mList) {
        MyViewAdapter adapter = (MyViewAdapter) view.getAdapter();
        int itemsCount = adapter.getItemCount();
        int allItemsHeight = 0;
        int itemWidth = view.getWidth();
        int px = DensityUtil.dip2px(activity, 18);
        List<Bitmap> bitmaps = new ArrayList<>();
        for (int i = 0; i < itemsCount; i++) {

            //得到索引对应条目的JavaBean
            Test2Model test2Model = mList.get(i);

            //创建条目最外层布局LinearLayout
            LinearLayout childView = new LinearLayout(activity);
            //设置最外层LinearLayout方向为垂直
            childView.setOrientation(LinearLayout.VERTICAL);
            //创建第二层LinearLayout，默认水平
            LinearLayout linear = new LinearLayout(activity);

            //创建TextView2,设置属性，并设置宽度为四分之一
            TextView tv1 = new TextView(activity);
            tv1.setText(String.valueOf(test2Model.id.get()));
            tv1.setTextColor(Color.parseColor("#8ac5ec"));
            tv1.setTextSize(16);
            tv1.setPadding(px, px, px, px);
            tv1.setGravity(Gravity.CENTER);
            ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(itemWidth / 4, ViewGroup.LayoutParams.WRAP_CONTENT);
            tv1.setLayoutParams(params);

            //创建TextView2,设置属性，并设置宽度为四分之三
            TextView tv2 = new TextView(activity);
            tv2.setText(test2Model.name.get());
            tv2.setTextColor(Color.parseColor("#8ac5ec"));
            tv2.setTextSize(16);
            tv2.setPadding(px, px, px, px);
            tv2.setGravity(Gravity.CENTER);
            ViewGroup.LayoutParams params2 = new ViewGroup.LayoutParams(itemWidth - itemWidth / 4, ViewGroup.LayoutParams.WRAP_CONTENT);
            tv2.setLayoutParams(params2);

            //创建条目分割线，设置颜色及高度
            View line = new View(activity);
            line.setBackgroundColor(Color.parseColor("#FF0046"));
            ViewGroup.LayoutParams params3 = new ViewGroup.LayoutParams(itemWidth, 2);
            line.setLayoutParams(params3);

            //第二层LinearLayout添加两个TextView
            linear.addView(tv1);
            linear.addView(tv2);

            //最外层LinearLayout添加第二层LinearLayout和分割线
            childView.addView(linear);
            childView.addView(line);

            //指定条目测量规则，进行布局
            childView.measure(0, 0);
            childView.layout(0, 0, itemWidth, childView.getMeasuredHeight());
            //设置缓存机制开启
            childView.setDrawingCacheEnabled(true);
            //创建缓存
            childView.buildDrawingCache();
            //将View缓存得到的bitmap添加到bitmaps集合中
            bitmaps.add(childView.getDrawingCache());
            //大图增加一个条目的高度
            allItemsHeight += childView.getMeasuredHeight();
        }
        //创建大图
        Bitmap bigBitmap = Bitmap.createBitmap(itemWidth, allItemsHeight, Bitmap.Config.ARGB_4444);
        //创建画布
        Canvas bigCanvas = new Canvas(bigBitmap);
        //绘制背景
        bigCanvas.drawColor(Color.parseColor("#FFFFFF"));
        //绘制文字水印
        drawTextToBitmap(activity, bigCanvas, itemWidth, allItemsHeight);
        //创建画笔
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        for (int i = 0; i < bitmaps.size(); i++) {
            //获取bitmaps集合当前索引得到的图片
            Bitmap bmp = bitmaps.get(i);
            //新建矩阵
            Matrix matrix = new Matrix();
            //对矩阵作位置偏移，移动到底部中间的位置
            matrix.postTranslate(0, bmp.getHeight() * i);
            //绘制到画布上并做矩阵变换
            bigCanvas.drawBitmap(bmp, matrix, paint);
            // 保存状态
            bigCanvas.save(Canvas.ALL_SAVE_FLAG);// 保存
            // 恢复状态
            bigCanvas.restore();
            //回收
            bmp.recycle();
        }

        return bigBitmap;
    }

如果drawTextToBitmap方法找不到，可以通过文章开始的链接在上一篇中找到，或者删掉这行，这是用来添加文字水印的，还有图片logo水印也在上一篇中写过了，本文不再赘述。

可以看到这个方法里写了两个for循环：
第一个for循环
根据列表条目的个数动态创建对应数量的条目，并分别把单个条目缓存得到的bitmap存入集合bitmaps中，也确定了列表的总高度。
第二个for循环
循环取出bitmap集合中的bitmap，绘制到大图上并根据索引矩阵变换位置。

通过第一个循环中的代码可以看出其实我们写在工具类里，这个方法基本也是不能复用的，因为它的条目布局完全是动态创建的。

第二个循环还有一种差不多的写法：

//创建画笔
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
int iHeight = 0;
for (int i = 0; i < bitmaps.size(); i++) {
       //获取bitmaps集合当前索引得到的图片
       Bitmap bmp = bitmaps.get(i);
       //循环在大图上绘制bitmaps集合中的单个图片
       bigCanvas.drawBitmap(bmp, 0, iHeight, paint);
       //Y坐标绘制起始点改变
       iHeight += bmp.getHeight();
       //回收
       bmp.recycle();
}

两种方式都是可以实现的。

上面工具类中的写法是动态创建单个条目，获取单个条目的bitmap，再逐一加到大图中，如果你看了上一篇文章的话，应该可以想到还有一种写法，把整个布局都创建出来，再调用上一篇中getViewGroupBitmap方法，也是可以实现的

/**
     * 创建全部RecyclerView布局
     *
     * @param activity 上下文
     * @param rv       RecyclerView
     * @param mList    数据源
     * @return 布局
     */
    public static LinearLayout getContainerLayout(Activity activity, RecyclerView rv, List<Test2Model> mList) {
        LinearLayout containerLayout = new LinearLayout(activity);
        containerLayout.setOrientation(LinearLayout.VERTICAL);
        int px = DensityUtil.dip2px(activity, 18);
        int itemWidth = rv.getWidth();
        for (int i = 0; i < mList.size(); i++) {
            Test2Model test2Model = mList.get(i);

            LinearLayout itemView = new LinearLayout(activity);
            itemView.setOrientation(LinearLayout.VERTICAL);

            LinearLayout linear = new LinearLayout(activity);

            TextView tv1 = new TextView(activity);
            tv1.setText(String.valueOf(test2Model.id.get()));
            tv1.setTextColor(Color.parseColor("#8ac5ec"));
            tv1.setTextSize(16);
            tv1.setPadding(px, px, px, px);
            tv1.setGravity(Gravity.CENTER);
            ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(itemWidth / 4, ViewGroup.LayoutParams.WRAP_CONTENT);
            tv1.setLayoutParams(params);

            TextView tv2 = new TextView(activity);
            tv2.setText(test2Model.name.get());
            tv2.setTextColor(Color.parseColor("#8ac5ec"));
            tv2.setTextSize(16);
            tv2.setPadding(px, px, px, px);
            tv2.setGravity(Gravity.CENTER);
            ViewGroup.LayoutParams params2 = new ViewGroup.LayoutParams(itemWidth - itemWidth / 4, ViewGroup.LayoutParams.WRAP_CONTENT);
            tv2.setLayoutParams(params2);

            View line = new View(activity);
            line.setBackgroundColor(Color.parseColor("#FF0046"));
            ViewGroup.LayoutParams params3 = new ViewGroup.LayoutParams(itemWidth, 2);
            line.setLayoutParams(params3);

            linear.addView(tv1);
            linear.addView(tv2);

            itemView.addView(linear);
            itemView.addView(line);

            containerLayout.addView(itemView);
        }
        containerLayout.measure(0, 0);
        containerLayout.layout(0, 0, itemWidth, containerLayout.getMeasuredHeight());
        return containerLayout;
    }

调用这个方法创建出整个列表布局，然后再调用上一篇中的方法即可：

Bitmap bitmap = PhotoUtil.getViewGroupBitmap(PhotoUtil.getContainerLayout(activity,rv,mList));
bitmapDialog = DialogUtil.showBitmapDialog(Test2Activity.this, bitmap, bitmapCallback);

追加：
上述写法有一个很大的弊端，如果条目布局很复杂的话，这样创建布局的方式就太麻烦了，在这里再加上一个根据xml动态创建布局实现的方法。

/**
     * 生成长图
     *
     * @param activity     页面上下文
     * @param recyclerView 列表控件
     * @param mList        数据源
     * @return bitmap
     */
    public static Bitmap getRecyclerItemsToBitmap(Activity activity, RecyclerView recyclerView, List<Test2Model> mList) {
        int allItemsHeight = 0;
        int itemWidth = recyclerView.getWidth();
        List<Bitmap> bitmaps = new ArrayList<>();
        for (int i = 0; i < mList.size(); i++) {
            Test2Model test2Model = mList.get(i);
            View childView = LayoutInflater.from(activity).inflate(R.layout.item_recycler_list_copy, null);
            TextView view1 = childView.findViewById(R.id.id);
            TextView view2 = childView.findViewById(R.id.name);
            view1.setText(String.valueOf(test2Model.id.get()));
            view2.setText(test2Model.name.get());

            childView.measure(View.MeasureSpec.makeMeasureSpec(itemWidth, View.MeasureSpec.EXACTLY), 0);
            childView.layout(0, 0, itemWidth, childView.getMeasuredHeight());
            childView.setDrawingCacheEnabled(true);
            childView.buildDrawingCache();
            bitmaps.add(childView.getDrawingCache());
            allItemsHeight += childView.getMeasuredHeight();
        }
        Bitmap bigBitmap = Bitmap.createBitmap(itemWidth, allItemsHeight, Bitmap.Config.ARGB_4444);
        Canvas bigCanvas = new Canvas(bigBitmap);
        bigCanvas.drawColor(Color.parseColor("#FFFFFF"));
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        int iHeight = 0;
        for (int i = 0; i < bitmaps.size(); i++) {
            Bitmap bmp = bitmaps.get(i);
            bigCanvas.drawBitmap(bmp, 0, iHeight, paint);
            iHeight += bmp.getHeight();
            bmp.recycle();
        }
        return bigBitmap;
    }

因为使用的RecyclerView，分割线是单独添加的，所以新建布局item_recycler_list_copy.xml，在条目下方加上了分割线。

写在最后：
1.上篇说本篇是要用ListView的，ListView上用法跟这基本是一样的，自行改动下就好。
2.上篇写的是长按生成图片，这篇因为是列表，通常条目会有长按事件，所以就单独写了个按钮，非要写在条目的长按事件里的话，也是可行的。
3.网上有好多写的可以通过getChildAt，findViewByPosition...，经过测试都是拿不到不在当前屏幕上的条目的，当然也可能是我的用法不对，如果有能拿到的，或者有更简便的方法，欢迎在下方留言指正。
4.可能还会写一篇WebView的，虽然用不到，但也算一种思路。