如何在 ViewPager 上显示 tablayout

Question

如何在我的 ViewPager 上显示 Tablayout。我尝试了很多事情，但没有成功。请查看其显示方式的屏幕截图：

Screenshot

这是我的代码片段：

<LinearLayout
   android:layout_width="match_parent"
   android:orientation="vertical"
   android:layout_height="wrap_content">

     <androidx.viewpager.widget.ViewPager
         android:id="@+id/main_header"
         android:layout_width="match_parent"
         android:layout_height="220dp"
         android:clipToPadding="false"
         android:overScrollMode="ifContentScrolls">
     <com.google.android.material.tabs.TabLayout
         android:id="@+id/tab_layout"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_alignParentBottom="true"
         android:gravity="bottom"
         app:tabBackground="@drawable/tab_selector"
         app:tabGravity="center"
         app:tabIndicatorHeight="0dp"
         app:tabMode="fixed"
         app:tabPaddingBottom="20dp"
         app:tabRippleColor="@color/black" />
   </androidx.viewpager.widget.ViewPager>

</LinearLayout>

任何建议都会有很大帮助！！谢谢

Answer 1

<RelativeLayout 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="220dp">

   <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

  <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabs"
        style="@style/MyStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:tabGravity="fill"
        app:tabMode="fixed" />
</RelativeLayout>

Answer 2

试试这个 xml 并检查你的 xml 你已经在 viewpager

中插入了 tablayout

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="200dp">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabBackground="#DACFCF"
        android:layout_marginTop="10dp"
        app:tabIndicatorHeight="0dp"
        app:tabMode="fixed"
        app:tabPaddingBottom="20dp"
        app:tabRippleColor="#000" />

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/main_header"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false"
        android:overScrollMode="ifContentScrolls"/>


</RelativeLayout>

Answer 3

如果您不介意改用 ContraintLayout：

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:tabBackground="@drawable/tab_selector"
        app:tabGravity="center"
        app:tabIndicatorHeight="0dp"
        app:tabMode="fixed"
        app:tabPaddingBottom="20dp"
        app:tabRippleColor="@color/black" />

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/main_header"
        android:layout_width="0dp"
        android:layout_height="220dp"
        android:clipToPadding="false"
        android:overScrollMode="ifContentScrolls"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tab_layout" />
</androidx.constraintlayout.widget.ConstraintLayout>

Answer 4

如果您想将一个视图放在另一个视图之上，您可以使用 constraintLayout 来非常快速地实现这一点。

举个例子：

<android.support.constraint.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="match_parent">


<Button
    android:id="@+id/button2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="I am view B"
    android:background="#1D1DD5"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_percent=".5"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintWidth_percent=".5" />

<Button
    android:id="@+id/button3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="View B"
    android:background="#ff2222"
    app:layout_constraintBottom_toBottomOf="@+id/button2"
    app:layout_constraintEnd_toEndOf="@+id/button2"
    app:layout_constraintStart_toStartOf="@+id/button2"
    app:layout_constraintTop_toBottomOf="@+id/button2" />

</android.support.constraint.ConstraintLayout>

您的布局将如下所示

您可以更改布局的外观，这只是向您展示的示例 ConstraintLayout - 您可以根据需要随意更改我的示例。

Answer 5

试试这个布局

<RelativeLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent" 
    android:orientation="vertical"
    android:layout_height="wrap_content">
<androidx.viewpager.widget.ViewPager
        android:id="@+id/main_header"
        android:layout_width="match_parent"
        android:layout_height="220dp"
        android:clipToPadding="false"
        android:overScrollMode="ifContentScrolls"/>

    <com.google.android.material.tabs.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="bottom"
            app:tabGravity="center"
            app:tabBackground="@drawable/tab_selector"
            app:tabIndicatorHeight="0dp"
            app:tabMode="fixed"
            app:tabPaddingBottom="20dp"
            app:tabRippleColor="#000000" /></RelativeLayout>

如何在 ViewPager 上显示 tablayout

How to display tablayout over ViewPager

android

android-viewpager

android-tablayout