标签： Android SeekBar

系统自带的SeekBar真是太难看了，不能容忍！ 只能自己做了,先来张效果图

第1个Seekbar 背景是颜色，thumb是图片，上代码：

1.     <SeekBar
2.         android:id=“@+id/sb_detail_play_progress”
3.         android:layout_width=“fill_parent”
4.         android:layout_height=“wrap_content”
5.         android:layout_centerVertical=“true”
6.         android:layout_gravity=“center”
7.         android:paddingLeft=“15.0dip”
8.         android:paddingRight=“15.0dip”
9.         android:progressDrawable=“@drawable/progress_holo_light”
10.         android:thumb=“@drawable/detail_icon_schedule_ball” />

drawable/po_seekbar.xml:

2. <?xml version=”1.0″ encoding=”utf-8″?>
3. <layer-list
4. xmlns:android=“http://schemas.android.com/apk/res/android”>
5. <item android:id=“@*android:id/background”>
6. <shape>
7. <solid android:color=“#ff51495e” />
8. </shape>
9. </item>
10. <item android:id=“@*android:id/secondaryProgress”>
11. <clip>
12. <shape>
13. <solid android:color=“#ff51495e” />
14. </shape>
15. </clip>
16. </item>
17. <item android:id=“@*android:id/progress”>
18. <clip>
19. <shape>
20. <solid android:color=“#ff996dfe” />
21. </shape>
22. </clip>
23. </item>
24. </layer-list>

drawable/seekbar_thumb.xml:

1.  <?xml version=”1.0″ encoding=”utf-8″?>
3. <selector
5. xmlns:android=“http://schemas.android.com/apk/res/android”>
7. <item android:state_focused=“true” android:state_pressed=“false” android:drawable=“@drawable/seekbar_thumb_normal” />
9. <item android:state_focused=“true” android:state_pressed=“true” android:drawable=“@drawable/seekbar_thumb_pressed” />
11. <item android:state_focused=“false” android:state_pressed=“true” android:drawable=“@drawable/seekbar_thumb_pressed” />
13. <item android:drawable=“@drawable/seekbar_thumb_normal” />
15. </selector>

1. 改变大小
2. 如何改变seekbar的厚度呢，是没有属性能直接修改的，得通过重新定义样式：

    

3. <SeekBar
4. android:layout_width="match_parent"
5. android:layout_height="wrap_content"
6. android:layout_marginTop="20dp"
7. android:thumb="@drawable/seek"
8. android:progressDrawable="@drawable/seek_style"
9. />
11. <?xml version="1.0" encoding="utf-8"?>
12. <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
14. <size
15. android:width="20dp"
16. android:height="20dp"
17. />
18. <solid android:color="#60f0"/>
19. </shape>
20. progressDrawable 修改进度条的样式： 

21. <?xml version="1.0" encoding="utf-8"?>
22. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
24. <item android:id="@android:id/background">
25. <shape>
27. <solid android:color="#999"/>
28. </shape>
29. </item>
31. <item android:id="@android:id/secondaryProgress">
32. <clip>
33. <shape>
34. <corners android:radius="5dip" />
35. <gradient
36. android:startColor="#80ffd300"
37. android:centerColor="#80ffb600"
38. android:centerY="0.75"
39. android:endColor="#a0ffcb00"
40. android:angle="270"
41. />
42. </shape>
43. </clip>
44. </item>
46. <item android:id="@android:id/progress">
47. <clip>
48. <shape>
50. <solid android:color="#600f"/>
51. </shape>
52. </clip>
53. </item>
55. thumb 修改可拖拽的圆的样式： 

1、实现功能 签到的progress 支持气泡指示器
效果图

2、实现代码
（1）重写SeekBar禁止拖动
package com.example.demo;
import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.SeekBar;

public class MySeekBar extends SeekBar{

public MySeekBar(Context context) {
super(context,null);
}

public MySeekBar(Context context, AttributeSet attrs) {
super(context, attrs, 0);

}

public MySeekBar(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);

}

@Override
public boolean onTouchEvent(MotionEvent event) {
// TODO Auto-generated method stub
// 原来是要将TouchEvent传递下去的,我们不让它传递下去就行了
// return super.onTouchEvent(event);
return false;
}

}

（2）mainActivity
package com.example.demo;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class MainActivity extends Activity {
private MySeekBar mySeekBar;
private int speed = 0;//进度条每次点击
private int lin_speed = 0;//上面的描述文字的位置
private LinearLayout ll_des;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mySeekBar = (MySeekBar) findViewById(R.id.seekbar);
Button btn_add = (Button) findViewById(R.id.btn_add);
mySeekBar.setProgress(2);
ll_des = (LinearLayout) findViewById(R.id.ll_des);

btn_add.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
runOnUiThread(new Runnable() {
@Override
public void run() {
if (speed == 2) {
speed = 0;
}
if (speed < 68) {
if (speed == 60) {
speed = speed + 10 – 2;//进度条每次前进十个位置
} else {
speed = speed + 10;//进度条每次前进十个位置
}
if (speed <= 60) {
lin_speed = lin_speed + 120;//组件根据实际组件长宽算出来的
}
LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) ll_des.getLayoutParams();
lp.setMargins(lin_speed, 0, 0, 0);
ll_des.setLayoutParams(lp);
mySeekBar.setProgress(speed);
}
}
});
}
});
}

}
（3）布局
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:layout_gravity=”center_vertical”
android:layout_margin=”30dp”
android:orientation=”vertical”>

<Button
android:id=”@+id/btn_add”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”加” />

<LinearLayout
android:layout_width=”match_parent”
android:layout_height=”80dp”
android:orientation=”vertical”>

<LinearLayout
android:id=”@+id/ll_des”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_marginBottom=”4dp”
android:gravity=”center”
android:orientation=”vertical”>

<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:background=”@drawable/top_img”
android:paddingBottom=”2dp”
android:paddingLeft=”6dp”
android:paddingRight=”6dp”
android:paddingTop=”2dp”
android:text=”累积18积分”
android:textColor=”#ffffffff”
android:textSize=”9sp” />

<ImageView
android:layout_width=”12dp”
android:layout_height=”wrap_content”
android:src=”@drawable/san_jiao” />
</LinearLayout>

<RelativeLayout
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”>

<ImageView
android:id=”@+id/im_gif”
android:layout_width=”20dp”
android:layout_height=”20dp”
android:layout_marginLeft=”10dp”
android:src=”@drawable/m”
android:visibility=”gone” />

</RelativeLayout>

<com.example.demo.MySeekBar
android:id=”@+id/seekbar”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_gravity=”center”
android:layout_marginTop=”6dp”
android:max=”70″
android:progressDrawable=”@drawable/ddd”
android:thumb=”@drawable/m” />

<LinearLayout
android:layout_width=”match_parent”
android:layout_height=”wrap_content”>

<TextView
style=”@style/myText”
android:text=”@string/_1″ />

<TextView
style=”@style/myText”
android:text=”@string/_2″ />

<TextView
style=”@style/myText”
android:text=”@string/_3″ />

<TextView
style=”@style/myText”
android:text=”@string/_4″ />

<TextView
style=”@style/myText”
android:text=”@string/_5″ />

<TextView
style=”@style/myText”
android:text=”@string/_6″ />

<TextView
style=”@style/myText”
android:text=”@string/_7″ />
</LinearLayout>
</LinearLayout>

</LinearLayout>
（4）核心draeble
<?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:height=”8dp” android:top=”7dp”>
<shape>
<corners android:radius=”@dimen/activity_horizontal_margin”/>
<solid android:color=”#6E8B9B”/>
</shape>
</item>

<item android:id=”@android:id/progress” android:height=”8dp” android:top=”7dp” android:drawable=”@drawable/b”>
</item>

<item android:id=”@android:id/secondaryProgress” android:height=”8dp” android:top=”7dp”>
<clip>
<shape>
<corners android:radius=”@dimen/activity_horizontal_margin”/>
<solid android:color=”#6E8B9B”/>
</shape>
</clip>
</item>

</layer-list>