天天看点
返回

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

本文主要介绍一下RecyclerView生成长图。

是接着上一篇Android 生成长图并添加水印(一)写的，不过单独看也是可以的，如有不清楚的地方可以先看上一篇或在下方留言。

先附效果图：

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

RecyclerView长图.png

再撸代码：

页面布局没什么好写的，有RecyclerView就行，上条目布局item_recycler_list.xml：

name="item"

type="com.test.qby.newtestapplication.model.Test2Model" />

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="horizontal">

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" />

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" />

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

public class Test2Model {

public ObservableField id = new ObservableField<>();

public ObservableField 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);

}

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

public static Bitmap getRecyclerItemsToBitmap(Activity activity, RecyclerView view, List mList) {

MyViewAdapter adapter = (MyViewAdapter) view.getAdapter();

int itemsCount = adapter.getItemCount();

int allItemsHeight = 0;

int itemWidth = view.getWidth();

int px = DensityUtil.dip2px(activity, 18);

List 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方法，也是可以实现的

public static LinearLayout getContainerLayout(Activity activity, RecyclerView rv, List 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动态创建布局实现的方法。

public static Bitmap getRecyclerItemsToBitmap(Activity activity, RecyclerView recyclerView, List mList) {

int allItemsHeight = 0;

int itemWidth = recyclerView.getWidth();

List 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的，虽然用不到，但也算一种思路。

android webview生成长图
上一篇: Android 生成长图并添加水印（三）
下一篇: ES安装、SpringBoot集成ES