Android(安卓)自定义SeekBar样式

16lz 2021-01-25

Android系统自带的SeekBar的样式比较单一，而且不同品牌手机被定制了之后样式也不一样，为了SeekBar的样式和应用的风格统一，就需要自定义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.改变按钮的样式。

这个很简单，直接则layout文件里指定android:thumb属性即可，如上面红色字体，需要注意的是SeekBar的宽的左右的padding一定要指定。

2.改变长条的颜色。

这里只需指定android:progressDrawable属性即可，下面是seekbar_style文件，放在drawable文件夹下。

<?xml version=”1.0″ encoding=”utf-8″?>

<layer-list xmlns:android=”http://schemas.android.com/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分别指定了开始，中间，结尾的颜色，使SeekBar有了立体的效果。绿色的<item android:id=”@android:id/progress”>指定了SeekBar滚过的部分的颜色。

3.SeekBar上面动态变化的弹出框显示当前值。

原理是在SeekBar上面方一个TextView，在SeekBar的监听OnSeekBarChangeListener里动态改变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);

}

}

具体数值需要根据情况调整，大致思路就是这样。

更多相关文章

随机推荐