搜索栏上的顶视图 [英] Seekbar on top of view

查看：224
本文介绍了搜索栏上的顶视图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想实现在视图顶部的搜索栏像在谷歌Play音乐应用。我找不到答案这个anywhere.I试图负marginBottom但拇指被截断。我发现SO <一个类似的职位href=\"http://stackoverflow.com/questions/20952966/seekbar-at-the-top-of-the-layout-in-android\">SeekBar在Android的，但没有回答布局的顶部，这样不得不张贴此。请帮忙。从下面谷歌播放音乐的参考图像。

参考图像 

 ＆LT;的FrameLayout
    机器人：ID =@ + ID / rl_pager
    机器人：layout_width =match_parent
    机器人：layout_height =match_parent
    ＆GT;    ＆LT; ViewPager
        机器人：ID =@ + ID / album_art_viewpager
        机器人：layout_width =match_parent
        机器人：layout_height =match_parent/＆GT;
       ＆LT;搜索栏
        机器人：ID =@ + ID / songProgressBar1
        机器人：layout_width =FILL_PARENT
        机器人：layout_height =WRAP_CONTENT
        机器人：layout_marginRight = -  5DP
        机器人：layout_marginLeft = -  5DP
        机器人：layout_gravity =底
        机器人：layout_marginBottom = -  5DP
        机器人：progressDrawable =@绘制/ apptheme_scrubber_progress_horizo​​ntal_holo_dark
        机器人：拇指=@绘制/ seekbar_thumb
        /＆GT;    ＆LT;！ - ＆LT;查看
    ！＆LT;  - 机器人：layout_width =match_parent
     ＆LT;  - 安卓！layout_height =1DP
    ＆LT;  - 安卓！layout_gravity =底
    ＆LT;  - 安卓！后台=@机器人：彩色/透明
     ＆所述;！ -  /＆GT; //这个评论，因为这不是我的情况仰视图＆LT; /＆的FrameLayout GT;

底视图：

 ＆LT; RelativeLayout的
    机器人：ID =@ + ID / player_footer_bg
    机器人：layout_width =match_parent
    机器人：layout_height =WRAP_CONTENT
    机器人：layout_alignParentBottom =真    机器人：layout_below =@ + ID / rl_pager＆GT;    ＆LT;的ImageButton
        机器人：ID =@ + ID / btnPlay
        机器人：layout_width =@扪/ audio_player_btn_play_dimensions
        机器人：layout_height =@扪/ audio_player_btn_play_dimensions
        机器人：layout_marginBottom =10dp
        机器人：背景=@空
        机器人：contentDescription =@字符串/播放
        机器人：SRC =@绘制/播放
        机器人：layout_alignParentBottom =真
        机器人：layout_centerHorizo​​ntal =真/＆GT;
    ＆LT;的ImageButton
        机器人：ID =@ + ID / btnNext
        机器人：layout_width =@扪/ audio_player_btn_play_dimensions
        机器人：layout_height =@扪/ audio_player_btn_play_dimensions
        机器人：背景=@空
        机器人：contentDescription =@字符串/下一个
        机器人：SRC =@绘制/ ic_skip_white
        机器人：可聚焦=真
        机器人：scaleType =fitCenter
        机器人：layout_alignTop =@ + ID / btnPlay
        机器人：layout_alignParentRight =真
        机器人：layout_alignParentEnd =真
        机器人：layout_marginRight =60dp
        机器人：layout_marginEnd =60dp/＆GT;
    ＆LT;的ImageButton
        机器人：ID =@ + ID / BTN previous
        机器人：layout_width =@扪/ audio_player_btn_play_dimensions
        机器人：layout_height =@扪/ audio_player_btn_play_dimensions
        机器人：背景=@空
        机器人：contentDescription =@字符串/下一个
        机器人：SRC =@绘制/ IC_ prev_white
        机器人：可聚焦=真
        机器人：scaleType =fitCenter
        机器人：layout_alignTop =@ + ID / btnNext
         机器人：layout_marginLeft =60dp
        机器人：layout_marginStart =60dp/＆GT;
＆LT; / RelativeLayout的＆GT;


解决方案

我赶紧敲了一个布局，给你一个想法如何做到这一点。我用一个简单的查看在顶部背景颜色和布局的底部，这样你就可以清楚地看到它的工作原理，以及搜索栏重叠他们。然后，您可以替换查看在与顶部的 ViewPager 并在底部用任何你想要在一个在屏幕的底部。请注意， layout_height 在内的FrameLayout 是双负 layout_marginBottom 。这些值不太多，只要他们足够大，以适应您的内容和切缘阴性是一半的 layout_height （例如，你也可以同样设置<$多大关系C $ C> layout_height =50dp和 layout_marginBottom = - 25dp关于 FrameLayout`，它仍然会看的权利，但你不想让他们比必要的更大的作为，将创建的重叠观点不必要的透支）。

 ＆LT;的RelativeLayout的xmlns：机器人=htt​​p://schemas.android.com/apk/res/android
                的xmlns：工具=htt​​p://schemas.android.com/tool​​s
                机器人：layout_width =match_parent
                机器人：layout_height =match_parent
                工具：上下文=MyActivity。＆GT;    ＆LT;查看
        机器人：ID =@ + ID / album_art_viewpager
        机器人：layout_width =match_parent
        机器人：layout_height =match_parent
        机器人：layout_above =@ ID / bottomView
        机器人：背景=＃F00/＆GT;    ＆LT;查看
        机器人：ID =@ + ID / bottomView
        机器人：layout_width =match_parent
        机器人：layout_height =60dp
        机器人：layout_alignParentBottom =真
        机器人：背景=＃00F/＆GT;    ＆LT;的FrameLayout
        机器人：layout_width =match_parent
        机器人：layout_height =40dp
        机器人：layout_above =@ ID / bottomView
        机器人：layout_alignBottom =@ ID / album_art_viewpager
        机器人：layout_marginBottom = -  20dp＆GT;        ＆LT;搜索栏
            机器人：ID =@ + ID / songProgressBar1
            机器人：layout_width =FILL_PARENT
            机器人：layout_height =WRAP_CONTENT
            机器人：layout_gravity =center_vertical
            /＆GT;
    ＆LT; /＆的FrameLayout GT;＆LT; / RelativeLayout的＆GT;

下面是截图向​​您展示它的外观：

I am trying to implement a seekbar on top of a view like in Google Play Music app. I couldn't find answer for this anywhere.I tried negative marginBottom but the thumb was getting cut off. I found a similar post on SO SeekBar at the top of the layout in Android but with no answer so had to post this. Please help. Reference image from Google play music below.

 <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>

Bottom View :

 <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>

解决方案

I've quickly knocked up a layout to give you an idea how to do it. I've used a simple View with a background colour at the top and at the bottom of the layout so you can clearly see it works, and the SeekBar overlaps them both. You can then replace the View at the top with your ViewPager and the one at the bottom with whatever you want at the bottom of the screen. Note that the layout_height on the inner FrameLayout is double the negative layout_marginBottom. These values don't matter too much as long as they are big enough to fit your contents and the negative margin is half your layout_height (e.g. you could just as well set layout_height="50dp" and layout_marginBottom="-25dp". on theFrameLayout` and it will still look right, although you don't want them much bigger than necessary as that would create unnecessary overdrawing of the overlapping views).

<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>

Here's a screenshot to show you how it looks:

这篇关于搜索栏上的顶视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
移动开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆