开发者

how to customize thumb of seek bar

I want to display a TextView just abov开发者_运维问答e thumb of the SeekBar that will display the current progress of seek bar. As we move the thumb forward and backward the TextView will also move with thumb (the TextView should also be above the thumb).

Please provide any clue, code snippet are always welcome.


Moving the text can even more easily done by setting the padding for the TextView as:

int xPos = ((SeekbarInstance.getRight() - SeekbarInstance.getLeft()) * SeekbarInstance.getProgress()) / SeekbarInstance.getMax();
textViewInstance.setPadding(xPos, 0, 0, 0);


Layout of your activity

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
        <!-- Main context -->
    <LinearLayout android:orientation="vertical" 
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <SeekBar android:id="@+id/skbSample" 
            android:layout_width="fill_parent" 
            android:layout_height="wrap_content" 
            android:layout_marginLeft="10dip" 
            android:layout_marginRight="10dip"
            android:max="35">
        </SeekBar>
    </LinearLayout>
        <!-- For display value -->
    <AbsoluteLayout android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <TextView android:text="0" 
            android:id="@+id/txvSeekBarValue" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"
            android:textColor="#FFFFFFFF"
            android:background="#FF777777"
            android:visibility = "invisible">
        </TextView>
    </AbsoluteLayout>
</FrameLayout>

Initialize your controls on create:

mTxvSeekBarValue = (TextView) this.findViewById(R.id.txvSeekBarValue);
mSkbSample = (SeekBar) this.findViewById(R.id.skbSample);
mSkbSample.setOnTouchListener(new OnTouchListener() {       
        @Override
        public boolean onTouch(View v, MotionEvent event) {
        if(event.getAction() == MotionEvent.ACTION_DOWN)
        {
            ShowSeekValue((int)event.getX(), mTxvSeekBarValue.getTop());
            mTxvSeekBarValue.setVisibility(View.VISIBLE);   
        }
        else if(event.getAction() == MotionEvent.ACTION_MOVE)
        {
            ShowSeekValue((int)event.getX(), mTxvSeekBarValue.getTop());
        }
        else if(event.getAction() == MotionEvent.ACTION_UP)
        {
            mTxvSeekBarValue.setVisibility(View.INVISIBLE);
        }
        return false;
    }
});

Function will move your value:

private void ShowSeekValue(int x, int y)
{
    if(x > 0 && x < mSkbSample.getWidth())
    {
        AbsoluteLayout.LayoutParams lp = new AbsoluteLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT, x, y);
        mTxvSeekBarValue.setLayoutParams(lp);
    }
}


Found a better way. Derived from the sample:

mTxvSeekBarValue = (TextView) this.findViewById(R.id.txvSeekBarValue);
mSkbSample = (SeekBar) this.findViewById(R.id.skbSample);
mSkbSample.setOnTouchListener(new OnTouchListener() {       
        @Override
        public boolean onTouch(View v, MotionEvent event) {
        if(event.getAction() == MotionEvent.ACTION_DOWN)
        {
            int progress = mSkbSample.getProgress();
    mTxvSeekBarValue.setText(String.valueOf(progress).toCharArray(), 0, String.valueOf(progress).length());   
        }
        else if(event.getAction() == MotionEvent.ACTION_MOVE)
        {
            int progress = mSkbSample.getProgress();
    mTxvSeekBarValue.setText(String.valueOf(progress).toCharArray(), 0, String.valueOf(progress).length());  
        }
        return false;
    }
});

There you don't need any additional method and the ACTION_UP event has no important effect on the result.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜