背景
在这里继续学习Android Studio的使用方法,编写一个截图演示工具 1,学习图像视图ImageView进行截图的操作。
页面布局
现在想要设计一个单页面截图展示工具,主要有4个控件(1个TextView,1个ImageView,2个Button),从上到下、从左到右的布局分别是
- 聊天窗口,宽度是半个屏幕(50%),高度90%,用来展示聊天文本;
- 截图窗口,宽度半个屏幕(50%),高度90%,用来展示从左边聊天窗口截取的图片;
- 聊天按钮,宽度50%,高度10%,点击后在聊天窗口显示事先设计好的随机的聊天文本;
- 截图按钮,宽度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的绘图缓存 1。
首先打开TextView控件的绘图缓存:
tv_capture.setDrawingCacheEnabled(true);
当点击截图按钮时,获取TexView控件的绘图缓存结果,返回的是一个Bitmap对象,用ImageView的setImageBitmap()
方法显示。
Bitmap bitmap = tv_capture.getDrawingCache();
iv_capture.setImageBitmap(bitmap);
运行结果
按之前探索的方法 2生成apk文件,然后传输到手机上运行,结果如下: