双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() {

            @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);
            }
        });
    }

}

最后的话

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

下载地址

点我下载