layout转Bitmap
2024-08-29 23:13:35
业务需求详细描述：最近产品说要在分享的商品图中添加一些其他图片和文字，然后拼接为一张图片，再分享到微信朋友圈，于是我就一脸懵逼了，但是没办法还是得做额！
然后整理了一下思路，主要有这么两条路线：
- 自己手动绘制。
- 将布局转换为图片。
很显然第一种方式是不合适的，无论是开发前还是开发后，成本都很大，所以果断选择了第二种方式。
一开始的时候，我没有经过大脑思考，果断的使用了getDrawingCache这个方法来解决这个业务需求，大致流程如下：
（1）创建需要显示成图片的布局，代码如下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/picmontage_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@android:color/white">
<ImageView
android:id="@+id/img_shop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="20dp" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="20dp">
<ImageView
android:id="@+id/img_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:id="@+id/txt_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
</RelativeLayout>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white">
<ImageView
android:id="@+id/img_qrcode"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dp" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="20dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="黄老五 提子味皇式烤芙条 300g 沙琪玛 休闲办公室零食...\n"
android:textColor="@android:color/black" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="长按识别二维码或扫一扫购买\n"
android:textColor="@android:color/darker_gray" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="From 萌店"
android:textColor="@android:color/darker_gray" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
（2）设置图片和文字信息，这里为了方便，直接把文字放到了布局中，设置图片的代码如下所示：
private void addLinearLayout() {
view = View.inflate(this, R.layout.activity_picmontage, null);
LinearLayout picmontageRoot = (LinearLayout) view.findViewById(R.id.picmontage_root);
ImageView shopImg = (ImageView) view.findViewById(R.id.img_shop);
ImageView priceImg = (ImageView) view.findViewById(R.id.img_price);
TextView priceTxt = (TextView) view.findViewById(R.id.txt_price);
ImageView qrcodeImg = (ImageView) view.findViewById(R.id.img_qrcode);
shopImg.setImageResource(R.mipmap.shop);
priceImg.setImageResource(R.mipmap.price);
priceTxt.setText("$ 20.00");
priceTxt.setTextSize(20);
priceTxt.setTextColor(Color.WHITE);
qrcodeImg.setImageResource(R.mipmap.qrcode);
addViewContent.addView(view);
}
（3）然后就可以将布局转换成图片了，代码如下所示：
private void drawingCacheShow() {
Bitmap cacheBitmap = convertViewToBitmap(addViewContent);
//Bitmap cacheBitmap = getMagicDrawingCache(addViewContent);
//addViewContent.removeView(view);
if(cacheBitmap != null) {
Bitmap newBitmap = Bitmap.createBitmap(cacheBitmap);
if (newBitmap != null) {
imgAddViewCache.setImageBitmap(newBitmap);
} else {
Log.i("123", "newBitmap=null");
}
} else {
Log.i("123", "cacheBitmap=null");
}
}
public static Bitmap convertViewToBitmap(View view){
view.measure(
View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED),
View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED));
view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());
view.buildDrawingCache();
Bitmap bitmap = view.getDrawingCache();
if (bitmap != null) {
Bitmap.Config cfg = bitmap.getConfig();
Log.d("123", "----------------------- cache.getConfig() = " + cfg);
}
return bitmap;
}
（4）然后发现图片不能正确显示，经过debug之后发现原来是图片过大的缘故，一脸懵逼，虽然使用了这样的压缩算法，但总是不尽如人意：
private void addLinearLayout() {
view = View.inflate(this, R.layout.activity_picmontage, null);
LinearLayout picmontageRoot = (LinearLayout) view.findViewById(R.id.picmontage_root);
ImageView shopImg = (ImageView) view.findViewById(R.id.img_shop);
ImageView priceImg = (ImageView) view.findViewById(R.id.img_price);
TextView priceTxt = (TextView) view.findViewById(R.id.txt_price);
ImageView qrcodeImg = (ImageView) view.findViewById(R.id.img_qrcode);
// 压缩shop
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.shop);
shopImg.setImageBitmap(resizeBm(bitmap, 600));
priceImg.setImageResource(R.mipmap.price);
priceTxt.setText("$ 20.00");
priceTxt.setTextSize(20);
priceTxt.setTextColor(Color.WHITE);
qrcodeImg.setImageResource(R.mipmap.qrcode);
addViewContent.addView(view);
}
private Bitmap resizeBm(Bitmap bitmap, int scaleWidth) {
// 原始宽高
float rawWidth = bitmap.getWidth();
float rawHeight = bitmap.getHeight();
// 新宽高
float newWidth = 0;
float newHeight = 0;
// 将宽度缩放到scaleWidth
if(rawWidth>scaleWidth) {
newWidth = scaleWidth;
newHeight = rawHeight*(scaleWidth/rawWidth);
} else {
newWidth = rawWidth;
newHeight = rawHeight;
}
// 计算缩放比例
float widthScale = newWidth/rawWidth;
float heightScale = newHeight/rawHeight;
Log.i("123", "widthScale="+widthScale+", heightScale="+heightScale);
// 显示
Matrix matrix = new Matrix();
matrix.postScale(widthScale,heightScale);
Bitmap resizeBmp = Bitmap.createBitmap(bitmap,0,0,bitmap.getWidth(),bitmap.getHeight(),matrix,true);
return resizeBmp;
}
之后有了大神的帮助，终于顿悟了，发现了神奇的方法：view.draw(canvas)。然后就很简单了：
这里的第1步和第2步流程与上面的1、2步流程一模一样，我们直接进入第3步，我先给出主界面中的布局：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/main_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="showPic"
android:text="显示绘制的图片" />
<ImageView
android:id="@+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:id="@+id/main_content"
android:visibility="invisible"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"/>
</LinearLayout>
</ScrollView>
</LinearLayout>
（3）然后将该布局添加到主界面中，并设置为invisible，但不能设置为gone，否则不能成功渲染，同样不能生成图片了：
mainContent.addView(v);
（4）最后我们就可以在点击事件里面将布局生成图片了，代码如下：
public void showPic(View view) {
int width = picmontageRoot.getMeasuredWidth();
int height = picmontageRoot.getMeasuredHeight();
Bitmap b = Bitmap.createBitmap(width, height, Bitmap.Config.RGB_565);
Canvas canvas = new Canvas(b);
picmontageRoot.draw(canvas);
img.setImageBitmap(b);
}
最新文章
- ABP文档 ：Overall - Introduction
- Noip2016 总结&反思
- Entity Framework 连接低版本数据库
- 【OpenGL】如何绘制Shadow
- C++ std::multiset
- spring Quartz 调度
- POJ3422 Kaka's Matrix Travels
- 集群中用Memcached来实现session共享
- c++学习-链表
- Maven详解之仓库------本地仓库、远程仓库
- 微软职位内部推荐-Senior Software Engineer
- Nginx 第三方模块-漫谈缘起
- MVC5富文本编辑器CKEditor配置CKFinder
- 第17章 中介者模式（Mediator Pattern）
- 【Scala】Scala之Numbers
- 初探Azure的保留实例（Reserved Instance）
- day_41_mysql
- 如何使用命令从linux服务器下载文件到windows
- Hadoop 集群的三种方式
- 使用sql语句删除数据库中重复的数据