自定義豎向SeekBar ,橫向SeekBar 樣式
阿新 • • 發佈：2019-02-09
效果圖
豎向SeekBar 背景寬了，是因為，progress 的圖片兩邊有透明留白。導致兩個圖片顏色區不一樣寬。
貼程式碼：
activity_main.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:background="@drawable/bg" android:orientation="vertical" > <TextView android:id="@+id/radio_volume_value" android:layout_width="46px" android:layout_height="wrap_content" android:layout_marginLeft="30px" android:layout_marginTop="30px" android:gravity="center" android:textColor="#FFFFFF" android:textSize="22px" /> <com.tan.seekbaractivity.view.VerticalSeekBar1 android:id="@+id/verticalSeekBar" android:layout_width="36px" android:layout_height="230px" android:layout_marginLeft="36px" android:layout_marginTop="10px" /> <SeekBar android:id="@+id/sb_progress" android:layout_width="400px" android:layout_height="wrap_content" android:layout_marginLeft="100px" android:focusable="false" android:focusableInTouchMode="false" android:maxHeight="2px" android:progress="0" android:progressDrawable="@drawable/seekbar_po_sound" android:thumb="@drawable/slide_selected" android:thumbOffset="16px" /> </LinearLayout>
drawable
seekbar_po_sound.xml
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <!-- <item android:id="@android:id/background" android:drawable="@drawable/slide_bg"> </item> <item android:id="@android:id/secondaryProgress"> <clip> <shape> <solid android:color="#00000000" /> </shape> </clip> </item> <item android:id="@android:id/progress"> <clip android:drawable="@drawable/slide_content" > </clip> </item> --> <item android:id="@android:id/background"> <shape> <corners android:radius="6px" /> <solid android:color="#19ffffff" /> <size android:height="5px" android:width="245px" /> </shape> </item> <item android:id="@android:id/secondaryProgress"> <clip> <shape> <solid android:color="#00000000" /> </shape> </clip> </item> <item android:id="@android:id/progress"> <clip> <shape> <corners android:radius="6px" /> <gradient android:angle="0" android:startColor="#a1f5c587" android:centerColor="#fdf4b5" android:endColor="#fffde0"/> <size android:height="5px" android:width="245px" /> </shape> </clip> </item> </layer-list>
MainActivity.java
package com.tan.seekbaractivity; import com.tan.seekbaractivity.view.VerticalSeekBar1; import com.tan.seekbaractivity.view.VerticalSeekBar1.Callback; import android.os.Bundle; import android.app.ActionBar; import android.app.Activity; import android.view.Menu; import android.widget.TextView; public class MainActivity extends Activity { private VerticalSeekBar1 VerticalSeekBar; private TextView radio_volume_value; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // 隱藏標題欄 ActionBar actionBar = getActionBar(); actionBar.hide(); initView(); setListener(); } private void initView() { VerticalSeekBar = (VerticalSeekBar1) this.findViewById(R.id.verticalSeekBar); radio_volume_value = (TextView) this.findViewById(R.id.radio_volume_value); } private void setListener() { VerticalSeekBar.setMax(40); VerticalSeekBar.setProgress(0); VerticalSeekBar.setCallback(new Callback() { @Override public void changed(int mProgress) { radio_volume_value.setText(String.valueOf(mProgress)); } }); } }
View
VerticalSeekBar.java
package com.tan.seekbaractivity.view;
import com.tan.seekbaractivity.R;
import android.content.Context;
import android.graphics.drawable.Drawable;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.ImageView;
import android.widget.RelativeLayout;
public class VerticalSeekBar1 extends RelativeLayout implements OnTouchListener {
public VerticalSeekBar1(Context context) {
super(context);
init(context);
}
public VerticalSeekBar1(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
public VerticalSeekBar1(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context);
}
public interface Callback {
public void changed(int mProgress);
}
private Callback mCallback;
public void setCallback(Callback c) {
mCallback = c;
}
private ImageView backgroundView;
private ImageView mthumb;
private ImageView progressView;
private void init(Context context) {
backgroundView = new ImageView(context);
this.addView(backgroundView);
progressView = new ImageView(context);
this.addView(progressView);
mthumb = new ImageView(context);
this.addView(mthumb);
setResource(this.getResources().getDrawable(R.drawable.radio_volume_progress_thumb), this.getResources()
.getDrawable(R.drawable.radio_volume_progress_nomal),
this.getResources().getDrawable(R.drawable.radio_volume_progress_press));
this.setOnTouchListener(this);
// mthumb.setOnTouchListener(this);
}
private void setResource(Drawable thumb, Drawable background, Drawable progress) {
backgroundView.setBackgroundDrawable(background);
progressView.setBackgroundDrawable(progress);
mthumb.setImageDrawable(thumb);
}
private int offsetThumb = 18;
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
int width = this.getWidth();
int height = this.getHeight();
step = (height - 36) / (mMax);
int backgroundwidt = backgroundView.getWidth();
backgroundView.layout((width - backgroundwidt) / 2, offsetThumb, (width - backgroundwidt) / 2 + backgroundwidt,
height - offsetThumb);
int progressViewwidth = progressView.getWidth();
progressView.layout((width - progressViewwidth) / 2, offsetThumb, (width - progressViewwidth) / 2
+ progressViewwidth, height - offsetThumb);
mthumb.layout(0, 0, mthumb.getWidth(), mthumb.getHeight());
setProgress(progress);
}
public void setProgress(int p) {
if (p > mMax || p < 0) {
return;
}
progress = p;
int currentY = (int) (step * p);
lastY = currentY;
int y = 230 - 18 - currentY;
// if (y > 18 && y < step) {
// y = 18;
// progress = (int) mMax;
// }
mthumb.layout(0, y - 18, mthumb.getWidth(), y + 18);
int width = VerticalSeekBar1.this.getWidth();
int height = VerticalSeekBar1.this.getHeight();
int progressViewwidth = progressView.getWidth();
progressView.layout((width - progressViewwidth) / 2, offsetThumb + y - 18, (width - progressViewwidth) / 2
+ progressViewwidth, height - offsetThumb);
VerticalSeekBar1.this.invalidate();
}
private float mMax;
private float step;
private int lastY;
private int progress;
public void setMax(int max) {
mMax = max;
}
private Handler handler = new Handler() {
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
int y = msg.arg1;
if (y - 18 < 0) {
y = 18;
}
if (y > VerticalSeekBar1.this.getHeight() - 18) {
y = VerticalSeekBar1.this.getHeight() - 18;
}
if (y == VerticalSeekBar1.this.getHeight() - 18) {
progress = 0;
} else if (y == 18||(y > 18 && y < step+18)) {
progress = (int) mMax;
} else {
int tempY = Math.abs(y-212);
//int tempY = Math.abs(y - (230 - 18));
int number = (int) (tempY / step);
progress = number;
int currentY = (int) (step * number);
if (currentY == lastY) {
return;
}
lastY = currentY;
y = 230 - 18 - currentY;
//
// if (y > 18 && y < step) {
// y = 18;
// progress = (int) mMax;
// }
}
mthumb.layout(0, y - 18, mthumb.getWidth(), y + 18);
int width = VerticalSeekBar1.this.getWidth();
int height = VerticalSeekBar1.this.getHeight();
int progressViewwidth = progressView.getWidth();
progressView.layout((width - progressViewwidth) / 2, offsetThumb + y - 18, (width - progressViewwidth) / 2
+ progressViewwidth, height - offsetThumb);
VerticalSeekBar1.this.invalidate();
if (mCallback != null) {
mCallback.changed(progress);
}
}
};
private boolean isTouchDown = false;
public boolean isTouchDown() {
return isTouchDown;
}
@Override
public boolean onTouch(View view, MotionEvent event) {
int y = 0;
switch (event.getAction())// 根據動作來執行程式碼
{
case MotionEvent.ACTION_MOVE:// 滑動
isTouchDown = true;
y = (int) event.getY();
handler.sendMessage(handler.obtainMessage(0, y, 0));
break;
case MotionEvent.ACTION_DOWN:// 按下
isTouchDown = true;
y = (int) event.getY();
handler.sendMessage(handler.obtainMessage(0, y, 0));
break;
case MotionEvent.ACTION_UP:// 鬆開
case MotionEvent.ACTION_CANCEL:// 鬆開
isTouchDown = false;
y = (int) event.getY();
handler.sendMessage(handler.obtainMessage(0, y, 0));
break;
default:
}
return true;
}
}
橫向SeekBar 樣式：
<SeekBar
android:id="@+id/sb_progress"
android:layout_width="400px"
android:layout_height="wrap_content"
android:layout_marginLeft="100px"
android:focusable="false"
android:focusableInTouchMode="false"
android:maxHeight="2px"
android:progress="0"
android:progressDrawable="@drawable/seekbar_po_sound"
android:thumb="@drawable/slide_selected"
android:thumbOffset="16px" />一般SeekBar 軌道（Track） 和 拖動按鈕（Thumb） 是等高的
當遇到設計圖，Track 比Thumb 高度小很多時，就不好處理 。
1.利用android:maxHeight="2px" 限制Track 的高度，控制元件的高度wrap_content , 就是Thumb 高度。
2。android:thumbOffset="16px" 用來控制Thumb 的偏移大小，就是Thumb 拖動範圍比Track 長度大。避免Thumb出現拖不到頭的情況。
3. 利用 android:progressDrawable="@drawable/seekbar_po_sound"
控制進度條的樣式。
注意：遇到這種情況，儘量不要用圖片做Track 。會出現，Track 高度不可控，並且會使Thumb 不居中。
<?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>
<corners android:radius="6px" />
<solid android:color="#19ffffff" />
<size
android:height="5px"
android:width="245px" />
</shape>
</item>
<item android:id="@android:id/secondaryProgress">
<clip>
<shape>
<solid android:color="#00000000" />
</shape>
</clip>
</item>
<item android:id="@android:id/progress">
<clip>
<shape>
<corners android:radius="6px" />
<gradient
android:angle="0"
android:startColor="#a1f5c587"
android:centerColor="#fdf4b5"
android:endColor="#fffde0"/>
<size
android:height="5px"
android:width="245px" />
</shape>
</clip>
</item>
</layer-list>這裡採用的是利用shape繪製 背景圖和拖動條。
第一個item @android:id/background 就是最底層的灰色條
第二個Item 一般用不到，@android:id/secondaryProgress 。這裡設定成透明
第三個item @android:id/progress 當前的進度。
注意使用 clip 屬性 ，並用shape 繪製了漸變色。
第二和第三的區別使用場景
想想視訊播放器，線上快取播放。
第二條就是 當前快取下載的進度
第三條 就是 正在播放視訊的進度
自定義豎向SeekBar
就是自定義一個相對佈局，控制拖動條和Thumb 的顯示位置。
通過onLayout 方法重新繪製
目前這個空間沒有自定義attrs 屬性，座標值是寫死的，有待改進。
介紹，拖動塊 Thumb , 大小是 36X36
控制元件 的大小是 36X 230
Thumb 的 thumbOffset = 18
程式碼中的數字都是暫時寫死的。
具體繪製思路如圖：
