Android系統(tǒng)自帶的SeekBar的樣式比較單一,而且不同品牌手機(jī)被定制了之后樣式也不一樣,為了SeekBar的樣式和應(yīng)用的風(fēng)格統(tǒng)一,就需要自定義SeekBar的樣式,先看效果圖:
<SeekBar
android:layout_width=”192dip”
android:layout_height=”wrap_content”
android:progressDrawable=”@drawable/seekbar_style”
android:thumb=”@drawable/thumb_bg”
android:id=”@+id/seekWeight”
android:max=”70″
android:paddingLeft=”17dip”
android:paddingRight=”17dip”
/>
1.改變按鈕的樣式。
這個(gè)很簡(jiǎn)單,直接則layout文件里指定android:thumb屬性即可,如上面紅色字體,需要注意的是SeekBar的寬的左右的padding一定要指定。
2.改變長(zhǎng)條的顏色。
這里只需指定android:progressDrawable屬性即可,下面是seekbar_style文件,放在drawable文件夾下。
<?xml version=”1.0″ encoding=”utf-8″?>
<layer-list xmlns:android=”http://schemas./apk/res/android”>
<item android:id=”@android:id/background”>
<shape>
<corners android:radius=”10dip” />
<gradient
android:startColor=”#d4d4d4″
android:centerColor=”#ffffff”
android:endColor=”#ffffff”
android:centerY=”0.45″
android:angle=”270″/>
</shape>
</item>
<item android:id=”@android:id/progress”>
<clip>
<shape>
<corners android:radius=”10dip” />
<gradient
android:startColor=”#ffd202″
android:centerColor=”#ffc004″
android:endColor=”#fbc600″
android:centerY=”0.45″
android:angle=”270″/>
</shape>
</clip>
</item>
</layer-list>
紅色的<item android:id=”@android:id/background”>指定了SeekBar背景的顏色。android:startColor,android:centerColor,android:endColor分別指定了開始,中間,結(jié)尾的顏色,使SeekBar有了立體的效果。綠色的<item android:id=”@android:id/progress”>指定了SeekBar滾過的部分的顏色。
3.SeekBar上面動(dòng)態(tài)變化的彈出框顯示當(dāng)前值。
原理是在SeekBar上面方一個(gè)TextView,在SeekBar的監(jiān)聽OnSeekBarChangeListener里動(dòng)態(tài)改變TextView的layoutParams的leftMargin屬性。
layout:
<LinearLayout
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”vertical”
>
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:background=”@drawable/bg_seektv”
android:textColor=”#000000″
android:textStyle=”bold”
android:id=”@+id/tvWeight”
android:gravity=”center”
android:layout_marginLeft=”7dip”
/>
<SeekBar
android:layout_width=”192dip”
android:layout_height=”wrap_content”
android:progressDrawable=”@drawable/seekbar_style”
android:thumb=”@drawable/thumb_bg”
android:id=”@+id/seekWeight”
android:max=”70″
android:paddingLeft=”17dip”
android:paddingRight=”17dip”
/>
</LinearLayout>
代碼:
seekStrength.setOnSeekBarChangeListener(mSeekChange);
private OnSeekBarChangeListener mSeekChange = new OnSeekBarChangeListener() {
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
// TODO Auto-generated method stub
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
// TODO Auto-generated method stub
}
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
// TODO Auto-generated method stub
int iStrength = seekBar.getProgress() + 1;
LinearLayout.LayoutParams paramsStrength = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);
paramsStrength.leftMargin = (int) ((iStrength-1)*5*fDensity+7*fDensity);
tvStrength.setLayoutParams(paramsStrength);
}
}