前几天写了一个小工具,其中一个设置项需要屏幕区域范围坐标参数,由于通过观察直接填写坐标信息不太现实,于是就有了通过直接拖拽屏幕去取这个参数的需求,又因为需要在任意界面都能选取,所以就想到了悬浮窗,这里以前写过一个悬浮窗工具类《FloatWindowUtils 实现及事件冲突解决详解》,想着再加一些手势及绘制应该就能实现,于是吭叽吭叽搞了半天,发现其中还是有些坑的,所以在此记录备忘。
效果图和用法如下:
如上图,这个 View 的功能很简单,就是在屏幕上弹出一个全屏悬浮窗遮罩,然后在上面拖拽选择区域,最后保存坐标信息就好了。
详细实现我就不讲了,后面会贴源码,这里主要讲一下实现思路和几个需要注意的点
实现思路
继承 View 还是 ViewGroup
由于悬浮窗里需要有提示文字以及取消和保存两个按钮,所以我没有直接去继承 View 来写,直接继承 View 来实现当然也可以,但是需要把下面的文字以及按钮都画出来,可能还需要内置按钮的触发回调等等业务,最终我选择了继承 ViewGroup(ConstrainsLayout) 来实现,这样做可以共享 ConstrainsLayout 的所有属性。和直接继承 View 实现相比,它的优点就是可以在布局文件中方便的添加子 View,缺点是集成度不够高,需要引用外部资源,所以具体实现可以看使用场景,这里没有复用的场景,集成度要求不高,所以就选择了更简单的继承 ViewGroup 来实现。
class AreaSelectLayout : ConstraintLayout {
constructor(context: Context) : super(context) {}
constructor(context: Context, attrs: AttributeSet) : super(context, attrs) {}
override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
}
@SuppressLint("ClickableViewAccessibility")
override fun onTouchEvent(event: MotionEvent): Boolean {
return super.onTouchEvent(event)
}
}
<?xml version="1.0" encoding="utf-8"?>
<com.example.area_select_layout.AreaSelectLayout
...
android:background="@color/half_trans">
<ImageButton
android:id="@+id/btn_save"
... />
<ImageButton
android:id="@+id/btn_cancel"
... />
<LinearLayout ...>
<TextView
android:id="@+id/textView4"
android:text="拖动选取"
... />
<TextView
android:id="@+id/textView5"
android:text="起始"
... />
<TextView
android:text="和"
... />
<TextView
android:text="结束"
... />
<TextView
android:text="区域"
... />
</LinearLayout>
</com.example.area_select_layout.AreaSelectLayout>
跟随手指移动绘制方框
区域选择,其实就是在屏幕上画对角线,手指落下,记录起点,手指移动,不断更新终点并通知 Canvas 画出来,手指抬起,保存最终坐标。这里需要注意的是 Y 坐标要减去 StatusBar 的高度。
@SuppressLint("ClickableViewAccessibility")
override fun onTouchEvent(event: MotionEvent): Boolean {
when (event.action) {
MotionEvent.ACTION_DOWN -> {
// 记录起点位置
setStartPos(event.rawX.toInt(), (event.rawY - statusBarHeight).toInt())
}
MotionEvent.ACTION_MOVE -> {
// 更新终点位置
setStopPos(event.rawX.toInt(), (event.rawY - statusBarHeight).toInt())
// 使布局失效,让系统触发 onDraw 重绘界面
invalidate()
}
}
return super.onTouchEvent(event)
}
位置存储以及方向判断
由于位置总共有四个点,八个坐标值,用变量来存很不便,所以我直接用 Rect 来存了,一是便于管理,可以用这些值方便的判断正在选区起始区域或是结束区域,二是可以直接通过 Canvas.drawRect(Rect, Paint) 来绘制方框了。
private fun setStartPos(rawX: Int, rawY: Int) {
// 起始区域已经绘制
if (startRect.bottom != 0) {
startSelected = true
}
// 如果存在两个选区的话,则清屏重绘制
if (startRect.bottom != 0 && endRect.bottom != 0) {
clear()
}
// 判断落点属于起始区域还是结束区域
if (startSelected) {
end.x = rawX
end.y = rawY
} else {
start.x = rawX
start.y = rawY
}
}
private fun setStopPos(rawX: Int, rawY: Int) {
// 判断终点属于起始区域还是结束区域
if (startSelected) {
// rawX < end.x 表示从左向右拖动 ⇨
// ⇨ 时 x 更新 right,y 同理
endRect.left = if (rawX < end.x) rawX else end.x
// rawX > end.x 表示从右向左拖动 ⇦
// ⇦ 时 x 更新 left,y 同理
endRect.right = if (rawX > end.x) rawX else end.x
endRect.top = if (rawY < end.y) rawY else end.y
endRect.bottom = if (rawY > end.y) rawY else end.y
} else {
startRect.left = if (rawX < start.x) rawX else start.x
startRect.right = if (rawX > start.x) rawX else start.x
startRect.top = if (rawY < start.y) rawY else start.y
startRect.bottom = if (rawY > start.y) rawY else start.y
}
}
使布局悬浮在应用之外
这块考虑了一下,最后还是没有用 FloatWindowUtils,因为就一个布局,了解了悬浮窗怎么玩之后,悬浮起一个布局也很简单,直接用 WindowManager 十几行代码搞定了。
private fun showSelectLayout() {
if (!SystemSetings.isAppOpsOn(this)) {
SystemSetings.openOpsSettings(this)
Toast.makeText(this,"请先开启悬浮窗权限",Toast.LENGTH_SHORT).show()
return
}
wm = getSystemService(Context.WINDOW_SERVICE) as WindowManager
val lp = WindowManager.LayoutParams()
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
lp.type = WindowManager.LayoutParams.TYPE_APPLICATION_OVERLAY
} else {
lp.type = WindowManager.LayoutParams.TYPE_PHONE
}
lp.format = PixelFormat.TRANSLUCENT
lp.flags = lp.flags or WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE
lp.width = WindowManager.LayoutParams.MATCH_PARENT
lp.height = WindowManager.LayoutParams.MATCH_PARENT
lp.gravity = Gravity.END or Gravity.TOP
if (selectLayout.parent!=null){
wm.removeView(selectLayout)
}
wm.addView(selectLayout, lp)
}
核心部分基本就是上面这些了,算位置的时候稍微有点绕但是不难,多分析下就出来了,下面贴下源码
项目源码
manifests.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.area_select_layout">
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
MainActivity.kt
class MainActivity : AppCompatActivity() {
private lateinit var selectLayout: AreaSelectLayout
private lateinit var btnSave: View
private lateinit var btnCancel: View
private lateinit var wm: WindowManager
@SuppressLint("SetTextI18n")
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
selectLayout = View.inflate(this,R.layout.dialog_select_layout,null) as AreaSelectLay
btnSave = selectLayout.findViewById(R.id.btn_save)
btnCancel = selectLayout.findViewById(R.id.btn_cancel)
btnSave.setOnClickListener {
hideSelectLayout()
val startRect = selectLayout.getStartRect()
val endRect = selectLayout.getEndRect()
textView.text = "start-area:[${startRect.left},${startRect.top}]," +
"[${startRect.right},${startRect.bottom}]" +
"\n" +
"end-area:[${endRect.left},${endRect.top}]," +
"[${endRect.right},${endRect.bottom}]"
}
btnCancel.setOnClickListener {
hideSelectLayout()
selectLayout.clear()
}
button.setOnClickListener {
showSelectLayout()
}
}
private fun hideSelectLayout() {
wm.removeView(selectLayout)
}
private fun showSelectLayout() {
if (!SystemSetings.isAppOpsOn(this)) {
SystemSetings.openOpsSettings(this)
Toast.makeText(this,"请先开启悬浮窗权限",Toast.LENGTH_SHORT).show()
return
}
// 设置位置
wm = getSystemService(Context.WINDOW_SERVICE) as WindowManager
val lp = WindowManager.LayoutParams()
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
lp.type = WindowManager.LayoutParams.TYPE_APPLICATION_OVERLAY
} else {
lp.type = WindowManager.LayoutParams.TYPE_PHONE
}
lp.format = PixelFormat.TRANSLUCENT
lp.flags = lp.flags or WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE
lp.width = WindowManager.LayoutParams.MATCH_PARENT
lp.height = WindowManager.LayoutParams.MATCH_PARENT
lp.gravity = Gravity.END or Gravity.TOP
if (selectLayout.parent!=null){
wm.removeView(selectLayout)
}
wm.addView(selectLayout, lp)
}
}
AreaSelectLayout.kt
class AreaSelectLayout : ConstraintLayout {
private var paint = Paint(Paint.ANTI_ALIAS_FLAG)
private var endPaint = Paint(Paint.ANTI_ALIAS_FLAG)
private var paintText = Paint(Paint.ANTI_ALIAS_FLAG)
/**
* 滑动范围
*/
private var startRect = Rect()
private var endRect = Rect()
/**
* 坐标文字边框
*/
private var ltStrBounds = Rect()
private var rbStrBounds = Rect()
private var start = Point()
private var end = Point()
private var startSelected = false
private val statusBarHeight: Int
get() {
val resourceId = resources.getIdentifier("status_bar_height", "dimen", "android")
return resources.getDimensionPixelSize(resourceId)
}
constructor(context: Context) : super(context) {}
constructor(context: Context, attrs: AttributeSet) : super(context, attrs) {}
init {
paint.strokeWidth = dp2px(2f)
paint.style = Paint.Style.STROKE
paint.color = Color.parseColor("#1aad19")
endPaint.strokeWidth = dp2px(2f)
endPaint.style = Paint.Style.STROKE
endPaint.color = Color.parseColor("#f45454")
paintText.textSize = dp2px(12f)
paintText.color = Color.parseColor("#1aad19")
}
override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
// 绘制结束区域
canvas.drawRect(endRect, endPaint)
// 绘制起始区域
canvas.drawRect(startRect, paint)
}
@SuppressLint("ClickableViewAccessibility")
override fun onTouchEvent(event: MotionEvent): Boolean {
when (event.action) {
MotionEvent.ACTION_DOWN -> {
setStartPos(event.rawX.toInt(), (event.rawY - statusBarHeight).toInt())
}
MotionEvent.ACTION_MOVE -> {
setStopPos(event.rawX.toInt(), (event.rawY - statusBarHeight).toInt())
invalidate()
}
}
return super.onTouchEvent(event)
}
private fun setStartPos(rawX: Int, rawY: Int) {
if (startRect.bottom != 0) {
startSelected = true
}
if (startRect.bottom != 0 && endRect.bottom != 0) {
clear()
}
if (startSelected) {
end.x = rawX
end.y = rawY
} else {
start.x = rawX
start.y = rawY
}
}
private fun setStopPos(rawX: Int, rawY: Int) {
if (startSelected) {
endRect.left = if (rawX < end.x) rawX else end.x
endRect.right = if (rawX > end.x) rawX else end.x
endRect.top = if (rawY < end.y) rawY else end.y
endRect.bottom = if (rawY > end.y) rawY else end.y
} else {
startRect.left = if (rawX < start.x) rawX else start.x
startRect.right = if (rawX > start.x) rawX else start.x
startRect.top = if (rawY < start.y) rawY else start.y
startRect.bottom = if (rawY > start.y) rawY else start.y
}
}
fun clear() {
startSelected = false
startRect.top = 0
startRect.bottom = 0
startRect.left = 0
startRect.right = 0
endRect.top = 0
endRect.bottom = 0
endRect.left = 0
endRect.right = 0
invalidate()
}
fun setStartRect(rect: Rect) {
this.startRect = rect
}
fun getStartRect(): Rect {
// val rstRect = startRect
// rstRect.top += statusBarHeight
// rstRect.bottom += statusBarHeight
return startRect
}
fun setEndRect(rect: Rect) {
this.endRect = rect
}
fun getEndRect(): Rect {
// val rstRect = endRect
// rstRect.top += statusBarHeight
// rstRect.bottom += statusBarHeight
return endRect
}
fun dp2px(dp: Float): Float {
return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, Resources.getSystem().displayMetrics)
}
}
SystemSetings.kt
/**
* Created by skyrin on 2016/9/25.
* 系统设置相关
*/
object SystemSetings {
/**
* 辅助服务是否开启
* @param context
* @return true if Accessibility is on.
*/
fun isAccessibilitySettingsOn(context: Context): Boolean {
var i: Int
try {
i = Settings.Secure.getInt(context.contentResolver, "accessibility_enabled")
} catch (e: Settings.SettingNotFoundException) {
Log.i("AccessibilitySettingsOn", e.message)
i = 0
}
if (i != 1) {
return false
}
val string = Settings.Secure.getString(context.contentResolver, "enabled_accessibility_services")
return string?.toLowerCase()?.contains(context.packageName.toLowerCase()) ?: false
}
/**
* 打开辅助服务的设置
*/
fun openAccessibilityServiceSettings(context: Context): Boolean {
var result = true
try {
val intent = Intent(Settings.ACTION_ACCESSIBILITY_SETTINGS)
intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK)
context.startActivity(intent)
} catch (e: Exception) {
result = false
e.printStackTrace()
}
return result
}
/** 打开通知栏设置 */
@TargetApi(Build.VERSION_CODES.LOLLIPOP_MR1)
fun openNotificationServiceSettings(context: Context) {
try {
val intent = Intent(Settings.ACTION_NOTIFICATION_LISTENER_SETTINGS)
context.startActivity(intent)
} catch (e: Exception) {
e.printStackTrace()
}
}
/**
* 打开app权限的设置
* @param context
* @return
*/
fun openFloatWindowSettings(context: Context): Boolean {
try {
val intent = Intent(Settings.ACTION_APPLICATION_DETAILS_SETTINGS)
val uri = Uri.fromParts("package", context.packageName, null)
intent.data = uri
context.startActivity(intent)
} catch (e: Exception) {
e.printStackTrace()
return false
}
return true
}
/**
* 打开app权限的设置
* @param context
* @return
*/
fun openFloatWindowSettings(context: Context, pkgName: String): Boolean {
try {
val intent = Intent(Settings.ACTION_APPLICATION_DETAILS_SETTINGS)
val uri = Uri.fromParts("package", pkgName, null)
intent.data = uri
context.startActivity(intent)
} catch (e: Exception) {
e.printStackTrace()
return false
}
return true
}
/**
* 打开悬浮窗设置页
* 部分第三方ROM无法直接跳转可使用[.openAppSettings]跳到应用详情页
*
* @param context
* @return true if it's open successful.
*/
fun openOpsSettings(context: Context): Boolean {
try {
if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.M) {
val intent = Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION, Uri.parse("package:" + context.packageName))
context.startActivity(intent)
} else {
return openAppSettings(context)
}
} catch (e: Exception) {
e.printStackTrace()
return false
}
return true
}
/**
* 打开应用详情页
*
* @param context
* @return true if it's open success.
*/
fun openAppSettings(context: Context): Boolean {
try {
val intent = Intent(Settings.ACTION_APPLICATION_DETAILS_SETTINGS)
val uri = Uri.fromParts("package", context.packageName, null)
intent.data = uri
context.startActivity(intent)
} catch (e: Exception) {
e.printStackTrace()
return false
}
return true
}
/**
* 判断 悬浮窗口权限是否打开
* 由于android未提供直接跳转到悬浮窗设置页的api,此方法使用反射去查找相关函数进行跳转
* 部分第三方ROM可能不适用
*
* @param context
* @return true 允许 false禁止
*/
fun isAppOpsOn(context: Context): Boolean {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
return Settings.canDrawOverlays(context)
}
try {
val `object` = context.getSystemService(Context.APP_OPS_SERVICE) ?: return false
val localClass = `object`.javaClass
val arrayOfClass = arrayOfNulls<Class<*>>(3)
arrayOfClass[0] = Integer.TYPE
arrayOfClass[1] = Integer.TYPE
arrayOfClass[2] = String::class.java
val method = localClass.getMethod("checkOp", *arrayOfClass) ?: return false
val arrayOfObject1 = arrayOfNulls<Any>(3)
arrayOfObject1[0] = 24
arrayOfObject1[1] = Binder.getCallingUid()
arrayOfObject1[2] = context.packageName
val m = method.invoke(`object`, *arrayOfObject1) as Int
return m == AppOpsManager.MODE_ALLOWED
} catch (ex: Exception) {
ex.stackTrace
}
return false
}
/**
* 启动app
*
* @param context
* @param pkgName 包名
* @return 是否启动成功
*/
fun startApp(context: Context, pkgName: String): Boolean {
try {
val manager = context.packageManager
val openApp = manager.getLaunchIntentForPackage(pkgName) ?: return false
openApp.flags = Intent.FLAG_ACTIVITY_SINGLE_TOP
context.startActivity(openApp)
} catch (e: Exception) {
return false
}
return true
}
}
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="160dp"
android:text="选择区域"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="80dp"
android:text="TextView"
app:layout_constraintBottom_toTopOf="@+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>
dialog_select_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<com.example.area_select_layout.AreaSelectLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:background="@color/half_trans">
<ImageButton
android:id="@+id/btn_save"
android:layout_width="48dp"
android:layout_height="48dp"
android:background="@null"
android:src="@drawable/ic_ok"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<ImageButton
android:id="@+id/btn_cancel"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginBottom="0dp"
android:background="@null"
android:src="@drawable/ic_cancel"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="0dp"
android:layout_marginEnd="8dp"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/btn_save">
<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="拖动选取"
android:textColor="@color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="@+id/btn_save"
app:layout_constraintVertical_bias="0.448"
tools:layout_editor_absoluteX="61dp" />
<TextView
android:id="@+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="起始"
android:textColor="#1aad19"
tools:layout_editor_absoluteX="162dp"
tools:layout_editor_absoluteY="476dp" />
<TextView
android:id="@+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="和"
android:textColor="@color/white"
tools:layout_editor_absoluteX="209dp"
tools:layout_editor_absoluteY="475dp" />
<TextView
android:id="@+id/textView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="结束"
android:textColor="#f45454"
tools:layout_editor_absoluteX="243dp"
tools:layout_editor_absoluteY="474dp" />
<TextView
android:id="@+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="区域"
android:textColor="@color/white"
tools:layout_editor_absoluteX="276dp"
tools:layout_editor_absoluteY="474dp" />
</LinearLayout>
</com.example.area_select_layout.AreaSelectLayout>
colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#008577</color>
<color name="colorPrimaryDark">#00574B</color>
<color name="colorAccent">#D81B60</color>
<color name="red">#d02129</color>
<color name="vip">#f5b53a</color>
<color name="light_red">#ff620d</color>
<color name="blue">#1189ff</color>
<color name="blue_dark">#ff187998</color>
<color name="white">#FFF</color>
<color name="green">#ff1ce322</color>
<color name="grey">#eeeffd</color>
<color name="dark_gray">#525252</color>
<color name="black">#000000</color>
<color name="main">#09537a</color>
<color name="main_trans">#991296db</color>
<color name="full_trans">#00000000</color>
<color name="no_trans">#00000001</color>
<color name="half_trans">#80000000</color>
<color name="status_bar">#09537a</color>
<color name="df_layout">#fafafa</color>
<color name="main_gray">#f5f5f5</color>
<color name="waring">#ff620d</color>
<color name="room_panel_bg">#80000000</color>
<color name="sys_msg_bg">#b4b4b4</color>
<color name="dialogue_msg">#3e3f3f</color>
<color name="green0">#45C01A</color>
<color name="green1">#45C01A</color>
<color name="green2">#A3DEA3</color>
<color name="green3">#1AAD19</color>
<color name="ok">#1aad19</color>
<color name="no">#ff620d</color>
<color name="alpha_05_black">#0D000000</color>
<color name="alpha_10_black">#1A000000</color>
<color name="alpha_15_black">#26000000</color>
<color name="alpha_20_black">#33000000</color>
<color name="alpha_25_black">#40000000</color>
<color name="alpha_30_black">#4D000000</color>
<color name="alpha_33_black">#54000000</color>
<color name="alpha_35_black">#59000000</color>
<color name="alpha_40_black">#66000000</color>
<color name="alpha_45_black">#73000000</color>
<color name="alpha_50_black">#80000000</color>
<color name="alpha_55_black">#8C000000</color>
<color name="alpha_60_black">#99000000</color>
<color name="alpha_65_black">#A6000000</color>
<color name="alpha_70_black">#B3000000</color>
<color name="alpha_75_black">#BF000000</color>
<color name="alpha_80_black">#CC000000</color>
<color name="alpha_85_black">#D9000000</color>
<color name="alpha_90_black">#E6000000</color>
<color name="alpha_95_black">#F2000000</color>
</resources>