如何在约束布局中叠加视图?

我有这个登录活动的布局。 我想覆盖progressBar ,就像使用FrameLayout可以完成一样。 如何使用ConstraintLayout执行此操作?

             

它看起来像这样:

在此处输入图像描述

我正在寻找适用于API级别19+的解决方案。 我不希望在ViewGroup ButtonProgressBar ,从而在我的布局中添加更多层次结构。

如果要100%覆盖目标视图,请将覆盖视图的所有边约束到目标视图的相应边,并将覆盖视图的高度和宽度设置为0dp ,如下所示:

   

这是一个有效的例子。 在下图中,红色稀松布放在图像上。 XML遵循图像。

在此处输入图像描述

     

有关更多信息,请参阅ConstraintLayout的文档 。

有两个选项,在每种情况下,您都会向标记添加一个属性。 它是

 android:translationZ="2dp" 

要么

 android:elevation="2dp" 

API级别必须> = 21。

我想为您提供XML解决方案的替代方案。
您还可以以编程方式将视图添加到根视图中。 ( ConstraintLayout

ViewGroupOverlay是一个额外的图层,位于ViewGroup(“主视图”)之上,该视图在该视图中的所有其他内容(包括视图组的子视图)之后绘制。 通过添加和删除视图和绘图来完成与覆盖层的交互。

  

如果您在代码中引用root,则可以添加ProgressBar
像这样的东西:

 rootLayout.overlay.add(ProgressBar(context).apply { measure(View.MeasureSpec.makeMeasureSpec(100, View.MeasureSpec.EXACTLY), View.MeasureSpec.makeMeasureSpec(100, View.MeasureSpec.EXACTLY)) layout(0, 0, 100, 100) }) 

您还可以查看此链接以获取更多信息。
这个问题也有帮助。

您可以尝试以下选项之一:1。在布局外添加相对布局,如此处所示

     
  1. 在此活动的onCreate中添加视图叠加层,如此处所述Android 4.3用户界面视图叠加层

另一种解决此问题的简单方法是将Button更改为View ,更改背景和大小。 用TextView覆盖它以替换旧的Button文本和另一个View以便稍后点击

ProgressBar 2dp上设置高程似乎有效。

 android:elevation="2dp" 

您也可以尝试按照类似问题的答案设置translationZ 。 对我来说,这适用于运行API 17的模拟器,进度条按预期显示在顶部。 如果您收到任何警告,请检查您的构建版本

这是您的API 19解决方案。 它将一个CircularProgressDrawable放在ConstraintLayout顶部的叠加层中。

这就是它的样子:

在此处输入图像描述

你要做的是:

  1. 摆脱XML ProgressBar

  2. 为XML ConstraintLayout一个id,例如:

     android:id="@+id/cl" 
  3. 将此代码添加到MainActivity:

     public class MainActivity extends AppCompatActivity implements View.OnClickListener { boolean toggle; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); final ConstraintLayout cl = findViewById(R.id.cl); cl.setOnClickListener(this); } @Override public void onClick(final View view) { toggle ^= true; if (toggle) { startProgress(); } else { stopProgress(); } } void startProgress() { final ConstraintLayout cl = findViewById(R.id.cl); final CircularProgressDrawable progressDrawable = new CircularProgressDrawable(this); progressDrawable.setColorSchemeColors(Color.MAGENTA); progressDrawable.setCenterRadius(50f); progressDrawable.setStrokeWidth(12f); progressDrawable.setStrokeCap(Paint.Cap.BUTT); cl.post(new Runnable() { @Override public void run() { progressDrawable.setBounds(0, 0, cl.getWidth(), cl.getHeight()); cl.getOverlay().add(progressDrawable); } }); progressDrawable.start(); } void stopProgress() { final ConstraintLayout cl = findViewById(R.id.cl); final CircularProgressDrawable progressDrawable = new CircularProgressDrawable(this); progressDrawable.setColorSchemeColors(Color.MAGENTA); progressDrawable.setCenterRadius(50f); progressDrawable.setStrokeWidth(12f); progressDrawable.setStrokeCap(Paint.Cap.BUTT); cl.post(new Runnable() { @Override public void run() { cl.getOverlay().clear(); } }); progressDrawable.stop(); } } 

您可以通过为视图设置Z转换来实现目标。

将此方法放在辅助类中(例如: UIUtils )并将其用于视图:

 /** * Set the 'Z' translation for a view * * @param view {@link View} to set 'Z' translation for * @param translationZ 'Z' translation as float */ public static void setTranslationZ(View view, float translationZ) { ViewCompat.setTranslationZ(view, translationZ); } 

用法:

 UIUTils.setTranslationZ(YOUR_VIEW, 5);