android 进度条SeekBar显示不全和Framlayout元素遮盖问题

李慕华 2010-10-29 06:21:47
【问题1】最近在做一个android的音乐播放器,其基本功能已经实现了,但是界面不怎么好看。
界面美化时,遇到了两个小问题,第一个就是进度条显示不全,如图所示

圆形的拖动钮下面未能完整显示。圆形拖动钮是15*15像素的png图片
【个人分析原因】可能是因为圆形拖动钮的像素是15px,而我设置的SeekBar的layout_height="10px"
由此导致圆形拖动钮显示不完整。
【尝试解决办法】
1.修改SeekBar的layout_height="15px".
结果是:圆形拖动钮显示完整,进度条高度与圆形拖动钮直径相同,显示结果:

虽然此效果看起来不错,但是进度条太宽了,与整体界面不协调
2.在SeekBar中添加android:paddingBottom="10px"
结果是:圆形拖动钮显示完整,进度条看不见。。。-_-!又失败了
3.尝试各种修改,均未能达到理想状态

【问题2】在主界面中,我使用了一个继承Gallery的类来横向排布展示音乐专辑封面,并实现了倒影效果,我的进度条和播放等按钮都是在倒影上显示。我使用的是FrameLayout,FrameLayout可以使元素层叠显示。但是出现了一个问题,当滑动播放按钮周围的倒影时,倒影会和原图片一样有响应动作,这样就会引起误操作。。。
【个人分析原因】FrameLayout允许元素叠放,只有后面的元素覆盖的部分可以完成对被遮盖元素部分的响应事件,未被遮盖的部分依旧可以响应。
【尝试解决办法】
1.在进度条和按钮所在区域添加一个透明的Image,遮住专辑封面的倒影同时也能显示出来倒影效果
结果是:倒影依旧响应拖动的动作
2.改为ImageButton,依旧用透明图片做背景
结果是:同上

【综述】这两个小问题纠结了我快一周了,和周围的同学讨论多次,但是仍旧没有好的解决办法。希望高手和菜鸟们能帮帮我,点化我这个冥顽不灵的家伙……

【部分源码】
seekbar.xml 用来布局进度条及音乐时间
<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout android:id="@+id/bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="5px"
android:paddingRight="5px"
android:paddingTop="10px"
xmlns:android="http://schemas.android.com/apk/res/android">

<SeekBar android:id="@+id/progress"
style="?android:attr/progressBarStyleHorizontal"
android:progressDrawable="@layout/seekbar_style"
android:thumb="@layout/thumb"
android:layout_width="fill_parent"
android:layout_height="10px"
android:paddingLeft="10px"
android:paddingRight="10px"/>

<TextView android:id="@+id/current"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/progress"
android:layout_alignParentLeft="true"
android:padding="10px"
xmlns:android="http://schemas.android.com/apk/res/android"/>

<TextView android:id="@+id/total"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/progress"
android:layout_alignParentRight="true"
android:padding="10px"
xmlns:android="http://schemas.android.com/apk/res/android"/>

</RelativeLayout>

seekbar_style.xml 用于配置进度条形状颜色等
<?xml version="1.0" encoding="UTF-8"?>     
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item android:id="@android:id/background"
android:paddingTop="3px"
android:paddingBottom="3px">
<shape>
<corners android:radius="10dip" />
<gradient
android:startColor="#ffffffff"
android:centerColor="#ff000000"
android:endColor="#ff808A87"
android:centerY="0.45"
android:angle="270"/>
</shape>
</item>

<item android:id="@android:id/progress"
android:paddingTop="3px"
android:paddingBottom="3px" >
<clip>
<shape>
<corners android:radius="10dip" />
<gradient
android:startColor="#ffffffff"
android:centerColor="#ffFFFF00"
android:endColor="#ffAABD00"
android:centerY="0.45"
android:angle="270"/>
</shape>
</clip>
</item>
</layer-list>

thumb.xml 用于圆形拖动钮的配置,seekbar_down为15*15像素的圆形拖动钮图片文件名
<?xml version="1.0" encoding="UTF-8"?>     
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 按下状态 -->
<item
android:state_pressed="true"
android:drawable="@drawable/seekbar_down" />

<!-- 普通无焦点状态 -->
<item
android:state_focused="false"
android:state_pressed="false"
android:drawable="@drawable/seekbar_down" />
</selector>


主界面布局就不发了,实在是太长了。FrameLayout的问题,高手给我个解决思路就行了
-------------------------------------------!!!万谢不辞!!!------------------------------------------
...全文
6075 20 打赏 收藏 转发到动态 举报
写回复
用AI写文章
20 条回复
切换为时间正序
请发表友善的回复…
发表回复
a110pple 2013-04-16
  • 打赏
  • 举报
回复
这个不知道啥意思,但是这样用貌似可以啊 android:thumbOffset="0dp" 也行 试试
寻乐记 2012-04-28
  • 打赏
  • 举报
回复
我也遇到了上面的问题哎,,,想把进度条调笑,总是调不了,,在不同的手机上进度条不一样。。。
QQ515311445 2011-11-11
  • 打赏
  • 举报
回复
[Quote=引用 15 楼 iss0131 的回复:]
我这边遇到的一个问题是,如果滚动条的背景换成是图片,background 和progress 两个图片总是没法重叠啊。
[/Quote]
我也碰到了,主要是background显示不全,progress如果加了clip就显示全了,导致无法重叠,如果不用clip也会显示不全,但是可以重叠,跟背景一样显示不全
微笑浅浅 2011-06-01
  • 打赏
  • 举报
回复
我这边遇到的一个问题是,如果滚动条的背景换成是图片,background 和progress 两个图片总是没法重叠啊。
微笑浅浅 2011-06-01
  • 打赏
  • 举报
回复
[Quote=引用 10 楼 zhouyonghaha 的回复:]
这个帖子是错误的,这种是碰巧实现的,真正的做法是layout_height为warp,再设下minHeight和maxHeight就可以了
[/Quote]
恩,设置一下maxHeight就行了,这个给力~~~~
1001液 2011-02-23
  • 打赏
  • 举报
回复
看到大家的思想,真有如醍醐灌顶!!

受益匪浅!!!
cambriage 2010-12-15
  • 打赏
  • 举报
回复
[Quote=引用 10 楼 zhouyonghaha 的回复:]
这个帖子是错误的,这种是碰巧实现的,真正的做法是layout_height为warp,再设下minHeight和maxHeight就可以了
[/Quote]

这个是比较正确的做法。。。。
zhouyonghaha 2010-12-03
  • 打赏
  • 举报
回复
这个帖子是错误的,这种是碰巧实现的,真正的做法是layout_height为warp,再设下minHeight和maxHeight就可以了
siyulanyu 2010-11-28
  • 打赏
  • 举报
回复
刚好用得上 谢谢了
纠结的木棉花 2010-11-26
  • 打赏
  • 举报
回复
这个帖子真的很不错!
Zhang_Neng 2010-11-26
  • 打赏
  • 举报
回复
LZ,我看你解决的直接原因是改了图片吧,我下载你的图片看了下,图片下面好像多了些空白,而上面没有空白;直接是圆圈的边。
ameyume 2010-10-30
  • 打赏
  • 举报
回复
帮顶,seekbar确实不好调节,滑块总是偏下。同时调节android:paddingTop和android:paddingBottom试试。
ameyume 2010-10-30
  • 打赏
  • 举报
回复
[Quote=引用 2 楼 yylzyz1990 的回复:]
引用 1 楼 ameyume 的回复:

帮顶,seekbar确实不好调节,滑块总是偏下。同时调节android:paddingTop和android:paddingBottom试试。


谢谢解答!进度条已经修改好了~~~
[/Quote]
恭喜,能否说说如何解决的?我的seekbar的滑块也搞不定。
李慕华 2010-10-30
  • 打赏
  • 举报
回复
[Quote=引用 1 楼 ameyume 的回复:]

帮顶,seekbar确实不好调节,滑块总是偏下。同时调节android:paddingTop和android:paddingBottom试试。
[/Quote]

谢谢解答!进度条已经修改好了~~~

ameyume 2010-10-30
  • 打赏
  • 举报
回复
非常感谢。看来找一个通用的解决方法还是不容易,那就先按照楼主说的这样解决,我也只想到这一种方法。
李慕华 2010-10-30
  • 打赏
  • 举报
回复
虽然我的进度条滑块的显示问题解决了,但是我觉得我用的方法并不能完美的实现任意状态下的进度条。我的滑块的大小决定了进度条的宽窄。
总结来说:根据滑块的像素值,对seekbar上部和下部区域进行适当填充,未填充部分即是显示出来的进度条。
完美的解决方案是什么呢?
李慕华 2010-10-30
  • 打赏
  • 举报
回复
[Quote=引用 3 楼 ameyume 的回复:]

引用 2 楼 yylzyz1990 的回复:
引用 1 楼 ameyume 的回复:

帮顶,seekbar确实不好调节,滑块总是偏下。同时调节android:paddingTop和android:paddingBottom试试。


谢谢解答!进度条已经修改好了~~~

恭喜,能否说说如何解决的?我的seekbar的滑块也搞不定。
[/Quote]

好的~
我修改了seekbar的layout_height高度,原先为10px,后来改为22dip(反正这个高度最好要大于滑块的高度,至于多少可以根据需要修改)
然后添加了android:paddingTop和android:paddingBottom,并设定好填充的数值
下面两句任加一句都行android:layout_centerInParent="true" //父容器中央
android:layout_centerHorizontal="true" //水平中央
然后调节android:paddingTop和android:paddingBottom的值,在layout中查看或者直接运行模拟器,然后直到合适位置即可
paddingTop和paddingBottom的值影响进度条的宽窄,而滑块的大小形状一定要选的合理
我的滑块
注意:滑块在xml里无法改变滑块的大小(我暂时还不知道改变其大小的方法,我是用photoshop修改图片的)
效果如图

修改后的seekbar.xml
<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout android:id="@+id/bar"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="5dip"
android:paddingRight="5dip"
xmlns:android="http://schemas.android.com/apk/res/android">

<SeekBar android:id="@+id/progress"
style="?android:attr/progressBarStyleHorizontal"
android:progressDrawable="@layout/seekbar_style"
android:thumb="@layout/thumb"
android:layout_width="fill_parent"
android:layout_height="22dip"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:paddingTop="2dip"
android:paddingBottom="6dip"
android:layout_marginLeft="20dip"
android:layout_marginRight="20dip"/>

<TextView android:id="@+id/current"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/progress"
android:layout_marginLeft="20dip"
android:textSize="12dip"
xmlns:android="http://schemas.android.com/apk/res/android"/>

<TextView android:id="@+id/total"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/progress"
android:layout_alignParentRight="true"
android:layout_marginRight="20dip"
android:textSize="12dip"
xmlns:android="http://schemas.android.com/apk/res/android"/>
</RelativeLayout>

80,362

社区成员

发帖
与我相关
我的任务
社区描述
移动平台 Android
androidandroid-studioandroidx 技术论坛(原bbs)
社区管理员
  • Android
  • yechaoa
  • 失落夏天
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧