xiaoyan159/SplitLayout
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 实现拖动切换左右位置的功能（细节需优化）

Browse Source
This commit is contained in:
xiaoyan159@6800H 2024-09-03 17:46:50 +08:00
parent bad1f99c66
commit 1dc23fdd3f
6 changed files with 260 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
.idea/emulatorDisplays.xml generated Normal file
View File

@ -0,0 +1,47 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="EmulatorDisplays">
<option name="displayStateByAvdFolder">
<map>
<entry key="C:\Users\xiaoy\.android\avd\1920-972_API_33.avd">
<value>
<MultiDisplayState>
<option name="displayDescriptors">
<list>
<DisplayDescriptor>
<option name="height" value="1920" />
<option name="width" value="972" />
</DisplayDescriptor>
<DisplayDescriptor>
<option name="displayId" value="6" />
<option name="height" value="600" />
<option name="width" value="400" />
</DisplayDescriptor>
</list>
</option>
<option name="panelState">
<PanelState>
<option name="splitPanel">
<SplitPanelState>
<option name="proportion" value="0.7084547877311707" />
<option name="firstComponent">
<PanelState>
<option name="displayId" value="0" />
</PanelState>
</option>
<option name="secondComponent">
<PanelState>
<option name="displayId" value="6" />
</PanelState>
</option>
</SplitPanelState>
</option>
</PanelState>
</option>
</MultiDisplayState>
</value>
</entry>
</map>
</option>
</component>
</project>

1
automotive/src/main/AndroidManifest.xml
View File

@ -6,6 +6,7 @@
android:required="true" /> android:required="true" />
<uses-permission android:name="android.permission.VIBRATE" /> <uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_" />
<application <application
android:allowBackup="true" android:allowBackup="true"
android:appCategory="audio" android:appCategory="audio"

195
automotive/src/main/java/com/mixiaoxiao/library/splitlayout/SplitLayout.java
View File

@ -23,6 +23,7 @@ import android.view.HapticFeedbackConstants;
import android.view.MotionEvent; import android.view.MotionEvent;
import android.view.View; import android.view.View;
import android.view.ViewGroup; import android.view.ViewGroup;
import android.widget.Toast;
import androidx.annotation.NonNull; import androidx.annotation.NonNull;
@ -59,13 +60,18 @@ public class SplitLayout extends ViewGroup {
private float mLastMotionX, mLastMotionY; private float mLastMotionX, mLastMotionY;
private int mChildMinSize; private int mChildMinSize;
private int mWidth, mHeight; private int mWidth, mHeight;
private boolean mIsDragging = false; private boolean mIsDragging = false/*是否拖动中间的分割线*/, mIsSwitchStart = false/*是否开始切换子View*/, mIsSwitching = false/*是否切换子View过程中*/;
private Bitmap[] cachedBitmapArray = new Bitmap[2]; private Bitmap[] cachedBitmapArray = new Bitmap[2];
private Bitmap cachedBitmap; private Bitmap cachedBitmap;
private Canvas cachedCanvas; // 使用双缓冲方式绘制拖动中的View变化，提高效率 private Canvas cachedCanvas; // 使用双缓冲方式绘制拖动中的View变化，提高效率
private Paint mPaint = new Paint(); private Paint mPaint = new Paint();
private int dragForgroundColor = Color.argb(0.88f, 1f, 1f, 1f); // 默认的前景色 private int dragForgroundColor = Color.argb(0.88f, 1f, 1f, 1f); // 默认的前景色
private Vibrator vibrator; private int splitDragTouchCount = 2; // 默认拖动切换左右两个子View时的点击个数
private long mChildLongPressTime; // 记录用户长按拖动子View的初始时间
private View switchLongPressChildView = null; // 记录用户长按拖动的子View
private boolean hasSwitchChild = false; // 子View是否通过手势切换完成
private long LONG_PRESS_TIME = 2000;
// private Vibrator vibrator;
public SplitLayout(Context context) { public SplitLayout(Context context) {
this(context, null, 0); this(context, null, 0);
@ -102,13 +108,16 @@ public class SplitLayout extends ViewGroup {
mHandleSize = dp2px(DEFAULT_SPLIT_HANDLE_SIZE_DP); mHandleSize = dp2px(DEFAULT_SPLIT_HANDLE_SIZE_DP);
} }
mHandleHapticFeedback = a.getBoolean(R.styleable.SplitLayout_splitHandleHapticFeedback, false); mHandleHapticFeedback = a.getBoolean(R.styleable.SplitLayout_splitHandleHapticFeedback, false);
// 拖动中间分隔条过程中的前景颜色
dragForgroundColor = a.getColor(R.styleable.SplitLayout_splitDragForgroundColor, dragForgroundColor); dragForgroundColor = a.getColor(R.styleable.SplitLayout_splitDragForgroundColor, dragForgroundColor);
// 切换左右分割子View时手指的点击个数
splitDragTouchCount = a.getInteger(R.styleable.SplitLayout_splitDragTouchCount, splitDragTouchCount);
a.recycle(); a.recycle();
mPaint.setColor(dragForgroundColor); mPaint.setColor(dragForgroundColor);
// 获取震动权限 // // 获取震动权限
vibrator = (Vibrator) context.getSystemService(Context.VIBRATOR_SERVICE); // vibrator = (Vibrator) context.getSystemService(Context.VIBRATOR_SERVICE);
vibrator.vibrate(VibrationEffect.createOneShot(500, 125)); // vibrator.vibrate(VibrationEffect.createOneShot(500, 125));
} }
@Override @Override
@ -158,21 +167,38 @@ public class SplitLayout extends ViewGroup {
} }
} }
@SuppressLint("ClickableViewAccessibility") @Override
public boolean dispatchTouchEvent(MotionEvent ev) {
return super.dispatchTouchEvent(ev);
}
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
return super.onInterceptTouchEvent(ev)||ev.getPointerCount() == splitDragTouchCount;
}
@Override
public boolean performClick() {
return super.performClick();
}
@Override @Override
public boolean onTouchEvent(MotionEvent ev) { public boolean onTouchEvent(MotionEvent ev) {
final int action = ev.getAction(); final int action = ev.getActionMasked();
float x = ev.getX(); float x = ev.getX();
float y = ev.getY(); float y = ev.getY();
switch (action & MotionEvent.ACTION_MASK) { switch (action) {
case MotionEvent.ACTION_DOWN: { case MotionEvent.ACTION_DOWN:
Log.d(TAG, "ACTION_DOWN");
performClick();
// 单个点击事件
if (isUnderSplitHandle(x, y)) { if (isUnderSplitHandle(x, y)) {
if (mHandleHapticFeedback) { if (mHandleHapticFeedback) {
performHapticFeedback(HapticFeedbackConstants.VIRTUAL_KEY); performHapticFeedback(HapticFeedbackConstants.VIRTUAL_KEY);
} }
mHandleDrawable.setState(PRESSED_STATE_SET); mHandleDrawable.setState(PRESSED_STATE_SET);
mIsDragging = true; mIsDragging = true;
getParent().requestDisallowInterceptTouchEvent(true); // getParent().requestDisallowInterceptTouchEvent(true);
getBitmapFromChildView(); // 截屏当前两个子View的图片，用于在拖动过程中的 getBitmapFromChildView(); // 截屏当前两个子View的图片，用于在拖动过程中的
invalidate(); invalidate();
} else { } else {
@ -181,24 +207,86 @@ public class SplitLayout extends ViewGroup {
mLastMotionX = x; mLastMotionX = x;
mLastMotionY = y; mLastMotionY = y;
break; break;
case MotionEvent.ACTION_POINTER_DOWN: // 开始多点触控
Log.d(TAG, "ACTION_POINTER_DOWN");
if (ev.getPointerCount() == splitDragTouchCount) { // 如果是多指点击（点击个数可通过View的自定义属性定义）
// 首先判断所有的点击手指是否都在单个子View内，如果都在，则记录当前点击时间及子View，后续需要判断是否符合长按标准
for (int i = 0; i < getChildCount(); i++) {
if (isEventAllInChildView(getChildAt(i), ev)) { // 判断当前手指点击是否都在某个子View内
mChildLongPressTime = System.currentTimeMillis();
switchLongPressChildView = getChildAt(i);
mIsSwitchStart = true;
} }
}
}
break;
case MotionEvent.ACTION_MOVE: case MotionEvent.ACTION_MOVE:
Log.d(TAG, "ACTION_MOVE");
if (ev.getPointerCount() == 1) {
if (mIsDragging) { if (mIsDragging) {
getParent().requestDisallowInterceptTouchEvent(true); // getParent().requestDisallowInterceptTouchEvent(true);
if (mOrientation == VERTICAL) { if (mOrientation == VERTICAL) {
float deltaY = y - mLastMotionY; float deltaY = y - mLastMotionY;
onlyUpdateSplitPosition(deltaY); onlyUpdateSplitPosition(deltaY);
// updateSplitPositionWithDelta(deltaY); // updateSplitPositionWithDelta(deltaY);
postInvalidate(); // 使用子View的截图重绘界面 postInvalidate(); // 使用子View的截图重绘界面
} else { } else {
float deltaX = x - mLastMotionX; float deltaX = x - mLastMotionX;
onlyUpdateSplitPosition(deltaX); onlyUpdateSplitPosition(deltaX);
// updateSplitPositionWithDelta(deltaX); // updateSplitPositionWithDelta(deltaX);
postInvalidate(); postInvalidate();
} }
mLastMotionX = x; mLastMotionX = x;
mLastMotionY = y; mLastMotionY = y;
} }
} else if (ev.getPointerCount() == splitDragTouchCount) {
if (mIsSwitching) { // 开始进入拖动切换子View流程
// 分别记录当前两个子View的画面
getBitmapFromChildView();
// 判断所有手指是否都到了另外一个子View内
View tmpView = (switchLongPressChildView == mChild0)? mChild1:mChild0;
if (isEventAllInChildView(tmpView, ev)) {
// 震动提示用户，已实现换位
if (!hasSwitchChild) {
performHapticFeedback(HapticFeedbackConstants.VIRTUAL_KEY);
hasSwitchChild = true;
Toast.makeText(getContext(), "实现切换", Toast.LENGTH_SHORT).show();
postInvalidate();
}
} else {
// 重新切换回原有状态
if (hasSwitchChild) {
performHapticFeedback(HapticFeedbackConstants.VIRTUAL_KEY);
hasSwitchChild = false;
Toast.makeText(getContext(), "恢复状态", Toast.LENGTH_SHORT).show();
postInvalidate();
}
}
} else { // 尚未进入拖动切换流程
// 用户使用多指点击，需要实时判断点击时间是否足够长按时间，满足时，再判断是否和按下时点击的View相同
if (mChildLongPressTime>0 && System.currentTimeMillis() - mChildLongPressTime >= LONG_PRESS_TIME ) {
if (isEventAllInChildView(switchLongPressChildView, ev)) {
// 震动提示用户，开始支持拖动移动
performHapticFeedback(HapticFeedbackConstants.DRAG_START);
mIsSwitching = true;
mIsSwitchStart = false;
} else { // 划出当前View，则重置长按初始时间为0，且初始点按的childView也置为null
mChildLongPressTime = 0;
switchLongPressChildView = null;
}
}
}
}
break;
case MotionEvent.ACTION_POINTER_UP:
if (hasSwitchChild) {
switchChildViewPosition();
}
hasSwitchChild = false;
mIsSwitching = false;
mIsSwitchStart = false;
switchLongPressChildView = null;
mChildLongPressTime = 0;
break; break;
case MotionEvent.ACTION_UP: case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL: case MotionEvent.ACTION_CANCEL:
@ -215,10 +303,27 @@ public class SplitLayout extends ViewGroup {
mLastMotionY = y; mLastMotionY = y;
mIsDragging = false; mIsDragging = false;
} }
break; break;
} }
return mIsDragging; return mIsDragging || mIsSwitchStart || mIsSwitching || ev.getActionMasked() == MotionEvent.ACTION_DOWN || ev.getActionMasked() == MotionEvent.ACTION_POINTER_DOWN;
}
public boolean isEventAllInChildView(View childView, MotionEvent event) {
if (childView == null || event == null) {
return false;
}
int left = childView.getLeft();
int top = childView.getTop();
int right = childView.getRight();
int bottom = childView.getBottom();
for (int i = 0; i < event.getPointerCount(); i++) {
// 有任意一个点不在当前View内，则返回false
if (event.getX(i) < left || event.getX(i) > right || event.getY(i) < top || event.getY(i) > bottom) {
return false;
}
}
return true;
} }
private boolean isUnderSplitHandle(float x, float y) { private boolean isUnderSplitHandle(float x, float y) {
@ -268,19 +373,25 @@ public class SplitLayout extends ViewGroup {
child0Rect.set(0, 0, (int) (mSplitPosition - mHandleSize / 2), getHeight()); child0Rect.set(0, 0, (int) (mSplitPosition - mHandleSize / 2), getHeight());
child1Rect.set((int) (mSplitPosition + mHandleSize / 2), 0, getWidth(), getHeight()); child1Rect.set((int) (mSplitPosition + mHandleSize / 2), 0, getWidth(), getHeight());
} }
// cachedCanvas.drawBitmap(cachedBitmapArray[0], null, child0Rect, null); cachedCanvas.drawBitmap(cachedBitmapArray[0], null, child0Rect, null);
cachedCanvas.drawRect(child0Rect, mPaint); cachedCanvas.drawRect(child0Rect, mPaint);
cachedCanvas.drawBitmap(((BitmapDrawable)getContext().getDrawable(R.drawable.icon_app)).getBitmap(), // cachedCanvas.drawBitmap(((BitmapDrawable)getContext().getDrawable(R.drawable.icon_app)).getBitmap(),
child0Rect.centerX() - (getContext().getDrawable(R.drawable.icon_app).getBounds().width()/2), // child0Rect.centerX() - (getContext().getDrawable(R.drawable.icon_app).getBounds().width()/2),
child0Rect.centerY() - (getContext().getDrawable(R.drawable.icon_app).getBounds().height()/2), null); // child0Rect.centerY() - (getContext().getDrawable(R.drawable.icon_app).getBounds().height()/2), null);
// cachedCanvas.drawBitmap(cachedBitmapArray[1], null, child1Rect, null); cachedCanvas.drawBitmap(cachedBitmapArray[1], null, child1Rect, null);
cachedCanvas.drawRect(child1Rect, mPaint); cachedCanvas.drawRect(child1Rect, mPaint);
cachedCanvas.drawBitmap(((BitmapDrawable)getContext().getDrawable(R.drawable.icon_app)).getBitmap(), // cachedCanvas.drawBitmap(((BitmapDrawable)getContext().getDrawable(R.drawable.icon_app)).getBitmap(),
child1Rect.centerX() - (getContext().getDrawable(R.drawable.icon_app).getBounds().width()/2), // child1Rect.centerX() - (getContext().getDrawable(R.drawable.icon_app).getBounds().width()/2),
child1Rect.centerY() - (getContext().getDrawable(R.drawable.icon_app).getBounds().height()/2), null); // child1Rect.centerY() - (getContext().getDrawable(R.drawable.icon_app).getBounds().height()/2), null);
canvas.drawBitmap(cachedBitmap, 0, 0, null); canvas.drawBitmap(cachedBitmap, 0, 0, null);
} }
} else if (mIsSwitching) { // 开始拖动切换
if (hasSwitchChild) {
resetChildSnapshotBitmap(canvas, true);
} else {
resetChildSnapshotBitmap(canvas, false);
}
} }
} }
@ -357,12 +468,6 @@ public class SplitLayout extends ViewGroup {
// 获取当前两个子View的Bitmap截图，用于在拖动过程中的实时绘制 // 获取当前两个子View的Bitmap截图，用于在拖动过程中的实时绘制
private void getBitmapFromChildView() { private void getBitmapFromChildView() {
// 先回收已有的缓存图片
for (Bitmap bitmap: cachedBitmapArray) {
if (bitmap != null) {
bitmap.recycle();
}
}
if (mChild0!=null) { if (mChild0!=null) {
cachedBitmapArray[0] = loadBitmapFromViewBySystem(mChild0); cachedBitmapArray[0] = loadBitmapFromViewBySystem(mChild0);
} }
@ -396,6 +501,7 @@ public class SplitLayout extends ViewGroup {
return dragForgroundColor; return dragForgroundColor;
} }
// 切换两个子View的位置
public void switchChildViewPosition() { public void switchChildViewPosition() {
checkChildren(); checkChildren();
removeAllViews(); removeAllViews();
@ -406,4 +512,35 @@ public class SplitLayout extends ViewGroup {
mChild1 = tempView; mChild1 = tempView;
requestLayout(); requestLayout();
} }
// 设置两个子View的快照的显示，可反转
public void resetChildSnapshotBitmap(Canvas canvas, boolean isReverse) {
if (cachedBitmapArray!= null&&cachedBitmapArray.length>1) {
cachedCanvas.drawColor(getContext().getColor(android.R.color.transparent), PorterDuff.Mode.CLEAR);
Rect child0Rect = new Rect();
Rect child1Rect = new Rect();
if (mOrientation == VERTICAL) {
if (!isReverse) {
child0Rect.set(0, 0, getWidth(), (int) (mSplitPosition - mHandleSize / 2));
child1Rect.set(0, (int) (mSplitPosition + mHandleSize / 2), getWidth(), getHeight());
} else {
child1Rect.set(0, 0, getWidth(), (int) (mSplitPosition - mHandleSize / 2));
child0Rect.set(0, (int) (mSplitPosition + mHandleSize / 2), getWidth(), getHeight());
}
} else {
if (!isReverse) {
child0Rect.set(0, 0, (int) (mSplitPosition - mHandleSize / 2), getHeight());
child1Rect.set((int) (mSplitPosition + mHandleSize / 2), 0, getWidth(), getHeight());
} else {
child1Rect.set(0, 0, (int) (mSplitPosition - mHandleSize / 2), getHeight());
child0Rect.set((int) (mSplitPosition + mHandleSize / 2), 0, getWidth(), getHeight());
}
}
cachedCanvas.drawBitmap(cachedBitmapArray[0], null, child0Rect, null);
cachedCanvas.drawRect(child0Rect, mPaint);
cachedCanvas.drawBitmap(cachedBitmapArray[1], null, child1Rect, null);
cachedCanvas.drawRect(child1Rect, mPaint);
canvas.drawBitmap(cachedBitmap, 0, 0, null);
}
}
} }

BIN
automotive/src/main/res/drawable-xxhdpi/vertical_line.9.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 668 B

7
automotive/src/main/res/layout/activity_split_layout.xml
View File

@ -41,14 +41,13 @@
android:layout_height="match_parent" android:layout_height="match_parent"
android:layout_marginBottom="48dp" android:layout_marginBottom="48dp"
app:splitFraction="0.3" app:splitFraction="0.3"
app:splitHandleDrawable="@drawable/split_drawable" app:splitHandleDrawable="@drawable/vertical_line"
app:splitDragForgroundColor="@color/material_yellow_500" app:splitDragForgroundColor="@color/draw_progress_bg_color"
app:splitOrientation="horizontal"> app:splitOrientation="horizontal">
<LinearLayout <LinearLayout
android:id="@+id/layout_child0" android:id="@+id/layout_child0"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="match_parent" android:layout_height="match_parent">
android:clickable="true">
<TextView <TextView
android:id="@+id/tv_child0" android:id="@+id/tv_child0"

4
automotive/src/main/res/values/splitlayout.xml
View File

@ -9,7 +9,11 @@
<attr name="splitFraction" format="float"/> <attr name="splitFraction" format="float"/>
<attr name="splitHandleDrawable" format="reference"/> <attr name="splitHandleDrawable" format="reference"/>
<attr name="splitHandleSize" format="dimension"/> <attr name="splitHandleSize" format="dimension"/>
<!-- 是否需要增加触觉反馈，如果为true，用户点击时会有震动反馈 -->
<attr name="splitHandleHapticFeedback" format="boolean"/> <attr name="splitHandleHapticFeedback" format="boolean"/>
<!-- 拖动分割线时，前景颜色的设置 -->
<attr name="splitDragForgroundColor" format="color"/> <attr name="splitDragForgroundColor" format="color"/>
<!-- 分割要素拖动切换左右时，点击个数的设置 -->
<attr name="splitDragTouchCount" format="integer"/>
</declare-styleable> </declare-styleable>
</resources> </resources>