一个带数字显示的SeekBar

一个带数字显示的SeekBar

第一次写博客，有点小紧张的咯。最近公司没什么事情，天天在这里无所事事的，想着要不来写写博客吧，看他们那些大牛都有自己的博客，我就也来尝试一下吧，可惜技术不咋的，正好今天下午没事随便写了个控件，就先写在这里试试水。

内容

思路：其实就是在Seekbar上面加一个图片，一个textview就行了，然后根据seekbar当前移动的位置计算一下leftMargin就OK了。

布局

先写一个seekbar上面有有文本框及图片的布局。

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:orientation="vertical"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:background="@android:color/darker_gray">
        <RelativeLayout
            android:id="@+id/rel_main"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp">
            <ImageView
                android:id="@+id/img"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:src="@mipmap/color_seekbar_pop_bg"/>
            <TextView
                android:id="@+id/txt"
                android:layout_width="40dp"
                android:layout_height="35dp"
                android:text="0"
                android:textColor="@android:color/holo_red_dark"
                android:gravity="center"
                />
        </RelativeLayout>
        <SeekBar
            android:id="@+id/seekbar"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:focusable="true"
            android:maxHeight="4dp"
            android:minHeight="4dp"
            android:progressDrawable="@drawable/seek_bar_progress_bg"
            android:thumb="@mipmap/thumb_icon"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:layout_marginBottom="10dp"
            android:layout_alignParentBottom="true"/>

    </RelativeLayout>

</LinearLayout>

设置一下Seekbar的属性

<?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>
            <solid android:color="#c6c6c6" />
            <corners android:radius="3dp"/>
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <solid android:color="#c6c6c6" />
                <corners android:radius="3dp"/>
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <solid android:color="#06a7fa" />
                <corners android:radius="3dp"/>
            </shape>
        </clip>
    </item>
</layer-list>

自定义控件

这个时候我们定义一个控件继承FrameLayout，实现Seekbar的滑动接口监听，根据滑动的值去计算一下RelativeLayout的leftMargin的值，然后通过Handler更新界面就OK了，非常的简单。

代码如下：

package com.superpower.sdaac.seekbartxttest;

import android.content.Context;
import android.graphics.Rect;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.SeekBar;
import android.widget.TextView;

/**
 * Created by pc on 2016/10/18.
 */
public class SeekbarTxtView extends FrameLayout implements SeekBar.OnSeekBarChangeListener {

    private TextView textView;
    private ImageView imageView;
    private SeekBar seekBar;
    private RelativeLayout rel_main;

    public SeekbarTxtView(Context context) {
        super(context);
        init(context);
    }

    public SeekbarTxtView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public SeekbarTxtView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    private void init(Context context){
        View view= LayoutInflater.from(context).inflate(R.layout.seekbarlayout,this);
        textView= (TextView) view.findViewById(R.id.txt);
        imageView= (ImageView) view.findViewById(R.id.img);
        seekBar= (SeekBar) view.findViewById(R.id.seekbar);
        rel_main= (RelativeLayout) findViewById(R.id.rel_main);
        textView.setText("50");
        seekBar.setOnSeekBarChangeListener(this);
        textView.setVisibility(GONE);
        imageView.setVisibility(GONE);
    }


    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
        changeDate();
        Message msg=new Message();
        msg.what=1;
        msg.obj=progress;
        handler.sendMessage(msg);

    }

    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {
        textView.setVisibility(VISIBLE);
        imageView.setVisibility(VISIBLE);
    }

    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {
        textView.setVisibility(GONE);
        imageView.setVisibility(GONE);
    }

    Handler handler=new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            if(msg.what==1){
                textView.setText(msg.obj.toString());
            }
        }
    };

    private void changeDate(){
        Rect bounds = seekBar.getProgressDrawable().getBounds();
        int xFloat=(int)bounds.width()*seekBar.getProgress()/seekBar.getMax();
        RelativeLayout.LayoutParams params=new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        params.leftMargin=xFloat+3;
        params.topMargin=10;
        rel_main.setLayoutParams(params);
    }
}

上面有些地方写的较死，如果跟你需求不太符合的话可以下载后改一下。

大致上就是这样，第一次写博客，写的不好的地方请见谅。
下载地址：https://github.com/lengyang183/SeekBarTest/tree/master