双SeekBar联动布局

DoubleSeekBar

朋友要做一个效果，二个SeekBar联动，实现之后觉得挺简单的。

实现方法

上面的SeekBar：只有滑块，进度背景透明

下面的SeekBar：没有滑块，进度背景正常

每当任何一个SeekBar有状态变化，都带动另一个变化

效果图

运行截图

布局文件

layout_double_seekbar.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
xmlns:tools="http://schemas.android.com/tools">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

<SeekBar
android:id="@+id/seekBarTop"
style="@style/NumberProgressBar_Default"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="false"
android:max="200"
android:progressDrawable="@drawable/doubleseekbar_bg_transparent"
android:thumb="@drawable/doubleseekbar_thumb_bar" />

<SeekBar
android:id="@+id/seekBarBottom"
style="@style/NumberProgressBar_Default"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="false"
android:max="200"
android:progressDrawable="@drawable/doubleseekbar_bg_drawable"
android:thumb="@drawable/doubleseekbar_thumb_transparent" />
</LinearLayout>

</LinearLayout>

自定义DoubleSeekBar类

/**
*
* @class DoubleSeekbar
*
* @description 二个SeekBar联动布局，样式和参数未定义
*
* @author tq
*
* @date 2015-05-04 23:10:15
*
*/
public class DoubleSeekbar extends LinearLayout {

public DoubleSeekbar(Context context) {
// TODO Auto-generated constructor stub
super(context, null);

}

public DoubleSeekbar(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub

// 注意这里的第二个参数和第三个参数分是ViewGroup、是否与ViewGroup绑定的布尔变量
LayoutInflater.from(context).inflate(R.layout.layout_double_seekbar,
this, true);

initView();
}

/**
* 初始化布局
*/
private void initView() {
// TODO Auto-generated method stub
final SeekBar seekBarTop = (SeekBar) findViewById(R.id.seekBarTop);
final SeekBar seekBarBottom = (SeekBar) findViewById(R.id.seekBarBottom);

// 设置底部的SeekBar随着顶部的SeekBar滑动
seekBarTop.setOnSeekBarChangeListener(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
seekBarBottom.setProgress(progress);
}
});

// 设置顶部的SeekBar随着底部的SeekBar滑动(已验证，不会出现相互无限调用的情况)
// 或者直接设置底部的SeekBar不可滑动
// seekBarBottom.setEnabled(false);
seekBarBottom.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {

8ef0
@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
seekBarTop.setProgress(progress);
}
});
}

}

最后的话

以前自定义布局写的也比较少，希望以后好好加强这方面。

下载地址

点我下载