logo标签列表

如何在Android中为约束布局设置透明背景

androidxmlandroid-constraintlayout
3

嗨，我需要制作一个和下面图片类似的视图。

enter image description here

但当我将父视图设置为透明时，默认的背景会像这样显示：

enter image description here

主视图后面显示了一个透明视图。

我的XML代码如下：

    <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="wrap_content"
    android:layout_margin="@dimen/_8sdp"
    android:background="@color/red"
    android:clipChildren="false"
    android:clipToPadding="false">

     <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/cl2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/_50sdp"
        android:background="@drawable/rounded_corner_shadow"
        android:clipChildren="false"
        android:clipToPadding="false"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        

        <FrameLayout
            android:id="@+id/progressLayout_frame"
            android:layout_width="@dimen/_90sdp"
            android:layout_height="@dimen/_90sdp"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="10dp"
            android:clickable="true"
            android:visibility="visible"
            app:layout_constraintBottom_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <View
                android:id="@+id/bgCircle"
                android:layout_width="@dimen/_70sdp"
                android:layout_height="@dimen/_70sdp"
                android:layout_gravity="center"
                android:alpha="0.7"
                android:background="@color/white"
                android:visibility="visible" />

            <RelativeLayout
                android:id="@+id/progressLayout"
                android:layout_width="@dimen/_80sdp"
                android:layout_height="@dimen/_80sdp"
                android:layout_gravity="center"
                android:background="@android:color/transparent"
                android:clickable="true"
                >

                <ProgressBar
                    android:id="@+id/progressbar"
                    style="?android:attr/progressBarStyleHorizontal"
                    android:layout_width="@dimen/_80sdp"
                    android:layout_height="@dimen/_80sdp"
                    android:layout_centerHorizontal="true"
                    android:background="@drawable/circle_shape"
                    android:progressDrawable="@drawable/circular_progress_bar" />

                <TextView
                    android:id="@+id/tvTimeCount"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:layout_marginTop="60dp"
                    android:text="00:00"
                    android:textColor="#FFFFFF"
                    android:textSize="29sp"
                    app:customTypeFace="roboto_light" />

如何隐藏视图后面的内容？为什么会出现这种布局？希望能得到一些建议。谢谢！

2个回答
2
“去除对话框的默认背景…”

enter image description here

步骤1：

  • Create a custom_dialog.xml

    <androidx.constraintlayout.widget.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="wrap_content"
 android:layout_marginHorizontal="@dimen/_20sdp"
 android:paddingHorizontal="@dimen/_25sdp"
 android:paddingVertical="@dimen/_25sdp" >

 <androidx.constraintlayout.widget.Guideline
     android:id="@+id/left_vertical_gl"
     android:layout_width="match_parent"
     android:layout_height="0dp"
     android:orientation="vertical"
     app:layout_constraintGuide_percent="0.02" />
<androidx.constraintlayout.widget.Guideline
     android:id="@+id/right_vertical_gl"
     android:layout_width="match_parent"
     android:layout_height="1dp"
     android:orientation="vertical"
     app:layout_constraintGuide_percent="0.98" />


 <androidx.constraintlayout.widget.Guideline
     android:id="@+id/center_horizontal_gl"
     android:layout_width="match_parent"
     android:layout_height="1dp"
     android:orientation="horizontal"
     app:layout_constraintGuide_percent="0.48" />

 <androidx.constraintlayout.widget.Guideline
     android:id="@+id/top_horizontal_gl"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:orientation="horizontal"
     app:layout_constraintGuide_percent="0.044" />


 <androidx.constraintlayout.widget.Guideline
     android:id="@+id/end_horizontal_gl"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:orientation="horizontal"
     app:layout_constraintGuide_percent="0.90" />


 <TextView
     android:id="@+id/textView9"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:fontFamily="@font/segui_black"
     android:text="Are You Sure?"
     android:textColor="#484A67"
     android:textSize="@dimen/_24ssp"
     app:layout_constraintEnd_toEndOf="parent"
     app:layout_constraintStart_toStartOf="parent"
     app:layout_constraintTop_toBottomOf="@+id/top_horizontal_gl" />

 <TextView
     android:id="@+id/textView10"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_marginTop="@dimen/_2sdp"
     android:layout_marginBottom="12dp"
     android:fontFamily="@font/segoe"
     android:gravity="center"
     android:text="Are you sure you want to sign out?"
     android:textColor="#484A67"
     android:textSize="@dimen/_11ssp"
     app:layout_constraintEnd_toStartOf="@+id/right_vertical_gl"
     app:layout_constraintStart_toStartOf="parent"
     app:layout_constraintTop_toBottomOf="@+id/textView9" />

 <TextView
     android:id="@+id/yesTv"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_marginTop="@dimen/_20sdp"
     android:fontFamily="@font/segui_semi_bold"
     android:padding="@dimen/_5sdp"
     android:text="Yes"
     android:textColor="#AD7BFF"
     app:layout_constraintEnd_toStartOf="@+id/right_vertical_gl"
     app:layout_constraintTop_toBottomOf="@+id/textView10" />

 <TextView
     android:id="@+id/noTv"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_marginEnd="@dimen/_30sdp"
     android:fontFamily="@font/segoe"
     android:padding="@dimen/_5sdp"
     android:text="No"
     android:textColor="#6D6E85"
     app:layout_constraintBottom_toBottomOf="@+id/yesTv"
     app:layout_constraintEnd_toStartOf="@+id/yesTv"
     app:layout_constraintTop_toTopOf="@+id/yesTv"
     tools:layout_editor_absoluteX="143dp" />

</androidx.constraintlayout.widget.ConstraintLayout>
步骤 2：
  • 进入您的对话活动
  • 将以下行添加到您的对话代码中

popUpDialog.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))

对话框的完整代码

private lateinit var popUpDialog: Dialog
 private fun buyLifeLineDialog() {
        popUpDialog.setContentView(R.layout.dialog_buy_lifelines)
        popUpDialog.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
        val yesTv = popUpDialog.findViewById<TextView>(R.id.yesTv);
        val noTv = popUpDialog.findViewById<TextView>(R.id.noTv);
        popUpDialog.show()
        yesTv.setOnClickListener {
            if (isCheatLl) {
                mViewModel.buyCheatLifeline(index,lifeLinesPackagesModel)
            }
            else{
                mViewModel.buyRespawnLifeline(index,lifeLinesPackagesModel)
            }
            popUpDialog.dismiss()
        }
        noTv.setOnClickListener {
            popUpDialog.dismiss()
        }

    }
1
我不知道您在应用程序中如何显示此窗口，但我猜测您将其显示为自定义对话框。因此，问题在于您需要为对话框添加透明主题以获得相同的设计，否则您的对话框将使用黑色或白色（取决于您的应用程序主题）填充透明空间。要解决此问题，您需要在theme.xml文件或style.xml中添加以下样式：
 <style name="AlertDialogCustom" parent="@android:style/Theme.Dialog">
    <item name="android:windowBackground">@android:color/transparent</item>
</style>

然后在您的活动中创建一个新的自定义对话框，如下所示：

//Here i will create new dialog with a custom style which I added in Theme.xml
final AlertDialog dialog2 = new AlertDialog.Builder(MainActivity.this,R.style.AlertDialogCustom).create();
        LayoutInflater inflater = getLayoutInflater();
//Here I added my xml file , you can replace test with your own xml file
        View convertView = (View) inflater.inflate(R.layout.test, null);
        dialog2.setView(convertView);
        dialog2.setCancelable(false);
    //Here we tell the dialog to display , you can call show() when click a button
        dialog2.show();

这里是我设计的简单方法，用于实现透明背景

    <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="350dp"
    android:layout_margin="8dp"
    android:background="@android:color/transparent"
    android:clipChildren="false"
    android:clipToPadding="false">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/cl2"
        android:layout_width="350dp"
        android:layout_height="350dp"
        android:layout_marginTop="50dp"
        android:background="#FFFFFF"
        android:clipChildren="false"
        android:clipToPadding="false"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">


        <FrameLayout
            android:id="@+id/progressLayout_frame"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="10dp"
            android:clickable="true"
            android:visibility="visible"
            app:layout_constraintBottom_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <View
                android:id="@+id/bgCircle"
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_gravity="center"
                android:background="@drawable/pers_icon"
                android:visibility="visible" />

            <RelativeLayout
                android:id="@+id/progressLayout"
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:layout_gravity="center"
                android:background="@android:color/transparent"
                android:clickable="true">


            </RelativeLayout>
        </FrameLayout>

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button"
            tools:layout_editor_absoluteX="218dp"
            tools:layout_editor_absoluteY="129dp" />



    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

现在这是最终结果，您可以设计自己的内容。 enter image description here
非常感谢您的时间和给出的适当建议。"popUpDialog.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))" 解决了我的问题 :) - Liya
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接