打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

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



【问题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/HTML code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?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/HTML code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?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/HTML code
1
2
3
4
5
6
7
8
9
10
11
12
13
<?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
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
Android SeekBar
音乐播放之进度条 - 自定义
Android应用开发笔记(10):制作自定义背景Button按钮、自定义形状Button的全攻略
Android开发
2.3.9 RatingBar(星级评分条) | 菜鸟教程
状态栏大美化,显示运营商,时间居中。
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服