Frameview下的Textview会被另一个图标覆盖

Question

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

我为此使用了framelayout。这些图标很合适，但是我怎么也可以合适呢？我尝试了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

有几种设计此布局的方法。其中一个正在使用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 2

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

Answer 3

代替在textview中使用Button和framelayout，应使用BottomNavigationView

首先，您必须在[BottomNavigationView中添加设计支持库。

build.gradle

然后这样使用

implementation 'com.google.android.material:material:1.2.0-alpha02'

有关更多信息，请检查

<com.google.android.material.bottomnavigation.BottomNavigationView
      android:id="@+id/bottom_navigation"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_gravity="bottom"
      android:background="@color/colorPrimary"
      app:itemIconTint="@color/white"
      app:itemTextColor="@color/white"
      app:menu="@menu/bottom_navigation_menu" />

Answer 4

有几种设计此布局的方法。其中一个是使用LinearLayout。签出此解决方案。

Bottom Navigation

Answer 5

您为什么不使用底部导航？那是一个简单的方法。Bottom Navigation