Android视频裁剪栏布局背景在边距区域异常显示问题

嘿，我来帮你搞定这个裁剪栏的背景显示问题！咱们先理清楚问题出在哪，再一步步解决：

问题根源分析 #

1. 背景层级搞反了：你现在在activity_video_viewer.xml里给整个TrimmerBar（也就是trimmer_bar.xml的根FrameLayout）设置了背景色，这就导致整个区域都会被这个背景铺满——哪怕你调整内部thumbsBar的边距，父布局的背景还是会填充边距空白区，自然不符合预期。
2. 移动逻辑错了方向：你当前是通过修改thumbsBar的左右边距来实现缩略图移动，但这其实是让整个RelativeLayout整体偏移，而不是单独拖动左右两个缩略图，这完全偏离了裁剪栏的交互逻辑。

解决方案 #

步骤1：调整背景的归属 #

把背景从父布局转移到thumbsBar上，确保只有裁剪区域显示背景：

• 修改trimmer_bar.xml，把thumbsBar的预览背景替换成实际生效的背景：

<RelativeLayout android:id="@+id/thumbsBar" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_marginLeft="40dp" 
    android:background="@color/trimmerBarSelected"> <!-- 把tools:background改成android:background -->
    <!-- 内部左右缩略图代码保持不变 -->
</RelativeLayout>

• 移除activity_video_viewer.xml里TrimmerBar的背景属性，让父布局背景透明：

<com.tomatedigital.instagram.longstories.ui.TrimmerBar 
    android:id="@+id/trimmerBar" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" /> <!-- 删除掉android:background这一行 -->

步骤2：修正缩略图的移动逻辑 #

现在你需要调整的是左右缩略图的位置，而不是整个thumbsBar的边距。修改你的逻辑代码：

// 获取左右缩略图的布局参数
RelativeLayout.LayoutParams leftThumbParams = (RelativeLayout.LayoutParams) leftThumb.getLayoutParams();
RelativeLayout.LayoutParams rightThumbParams = (RelativeLayout.LayoutParams) rightThumb.getLayoutParams();

// 根据你的触摸计算逻辑，替换成实际的偏移值
leftThumbParams.leftMargin = 你的左侧拖动偏移值;
rightThumbParams.rightMargin = 你的右侧拖动偏移值;

// 更新布局参数，让缩略图移动
leftThumb.setLayoutParams(leftThumbParams);
rightThumb.setLayoutParams(rightThumbParams);

可选优化（进阶需求） #

如果希望thumbsBar的背景只显示在两个缩略图之间的区域，而不是整个thumbsBar宽度，可以自定义Drawable或者重写ThumbsBar的onDraw方法，动态绘制中间的背景条。不过按照你的预期效果，上面的步骤已经能完全满足需求了。

效果验证 #

调整完成后，拖动左右缩略图时，只有thumbsBar的区域会显示背景色，左右边距区域会显示父布局的#a8c71c颜色，和你想要的预期效果完全一致。

内容的提问来源于stack exchange，提问作者Rafael Lima