快捷導(dǎo)航

Android 動(dòng)態(tài)加載二維碼視圖生成快照的示例

更新時(shí)間：2017年10月25日 09:58:11 作者：ganshenml

本篇文章主要介紹了Android 動(dòng)態(tài)加載二維碼視圖生成快照的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

1.需求背景

需要實(shí)現(xiàn)一個(gè)動(dòng)態(tài)加載但不顯示出來(lái)的視圖，且該視圖上有個(gè)動(dòng)態(tài)生成的二維碼，最后用其去生成一張快照（也就是圖片）。
（常見(jiàn)這種情況是來(lái)源于“圖片分享”的功能需求，與普通圖片分享不同在于，該快照?qǐng)D片是動(dòng)態(tài)加載不顯示的。）

2.需求功能拆解

動(dòng)態(tài)二維碼的實(shí)現(xiàn)
動(dòng)態(tài)視圖生成快照的實(shí)現(xiàn)

3.踩坑點(diǎn)提要

獲取不到動(dòng)態(tài)視圖的bitmap
無(wú)法獲取最新動(dòng)態(tài)視圖的bitmap

4.開(kāi)發(fā)實(shí)現(xiàn)

動(dòng)態(tài)加載的視圖的布局文件代碼：

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" 
  android:id="@+id/qrcodeContentLl" 
  android:background="#F0E68C" 
  android:orientation="vertical"> 
 
  <TextView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="center" 
    android:layout_marginTop="100dp" 
    android:text="二維碼快照" 
    android:textSize="18sp" 
    android:textStyle="italic" /> 
 
  <ImageView 
    android:id="@+id/qrcodeIv" 
    android:layout_width="100dp" 
    android:layout_height="100dp" 
    android:layout_gravity="center" 
    android:layout_marginTop="@dimen/activity_vertical_margin" 
    android:scaleType="fitCenter" /> 
 
  <!--<TextView--> 
    <!--android:layout_width="wrap_content"--> 
    <!--android:layout_height="wrap_content"--> 
    <!--android:layout_marginTop="800dp"--> 
    <!--android:text="ahahds"--> 
    <!--android:layout_gravity="center"/>--> 
</LinearLayout>

大概樣式如下：

（上面的線框是用來(lái)顯示動(dòng)態(tài)生成的二維碼圖片的）

a.動(dòng)態(tài)二維碼的實(shí)現(xiàn)

關(guān)于這塊內(nèi)容，網(wǎng)上有太多例子了，其實(shí)也不用詳解。主要是利用Zxing提供的jar包來(lái)進(jìn)行處理。需要看這塊的詳細(xì)代碼可以去文章最后提供的GitHub地址查看，在此只提供下該jar包的資源下載（項(xiàng)目中若只涉及生成二維碼模塊，那么只要core核心jar包即可）：點(diǎn)擊下載>> core-3.3.0.jar

b.動(dòng)態(tài)視圖生成快照的實(shí)現(xiàn)

private void inflateAndShowCaptureView() { 
   if (hideView == null) { 
     hideView = LayoutInflater.from(this).inflate(R.layout.layout_quick_capture, null); 
     qrcodeIv = (ImageView) hideView.findViewById(R.id.qrcodeIv); 
     hideView.setDrawingCacheEnabled(true);//設(shè)置控件允許繪制緩存 
     hideView.measure(View.MeasureSpec.makeMeasureSpec(mainLayoutLl.getWidth(), View.MeasureSpec.EXACTLY), 
         View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED)); 
     hideView.layout(0, 0, hideView.getMeasuredWidth(), hideView.getMeasuredHeight()); 
   } else { 
     hideView.destroyDrawingCache();//要得到新的視圖，就得銷毀之前的緩存 
   } 
 
   showCaptureView(); 
 } 
 
 private void showCaptureView() { 
   String content = contentEt.getText().toString().trim(); 
   if (content == null || content.length() == 0) { 
     return; 
   } 
   if (qrcodeIv.getWidth() == 0) { 
     return; 
   } 
   Bitmap qrcodeBitmap = ZXingUtils.createQRImage(content, qrcodeIv.getWidth(), qrcodeIv.getHeight()); 
   qrcodeIv.setImageBitmap(qrcodeBitmap);//先將生成的二維碼顯示在加載的視圖上 
 
   Bitmap bitmap = hideView.getDrawingCache(); // 獲取視圖的繪制緩存（快照） 
   if (bitmap != null) { 
     showIv.setImageBitmap(bitmap); 
   } 
 
 }

1.首先獲取到視圖的bitmap是通過(guò)getDrawingCache()得到的。

若視圖是在界面上直接顯示出來(lái)的——>那么使用該方法直接獲取bitmap是沒(méi)有問(wèn)題的；
若視圖是動(dòng)態(tài)加載且不顯示出來(lái)，那么此時(shí)獲取bitmap是null。

此處的解決辦法就是手動(dòng)給該視圖布局：

hideView.measure(View.MeasureSpec.makeMeasureSpec(mainLayoutLl.getWidth(), View.MeasureSpec.EXACTLY), 
    View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED)); 
hideView.layout(0, 0, hideView.getMeasuredWidth(), hideView.getMeasuredHeight());

以下做點(diǎn)簡(jiǎn)單解釋：

View.MeasureSpec.makeMeasureSpec(int size , int mode)中有兩個(gè)參數(shù)，size和mode，第一組MeasureSpec中我將size設(shè)置為了當(dāng)前顯示頁(yè)面的布局的寬度（也就是屏幕寬度），然后mode設(shè)置為EXACTLY——>所表示的意義是：給hideView中的子View指定了精確的寬度大小為當(dāng)前屏幕的寬度。

mode有三種，EXACTLY，AT_MOST，UNSPECIFIED。在上面代碼中，將高度的size指定為0，mode指定為 UNSPECIFIED 則表示——>整個(gè)動(dòng)態(tài)加載的視圖高度指定為：依據(jù)于最后子View確認(rèn)的高度。

若將第一組MeasureSpec的相關(guān)參數(shù)也改為size = 0, mode = UNSPECIFIED，則兩組圖對(duì)比顯示如下：