实战》学习（五）"/>

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

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

• 背景
• 页面布局
• 布局文件的编写
• 代码文件的编写
• ImageView控件截图的原理
• 运行结果

背景

在这里继续学习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=""xmlns:app=""xmlns:tools=""android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"><androidx.constraintlayout.widget.Guidelineandroid: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.Guidelineandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:id="@+id/guideline_2"app:layout_constraintGuide_percent=".50"android:orientation="vertical"/><TextViewandroid: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"/><ImageViewandroid: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" /><Buttonandroid: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"/><Buttonandroid: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;@Overrideprotected 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 {@Overridepublic 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 {@Overridepublic 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() {@Overridepublic 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文件，然后传输到手机上运行，结果如下：