视图顶部的搜索栏

Question

我正在尝试在 Google Play 音乐应用中的视图顶部实现搜索栏。我在任何地方都找不到答案。我尝试了负 marginBottom 但拇指被切断了。我在 SO SeekBar at the top of the layout in Android 上找到了一个类似的帖子，但没有答案，所以不得不发布这个。请帮忙。以下参考图片来自 Google play music。

 <FrameLayout
    android:id="@+id/rl_pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <ViewPager
        android:id="@+id/album_art_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>


       <SeekBar
        android:id="@+id/songProgressBar1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginRight="-5dp"
        android:layout_marginLeft="-5dp"
        android:layout_gravity="bottom"
        android:layout_marginBottom="-5dp"
        android:progressDrawable="@drawable/apptheme_scrubber_progress_horizontal_holo_dark"
        android:thumb= "@drawable/seekbar_thumb"
        />

    <!--<View
    <!--    android:layout_width="match_parent"
     <!--   android:layout_height="1dp"
    <!--    android:layout_gravity="bottom"
    <!--    android:background="@android:color/transparent"
     <!--   />   // Commenting this as this is not bottom view in my case

</FrameLayout>

底视图：

 <RelativeLayout
    android:id="@+id/player_footer_bg"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"

    android:layout_below="@+id/rl_pager">

    <ImageButton
        android:id="@+id/btnPlay"
        android:layout_width="@dimen/audio_player_btn_play_dimensions"
        android:layout_height="@dimen/audio_player_btn_play_dimensions"
        android:layout_marginBottom="10dp"
        android:background="@null"
        android:contentDescription="@string/play"
        android:src="@drawable/play"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true" />


    <ImageButton
        android:id="@+id/btnNext"
        android:layout_width="@dimen/audio_player_btn_play_dimensions"
        android:layout_height="@dimen/audio_player_btn_play_dimensions"
        android:background="@null"
        android:contentDescription="@string/next"
        android:src="@drawable/ic_skip_white"
        android:focusable="true"
        android:scaleType="fitCenter"
        android:layout_alignTop="@+id/btnPlay"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_marginRight="60dp"
        android:layout_marginEnd="60dp" />


    <ImageButton
        android:id="@+id/btnPrevious"
        android:layout_width="@dimen/audio_player_btn_play_dimensions"
        android:layout_height="@dimen/audio_player_btn_play_dimensions"
        android:background="@null"
        android:contentDescription="@string/next"
        android:src="@drawable/ic_prev_white"
        android:focusable="true"
        android:scaleType="fitCenter"
        android:layout_alignTop="@+id/btnNext"
         android:layout_marginLeft="60dp"
        android:layout_marginStart="60dp" />


</RelativeLayout>

Answer 1

我已经快速敲定了一个布局，让您知道如何去做。我使用了一个简单的View，在布局的顶部和底部都有背景颜色，因此您可以清楚地看到它的工作原理，SeekBar 与它们重叠。然后，您可以将顶部的 View 替换为您的 ViewPager，并将底部的 View 替换为屏幕底部所需的任何内容。请注意，内部FrameLayout 上的layout_height 是负数layout_marginBottom 的两倍。这些值并不重要，只要它们足够大以适合您的内容并且负边距是您的一半 layout_height （例如，您也可以设置 layout_height="50dp" 和 layout_marginBottom="-25dp". on the FrameLayout`，它仍然会看起来不错，尽管您不希望它们比必要的大太多，因为这会导致重叠视图不必要的过度绘制）。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                tools:context=".MyActivity">

    <View
        android:id="@+id/album_art_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/bottomView"
        android:background="#f00"/>

    <View
        android:id="@+id/bottomView"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:background="#00f"/>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_above="@id/bottomView"
        android:layout_alignBottom="@id/album_art_viewpager"
        android:layout_marginBottom="-20dp">

        <SeekBar
            android:id="@+id/songProgressBar1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            />
    </FrameLayout>

</RelativeLayout>

这是一个屏幕截图，向您展示它的外观：