1、创建安卓应用
基于Empty Activity
模板创建安卓应用 - MoveMickeyByTouch
单击【Finish】按钮
2、准备图片素材
将背景图片与米老鼠图片,拷贝到drawable
目录里
3、字符串资源文件
字符串资源文件 - strings.xml
var foo = 'bar';<resources>
<string name="app_name">通过触摸移动米老鼠</string>
</resources>
4、主布局资源文件
主布局资源文件 - activity_main.xml
将约束布局改成线性布局,再添加一个图像控件显示米老鼠
<?xml version="1.0" encoding="utf-8"?><ImageView
android:id="@+id/iv_mickey"
android:layout_width="100dp"
android:layout_height="120dp"
android:scaleType="fitXY"
android:src="@drawable/mickey" />
查看预览效果
5、主界面类实现功能
主界面类 - MainActivity
声明变量和常量
通过资源标识符获取控件实例
让根布局获取焦点
获取米老鼠图像控件的布局参数
给线性根布局注册触摸监听器
查看完整源代码
package net.hw.move_mickey_by_touch;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
public class MainActivity extends AppCompatActivity {
private LinearLayout root; // 线性根布局
private ImageView ivMickey; // 米老鼠图像控件
private LinearLayout.LayoutParams layoutParams; // 布局参数
private static final String TAG = "move_mickey_by_touch"; // 标记常量
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// 利用布局资源文件设置用户界面
setContentView(R.layout.activity_main);
// 通过资源标识符获取控件实例
root = findViewById(R.id.root);
ivMickey = findViewById(R.id.iv_mickey);
// 让根布局获取焦点
root.setFocusable(true);
root.requestFocus();
// 获取米老鼠图像控件的布局参数
layoutParams = (LinearLayout.LayoutParams) ivMickey.getLayoutParams();
// 给线性根布局注册触摸监听器,实现触摸监听器接口,编写触摸事件代码
root.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
// 根据不同触摸动作执行不同操作
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: // 0, 触点按下
// 调试信息输出触点坐标
Log.d(TAG, "ACTION_DOWN(" + event.getX() + ", " + event.getY() + ")");
break;
case MotionEvent.ACTION_MOVE: // 2, 触点移动
// 调试信息输出触点坐标
Log.d(TAG, "ACTION_MOVE(" + event.getX() + ", " + event.getY() + ")");
break;
case MotionEvent.ACTION_UP: // 1, 触点放开
// 调试信息输出触点坐标
Log.d(TAG, "ACTION_UP(" + event.getX() + ", " + event.getY() + ")");
break;
}
// 根据变化的触点坐标来更新米老鼠图像控件的布局参数
layoutParams.leftMargin = (int) event.getX();
layoutParams.topMargin = (int) event.getY();
// 重新设置米老鼠图像控件的布局参数
ivMickey.setLayoutParams(layoutParams);
return true; // 设置为true,三个事件:down-->move-->up才会依次执行
}
});
}
}
6、启动应用,查看效果
启动后,米老鼠在屏幕左上角
在模拟器屏幕上,按下鼠标,移动鼠标,放开鼠标,之后在LogCat里可以看到上述三种动作的位置坐标
7、修改主界面类
不采用图像控件的布局参数,直接调用图像控件的setX()
和setY()
方法,分别传入触点横坐标event.getX()
和纵坐标event.getY()
,如果希望触点在米老鼠控件中央,那么分别传入event.getX()
- ivMickey.getWidth()
/ 2与event.getY()
- ivMickey.getHeight()
/ 2
package net.hw.move_mickey_by_touch;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
public class MainActivity extends AppCompatActivity {
private LinearLayout root; // 线性根布局
private ImageView ivMickey; // 米老鼠图像控件
private static final String TAG = "move_mickey_by_touch"; // 标记常量
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// 利用布局资源文件设置用户界面
setContentView(R.layout.activity_main);
// 通过资源标识符获取控件实例
root = findViewById(R.id.root);
ivMickey = findViewById(R.id.iv_mickey);
// 让根布局获取焦点
root.setFocusable(true);
root.requestFocus();
// 给线性根布局注册触摸监听器,实现触摸监听器接口,编写触摸事件代码
root.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
// 根据不同触摸动作执行不同操作
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: // 0, 触点按下
// 调试信息输出触点坐标
Log.d(TAG, "ACTION_DOWN(" + event.getX() + ", " + event.getY() + ")");
break;
case MotionEvent.ACTION_MOVE: // 2, 触点移动
// 调试信息输出触点坐标
Log.d(TAG, "ACTION_MOVE(" + event.getX() + ", " + event.getY() + ")");
break;
case MotionEvent.ACTION_UP: // 1, 触点放开
// 调试信息输出触点坐标
Log.d(TAG, "ACTION_UP(" + event.getX() + ", " + event.getY() + ")");
break;
}
// 设置米老鼠图像控件的坐标
ivMickey.setX(event.getX() - ivMickey.getWidth() / 2);
ivMickey.setY(event.getY() - ivMickey.getHeight() / 2);
return true; // 设置为true,三个事件:down-->move-->up才会依次执行
}
});
}
}
8、重启应用,查看效果
移动米老鼠,可以看到触点在米老鼠中央