《Android Studio开发实战》学习（五） - 截图

---

背景

在这里继续学习Android Studio的使用方法，编写一个截图演示工具 ¹，学习图像视图ImageView进行截图的操作。

页面布局

现在想要设计一个单页面截图展示工具，主要有4个控件（1个TextView，1个ImageView，2个Button），从上到下、从左到右的布局分别是

1. 聊天窗口，宽度是半个屏幕（50%），高度90%，用来展示聊天文本；
2. 截图窗口，宽度半个屏幕（50%），高度90%，用来展示从左边聊天窗口截取的图片；
3. 聊天按钮，宽度50%，高度10%，点击后在聊天窗口显示事先设计好的随机的聊天文本；
4. 截图按钮，宽度50%，高度10%，点击后从左边聊天窗口截取图片，然后在截图窗口显示。

布局文件的编写

activity_main.xml的代码如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <androidx.constraintlayout.widget.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline_1"
        app:layout_constraintGuide_percent=".90"
        android:orientation="horizontal"/>
    <androidx.constraintlayout.widget.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline_2"
        app:layout_constraintGuide_percent=".50"
        android:orientation="vertical"/>
    <TextView
        android:id="@+id/tv_capture"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#0073C2FF"
        android:textColor="#000000"
        android:textSize="17sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="@+id/guideline_2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="@+id/guideline_1"/>
    <ImageView
        android:id="@+id/iv_capture"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintLeft_toLeftOf="@+id/guideline_2"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="@+id/guideline_1" />
    <Button
        android:id="@+id/btn_chat"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#FC4E07"
        android:layout_gravity="center"
        android:text="chat"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="@+id/guideline_2"
        app:layout_constraintTop_toTopOf="@+id/guideline_1"
        app:layout_constraintBottom_toBottomOf="parent"/>
    <Button
        android:id="@+id/btn_capture"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#FC4E07"
        android:layout_gravity="center"
        android:text="screenshot"
        app:layout_constraintLeft_toLeftOf="@+id/guideline_2"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline_1"
        app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

采用了两根辅助线（guideline），如图所示：

代码文件的编写

MainActivity.java的代码如下：

package com.example.screenshot;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Handler;
import android.graphics.Bitmap;
import android.widget.ImageView;
import android.widget.TextView;
import android.view.View;
import android.view.View.*;
import android.os.Bundle;
import java.text.SimpleDateFormat;
import java.util.Date;
public class MainActivity extends AppCompatActivity {
    
    
    private ImageView iv_capture;
    private TextView tv_capture;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        iv_capture = findViewById(R.id.iv_capture);
        tv_capture = findViewById(R.id.tv_capture);
        tv_capture.setDrawingCacheEnabled(true);
        OnClickListener clickT = new ClickTAction();
        OnLongClickListener clickL = new ClickLAction();
        findViewById(R.id.btn_chat).setOnClickListener(clickT);
        findViewById(R.id.btn_chat).setOnLongClickListener(clickL);
        findViewById(R.id.btn_capture).setOnClickListener(clickT);
    }
    private final String[] mChatStr = {
    
    "Did you have your meal?",
            "It's a beautiful day today.",
            "I won!",
            "Let's go to the cinema, shall we?",
            "What should I do in the evening?"};
    private class ClickTAction implements OnClickListener {
    
    
        @Override
        public void onClick(View v) {
    
    
            if (v.getId() == R.id.btn_chat) {
    
    
                int r = (int)(Math.random()*10) % 5;
                String s = String.format("%s\n%s %s", tv_capture.getText().toString(), getNowTime(), mChatStr[r]);
                tv_capture.setText(s);
            } else if (v.getId() == R.id.btn_capture) {
    
    
                Bitmap bitmap = tv_capture.getDrawingCache();
                iv_capture.setImageBitmap(bitmap);
                mHandler.postDelayed(mResetCache, 200);
            }
        }
    }
    private class ClickLAction implements OnLongClickListener {
    
    
        @Override
        public boolean onLongClick(View v) {
    
    
            if (v.getId() == R.id.btn_chat) {
    
    
                tv_capture.setText("");
            }
            return true;
        }
    }
    private String getNowTime() {
    
    
        SimpleDateFormat s = new SimpleDateFormat("HH:mm:ss");
        return s.format(new Date());
    }
    private Handler mHandler = new Handler();
    private Runnable mResetCache = new Runnable() {
    
    
        @Override
        public void run() {
    
    
            tv_capture.setDrawingCacheEnabled(false);
            tv_capture.setDrawingCacheEnabled(true);
        }
    };
}

ImageView控件截图的原理

建立TextView和ImageView私有变量各一个，在onCreate()方法中将它们与xml中的id绑定，然后将TextView的绘图缓存打开，最后将点击监听器与两个按钮绑定。在点击监听器的onClick()方法中判断如果是截屏按钮，则把TextView空间的绘图缓存输出到ImageView中，过200毫秒等界面渲染完毕，刷新TextView的绘图缓存（关闭再打开）。建立一个新的Handler对象，在run方法中刷新TextView的绘图缓存 ¹。

首先打开TextView控件的绘图缓存：

tv_capture.setDrawingCacheEnabled(true);

当点击截图按钮时，获取TexView控件的绘图缓存结果，返回的是一个Bitmap对象，用ImageView的setImageBitmap()方法显示。

Bitmap bitmap = tv_capture.getDrawingCache();
iv_capture.setImageBitmap(bitmap);

运行结果

按之前探索的方法 ²生成apk文件，然后传输到手机上运行，结果如下：

---

1. 欧阳燊. Android Studio开发实战. 清华大学出版社. 2017. ↩︎ ↩︎

2. 《Android Studio开发实战》学习（一）- Hello World_下唐人的博客-CSDN博客_android studio学习程序开发 ↩︎