本文主要介绍一下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的，虽然用不到，但也算一种思路。
