本来是想做一下ListView生成长图的，最后发现ListView未显示部分获取不到，就把ListView改成了NestedScrollView包裹LinearLayout，在LinearLayout中动态添加条目布局。
先看一下效果图：
生成的长图.jpg
布局activity_weather_future：
<android.support.v4.widget.SwipeRefreshLayout
android:id="@+id/srl"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.NestedScrollView
android:id="@+id/nsv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true">
<!--设置paddingBottom是为了在长图下方添加logo图片-->
<LinearLayout
style="@style/MatchMatch"
android:orientation="vertical"
android:paddingBottom="@dimen/dp_70">
<TextView
style="@style/MatchWrap"
android:layout_marginTop="@dimen/dp_10"
android:gravity="center_horizontal"
android:tag="skin:future_text_main:textColor"
android:text='@{future == null || future.heWeather6.get(0).basic == null?"":future.heWeather6.get(0).basic.location}'
android:textColor="@color/future_text_main_default"
android:textSize="@dimen/sp_24" />
<TextView
style="@style/MatchWrap"
android:layout_marginTop="@dimen/dp_10"
android:gravity="center_horizontal"
android:tag="skin:future_text_main:textColor"
android:text='@{@string/future_update_time+(future == null || future.heWeather6.get(0).update == null?"":future.heWeather6.get(0).update.loc)}'
android:textColor="@color/future_text_main_default"
android:textSize="@dimen/sp_16" />
<LinearLayout
android:id="@+id/ll"
style="@style/MatchWrap"
android:orientation="vertical" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.v4.widget.SwipeRefreshLayout>
主要操作的就是这个id为ll的LinearLayout，但也别忘了NestedScrollView，不然不会滚动啊。
页面代码：
获取数据源后，循环动态创建条目布局，添加到ll中
mList.clear();
mList.addAll(futureWeatherModel.getHeWeather6().get(0).getDaily_forecast());
ll.removeAllViews();
for (int i = 0; i < mList.size(); i++) {
ViewDataBinding dataBinding = DataBindingUtil.inflate(LayoutInflater.from(FutureWeatherActivity.this), R.layout.item_weather_future, null, false);
dataBinding.setVariable(BR.daily, mList.get(i));
ll.addView(dataBinding.getRoot());
}
srl.setRefreshing(false);
我这里数据源是根据和风天气免费api获取的七天天气，测试的时候可以自己造几条假数据。
ll.setOnLongClickListener(v -> {
//如果还在刷新，长按无效，确保生成长图时，数据已经获取到，动态布局已经添加完毕。
if (srl.isRefreshing()) {
return true;
}
Toast.makeText(FutureWeatherActivity.this, "生成长图", Toast.LENGTH_SHORT).show();
//获取到长图bitmap
Bitmap listViewBitmap = PhotoUtil.getViewGroupBitmap(nsv);
//展示长图
bitmapDialog = DialogUtil.showBitmapDialog(FutureWeatherActivity.this, listViewBitmap, bitmapCallback);
return true;
});
上面就是获取数据、根据数据创建条目添加到ll中、设置ll的长按事件，接下来才是本文的重点，我抽取成了工具方法放在了PhotoUtil中。
/**
* 截取viewGroup内容，生成图片
*
* @param viewGroup 容器控件
* @return 图片bitmap
*/
public static Bitmap getViewGroupBitmap(ViewGroup viewGroup) {
int h = 0;
Bitmap bitmap;
for (int i = 0; i < viewGroup.getChildCount(); i++) {
h += viewGroup.getChildAt(i).getHeight();
}
// 创建相应大小的bitmap
bitmap = Bitmap.createBitmap(viewGroup.getMeasuredWidth(), h,Bitmap.Config.ARGB_4444);
final Canvas canvas = new Canvas(bitmap);
//获取当前主题背景颜色，设置canvas背景
canvas.drawColor(SkinManager.getInstance().getResourceManager().getColor("future_bg"));
//画文字水印，不需要的可删去下面这行
drawTextToBitmap(viewGroup.getContext(), canvas, viewGroup.getMeasuredWidth(), h);
//绘制viewGroup内容
viewGroup.draw(canvas);
//createWaterMaskImage为添加logo的代码，不需要的可直接返回bitmap
return createWaterMaskImage(bitmap, BitmapFactory.decodeResource(viewGroup.getResources(), R.drawable.icon_mark));
}
这里使用SkinManager换肤功能，获取了当前主题背景颜色，可用Color.parseColor("#8ac5ec")替代。
想要使用SkinManager的，可以看一下这篇文章：使用SkinManager实现换肤功能
到这里，生成长图功能已经实现了，注意一下我使用的Bitmap.Config是ARGB_4444，如果感觉不清晰的话，可改为ARGB_8888，但是图很大的话可能会OOM了，如果对透明度没啥要求可以改为RGB_565，再对图片压缩一下就更好了。
下面写一下添加文字水印drawTextToBitmap方法，上面的代码顺序不要改变，文字是要加在背景上的。
/**
* 给图片添加水印
*
* @param context
* @param canvas 画布
* @param width 宽
* @param height 高
*/
public static void drawTextToBitmap(Context context, Canvas canvas, int width, int height) {
//要添加的文字
String logo = "皮卡搜";
//新建画笔，默认style为实心
Paint paint = new Paint();
//设置颜色，颜色可用Color.parseColor("#6b99b9")代替
paint.setColor(SkinManager.getInstance().getResourceManager().getColor("future_text_bg"));
//设置透明度
paint.setAlpha(80);
//抗锯齿
paint.setAntiAlias(true);
//画笔粗细大小
paint.setTextSize((float) DensityUtil.dip2px(context, 30));
//保存当前画布状态
canvas.save();
//画布旋转-30度
canvas.rotate(-30);
//获取要添加文字的宽度
float textWidth = paint.measureText(logo);
int index = 0;
//行循环，从高度为0开始，向下每隔80dp开始绘制文字
for (int positionY = -DensityUtil.dip2px(context, 30); positionY <= height; positionY += DensityUtil.dip2px(context, 80)) {
//设置每行文字开始绘制的位置,0.58是根据角度算出tan30°,后面的(index++ % 2) * textWidth是为了展示效果交错绘制
float fromX = -0.58f * height + (index++ % 2) * textWidth;
//列循环，从每行的开始位置开始，向右每隔2倍宽度的距离开始绘制（文字间距1倍宽度）
for (float positionX = fromX; positionX < width; positionX += textWidth * 2) {
//绘制文字
canvas.drawText(logo, positionX, positionY, paint);
}
}
//恢复画布状态
canvas.restore();
}
上面tan30°的计算方式是由下图得来的
tan30°.png
图中A为原canvas,B为旋转-30°后的canvas,width,height为canvas宽高，可以看到旋转后，X坐标向右偏移了，所以绘制时，应向左偏移-tan30°*height,X坐标才能与原坐标相同。
Y坐标虽然也偏移了，但是如图所示，黑色粗线所示的范围是可能绘制不到的区域，且高宽比越大，绘制不到的区域越小，手机的宽度是不变的，当高宽比大于图中height2与width2的比例后，就能做到全绘制。
在我测试的项目里基本不会出现黑色粗线区域，所以我这里没有对高度进行处理，如有需要，可在代码外循环positionY <= height增加height即可。
文字水印加上了，还有个添加logo图标的，一般会要求图上有自己公司的标识嘛。
/**
* 添加logo水印
*
* @param src 原图片
* @param logo logo
* @return 水印图片
*/
public static Bitmap createWaterMaskImage(Bitmap src, Bitmap logo) {
if (src == null) {
return null;
}
//原图宽高
int w = src.getWidth();
int h = src.getHeight();
//logo宽高
int ww = logo.getWidth();
int wh = logo.getHeight();
//创建一个和原图宽高一样的bitmap
Bitmap newBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_4444);
//创建
Canvas canvas = new Canvas(newBitmap);
//绘制原始图片
canvas.drawBitmap(src, 0, 0, null);
//新建矩阵
Matrix matrix = new Matrix();
//对矩阵作缩放处理
matrix.postScale(0.1f, 0.1f);
//对矩阵作位置偏移，移动到底部中间的位置
matrix.postTranslate(0.5f * w - 0.05f * ww, h - 0.1f * wh - 3);
//将logo绘制到画布上并做矩阵变换
canvas.drawBitmap(logo, matrix, null);
// 保存状态
canvas.save(Canvas.ALL_SAVE_FLAG);// 保存
// 恢复状态
canvas.restore();
return newBitmap;
}
这样本文内容就完成了，记得一点我这里是只有七条数据，所以不会OOM，如果你需要超长图的话，一定要进行图片压缩，我测的超过30条就很可能崩掉了。
虽然实现了生成长图和添加水印，但是我初衷是想在ListView上做的，感觉按照动态添加的思路，还是可以实现的，其实如果列表数据过多的话，做这个意义也不大，而数据不多的话，用这个也已经可以实现了。长图的用途无非跟简书一样是为了作分享，简书是用webView加载的，html页面进行了数据处理，不过也可以尝试一下。先写到这吧，ListView跟WebView试过之后，再来记一下，如果有做过的，也可以留言交流一下。
网友评论