Android 生成长图并添加水印(二)

2018-02-09 12:44:37来源:https://www.jianshu.com/p/d5cfe7471b43作者:皮卡搜人点击

分享


本文主要介绍一下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);

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








最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台