framelayout下的Textview用另一个图标覆盖

Question

我希望我的布局看起来像这样：

我为此使用了框架布局。图标很合适，但我怎样才能让文字也合适呢？我试过 textview 但它覆盖了。任何帮助将不胜感激。

到目前为止，这是我的代码：

    <FrameLayout
        android:id="@+id/fl_footer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#565858"
        android:padding="20dp">

        <Button
            android:id="@+id/button1"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:layout_gravity="center"
            android:background="@drawable/ic_wallpaper_black_24dp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="SET"
            android:textColor="@color/white"
            ></TextView>

        <Button
            android:id="@+id/button2"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:layout_gravity="end|center_vertical"

            android:background="@drawable/ic_share_black_24dp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/white"
            android:text="SHARE"/>

        <ImageButton
            android:id="@+id/downloadimg"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:layout_gravity="start|center_vertical"
            android:background="@drawable/ic_file_download_black_24dp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/white"
            android:text="DOWNLOAD"/>

    </FrameLayout>

Answer 1

您可以简单地围绕每个组件（button 和 textview）环绕一个垂直方向的 LinearLayout。一种更简单的方法是使用 Android Studio 提供的自动生成的布局开始您的项目。

Answer 2

有多种方法可以设计此布局。其中一个正在使用 ConstraintLayout。您可以试试这个解决方案。

<androidx.constraintlayout.widget.ConstraintLayout android:id="@+id/fl_footer"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="#565858"
    android:paddingTop="20dp"
    android:paddingBottom="20dp"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <Button
        android:id="@+id/button1"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:layout_gravity="center"
        app:layout_constraintStart_toStartOf="@id/tvSet"
        app:layout_constraintEnd_toEndOf="@id/tvSet"
        app:layout_constraintTop_toTopOf="parent"
        android:background="@drawable/ic_wallpaper_black_24dp" />

    <TextView
        android:id="@+id/tvSet"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="SET"
        android:textColor="@color/white"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/button1"/>


    <Button
        android:id="@+id/button2"
        android:layout_width="35dp"
        android:layout_height="35dp"
        app:layout_constraintEnd_toEndOf="@id/tvShare"
        app:layout_constraintStart_toStartOf="@id/tvShare"
        app:layout_constraintTop_toTopOf="parent"
        android:background="@drawable/ic_share_black_24dp"/>

    <TextView
        android:id="@+id/tvShare"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/white"
        android:text="SHARE"
        android:layout_marginEnd="20dp"
        app:layout_constraintTop_toBottomOf="@id/button2"
        app:layout_constraintEnd_toEndOf="parent"/>

    <ImageButton
        android:id="@+id/downloadimg"
        android:layout_width="35dp"
        android:layout_height="35dp"
        app:layout_constraintStart_toStartOf="@id/tvDownload"
        app:layout_constraintEnd_toEndOf="@id/tvDownload"
        app:layout_constraintTop_toTopOf="parent"
        android:background="@drawable/ic_file_download_black_24dp" />

    <TextView
        android:id="@+id/tvDownload"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/white"
        android:text="DOWNLOAD"
        android:layout_marginStart="20dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/downloadimg"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 3

有多种方法可以设计此布局。其中一个是使用 LinearLayout。查看此解决方案。

 <LinearLayout
    android:id="@+id/fl_footer"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="#565858"
    android:padding="20dp">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical"
        android:gravity="center">

        <Button
            android:id="@+id/button1"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:layout_gravity="center"
            android:background="@drawable/ic_wallpaper_black_24dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="SET"
            android:textColor="@color/white" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical"
        android:gravity="center">

        <ImageView
            android:id="@+id/button2"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:background="@drawable/ic_share_black_24dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="SHARE"
            android:textColor="@color/white" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical"
        android:gravity="center">


        <ImageView
            android:id="@+id/downloadimg"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:background="@drawable/ic_file_download_black_24dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="DOWNLOAD"
            android:textColor="@color/white" />

    </LinearLayout>

</LinearLayout>

framelayout下的Textview用另一个图标覆盖

Textview under framelayout overrides with another icons

android

textview

android-layout

android-framelayout