一个带数字显示的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