Android如何在按钮顶部设置视图而不会导致灰色背景

时间:2019-06-14 00:22:35

标签: android xml android-layout

我正在尝试实现一种布局,其中在Button的顶部具有ImageView和TextView。

目标: my target

我尝试使用“ android:elevation”或“ android:translationZ”实现此目的,但结果确实令人失望,视图可能位于最上方,但背景也会有灰色,我不知道如何摆脱。

我得到的是:result

尝试使用“ android:background =“ @ android:color / transparent”“,但无效。

我的布局:

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="@dimen/table_page_turn_item_height">

<Button
    android:id="@+id/turn_btn_voice"
    android:layout_width="@dimen/table_page_turn_btn_width"
    android:layout_height="@dimen/table_page_turn_btn_height"
    app:layout_constraintTop_toBottomOf="@id/turn_text_name"
    app:layout_constraintRight_toRightOf="parent"
    android:gravity="center"       
    android:background="@drawable/rounded_corner_generic_light_blue_fill" 
    />

<ImageView
    android:id="@+id/turn_play_icon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="@id/turn_btn_voice"
    app:layout_constraintTop_toTopOf="@id/turn_btn_voice"
    app:layout_constraintBottom_toBottomOf="@id/turn_btn_voice"
    android:translationZ="2dp"
    android:src="@drawable/ic_play_arrow_24px"
    android:background="@android:color/transparent"
    />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toTopOf="@id/turn_btn_voice"
    app:layout_constraintBottom_toBottomOf="@id/turn_btn_voice"
    app:layout_constraintLeft_toRightOf="@id/turn_play_icon"
    android:layout_marginStart="20dp"
    android:elevation="2dp"
    android:textColor="@color/colorEugraBlue"
    android:text="1:30"
    android:textSize="@dimen/font_size_ctrl_large"/>

</android.support.constraint.ConstraintLayout>

谢谢!

编辑:尝试将高程设置为1,则ImageView仍将隐藏在Button后面,只留下灰色边框。

左侧的灰色正方形是标高为1的视图 Elevation 1

3 个答案:

答案 0 :(得分:1)

Button的海拔高度高于其他两个视图。对于ImageView,要高1dp。因此,只需将ImageView的高程设置为相同的高程-1dp就像这样:

<ImageView
    android:id="@+id/turn_play_icon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="@id/turn_btn_voice"
    app:layout_constraintTop_toTopOf="@id/turn_btn_voice"
    app:layout_constraintBottom_toBottomOf="@id/turn_btn_voice"

    android:elevation="1dp"

    android:src="@drawable/ic_play_arrow_24px"
    android:background="@android:color/transparent"/>

我编写的模拟应用程序UI随高度变化看起来不错。 IDE或仿真器的预览窗格可能与实际的应用程序UI不同:

Don't get confused with the Preview Pane or Emulator and the real app UI

答案 1 :(得分:0)

不使用海拔 使用此

            Microsoft.Office.Interop.Excel._Application app = new Microsoft.Office.Interop.Excel.Application();
            Microsoft.Office.Interop.Excel._Workbook workbook = app.Workbooks.Add(Type.Missing);
            Microsoft.Office.Interop.Excel._Worksheet worksheet = null;

            worksheet = workbook.Sheets["Sheet1"];
            worksheet = workbook.ActiveSheet;
            worksheet.Name = "Exported from gridview";
            for (int i = 1; i < dataGridViewOut.Columns.Count + 1; i++)
            {
                worksheet.Cells[1, i] = dataGridViewOut.Columns[i - 1].HeaderText;
            }

            for (int i = 0; i < dataGridViewOut.Rows.Count - 1; i++)
            {
                (worksheet.Rows[i + 2 + ":" + i + 2, System.Reflection.Missing.Value] as Microsoft.Office.Interop.Excel.Range).NumberFormat = "@";
                for (int j = 0; j < dataGridViewOut.Columns.Count; j++)
                {
                    worksheet.Cells[i + 2, j + 1] = dataGridViewOut.Rows[i].Cells[j].Value.ToString();
                }
            }
            var saveFileDialoge = new SaveFileDialog();
            saveFileDialoge.FileName = "TimeOut";
            saveFileDialoge.DefaultExt = ".xlsx";
            if (saveFileDialoge.ShowDialog() == DialogResult.OK)
            {
                workbook.SaveAs(saveFileDialoge.FileName, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Microsoft.Office.Interop.Excel.XlSaveAsAccessMode.xlExclusive, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing);
                app.Visible = true;
            }

结论:Android布局顺序是向后的。如果要将小部件A放在小部件B的顶部,只需在XML上小部件B的下面添加小部件A

答案 2 :(得分:0)

我想这实际上不是问题,Android Studio预览面板中的内容令人困惑,任何高程大于1的视图都将具有灰色背景,但实际上在模拟器上就可以了。

在这种情况下,我将标高设置为5,得到了所需的布局。高度小于或等于2会将视图隐藏在按钮后面。

所以我假设默认情况下按钮的高度为2。