واکنون ایزی گرام 3 | ایزی گرام 3 با کلی امکانات جدید منتشر شد | کلیک کنید

آموزش ساخت Toggle Button در اندروید

دسته‌بندی: آموزش
شهریور ۳۱, ۱۳۹۷

آموزش ساخت Toggle Button در اندروید

در این مقاله هدف ما آموزش ساخت Toggle Button است که به طور کلی باعث می شود ظاهر اپلیکیشن شما  متریال تر و کاربر پسندتر شود. با ما همراه باشید.

 

این آموزش بیشتر مربوط به تنظیمات هر اپلیکیشن می باشد مثلا درصورتی که قسمت تنظیمات اپلیکیشن شما دارای حالت شب باشد شما قادر خواهید بود از این مطلب بهره ببرید.

 

Toggle Button چیست و چه کاربردی دارد؟

 

در کل می توان گفت که ابزار Toggle Button  در اندروید استودیو بسیار شبیه به متغیر Boolean است. متغیرBoolean مقدارهای ۰و۱ یا True,False را در خودش ذخیره میکند، این بدان معنا است که شما برای فعال کردن و یا غیر فعال کردن چیزی در اپلیکیشن اندروید خود، می توانید با ساخت Toggle Button این کار را انجام دهید.

 

برای مثال به آیکن روشن و خاموش کردن وای فای  در گوشی های اندروید خود دقت کنید. این آیکن در دو حالت روشن و خاموش می تواند قرار بگیرد و یا آیکن روشن و خاموش کردن بلوتوث.

 

ما در این آموزش با ۵ مرحله ی ساده که در ادامه آورده شده است ساخت Toggle Button را به شما نشان خواهیم داد.

 

مراحل ساخت Toggle Button (تاگل باتن) در اندروید

 

مرحله  شماره یک :  کتابخانه زیر را به gradle اضافه نمایید.

 

compile 'com.facebook.rebound:rebound:0.3.8'

 

مرحله شماره دو: کلاسی به اسم Toggle Button بسازید و  کدهای زیر را درون آن قرار دهید.

 

public class ToggleButton extends View {
private SpringSystem springSystem;
private Spring spring ;

private float radius;
private int onColor = Color.parseColor("#4ebb7f");
private int offBorderColor = Color.parseColor("#dadbda");
private int offColor = Color.parseColor("#ffffff");
private int spotColor = Color.parseColor("#ffffff");
private int borderColor = offBorderColor;
private Paint paint ;
private boolean toggleOn = false;
private int borderWidth = 2;
private float centerY;
private float startX, endX;
private float spotMinX, spotMaxX;
private int spotSize ;
private float spotX;
private float offLineWidth;
private RectF rect = new RectF();
private boolean defaultAnimate = true;
private boolean isDefaultOn = false;

private OnToggleChanged listener;

private ToggleButton(Context context) {
super(context);
}
public ToggleButton(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
setup(attrs);
}
public ToggleButton(Context context, AttributeSet attrs) {
super(context, attrs);
setup(attrs);
}

@Override
protected void onDetachedFromWindow() {
super.onDetachedFromWindow();
spring.removeListener(springListener);
}

public void onAttachedToWindow() {
super.onAttachedToWindow();
spring.addListener(springListener);
}

public void setup(AttributeSet attrs) {
paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setStyle(Style.FILL);
paint.setStrokeCap(Cap.ROUND);

springSystem = SpringSystem.create();
spring = springSystem.createSpring();
spring.setSpringConfig(SpringConfig.fromOrigamiTensionAndFriction(50, 7));

this.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
toggle(defaultAnimate);
}
});

TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.ToggleButton);
offBorderColor = typedArray.getColor(R.styleable.ToggleButton_offBorderColor, offBorderColor);
onColor = typedArray.getColor(R.styleable.ToggleButton_onColor, onColor);
spotColor = typedArray.getColor(R.styleable.ToggleButton_spotColor, spotColor);
offColor = typedArray.getColor(R.styleable.ToggleButton_offColor, offColor);
borderWidth = typedArray.getDimensionPixelSize(R.styleable.ToggleButton_borderWidth, borderWidth);
defaultAnimate = typedArray.getBoolean(R.styleable.ToggleButton_animate, defaultAnimate);
isDefaultOn = typedArray.getBoolean(R.styleable.ToggleButton_isDefaultOn, isDefaultOn);
typedArray.recycle();

borderColor = offBorderColor;

if (isDefaultOn) {
toggleOn();
}
}

public void toggle() {
toggle(true);
}

public void toggle(boolean animate) {
toggleOn = !toggleOn;
takeEffect(animate);

if(listener != null){
listener.onToggle(toggleOn);
}
}

public void toggleOn() {
setToggleOn();
if(listener != null){
listener.onToggle(toggleOn);
}
}

public void toggleOff() {
setToggleOff();
if(listener != null){
listener.onToggle(toggleOn);
}
}

public void setToggleOn() {
setToggleOn(true);
}

public void setToggleOn(boolean animate){
toggleOn = true;
takeEffect(animate);
}

public void setToggleOff() {
setToggleOff(true);
}

public void setToggleOff(boolean animate) {
toggleOn = false;
takeEffect(animate);
}

private void takeEffect(boolean animate) {
if(animate){
spring.setEndValue(toggleOn ? 1 : 0);
}else{
spring.setCurrentValue(toggleOn ? 1 : 0);
calculateEffect(toggleOn ? 1 : 0);
}
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

final int widthMode = MeasureSpec.getMode(widthMeasureSpec);
final int heightMode = MeasureSpec.getMode(heightMeasureSpec);

int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);

Resources r = Resources.getSystem();
if(widthMode == MeasureSpec.UNSPECIFIED || widthMode == MeasureSpec.AT_MOST){
widthSize = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, r.getDisplayMetrics());
widthMeasureSpec = MeasureSpec.makeMeasureSpec(widthSize, MeasureSpec.EXACTLY);
}

if(heightMode == MeasureSpec.UNSPECIFIED || heightSize == MeasureSpec.AT_MOST){
heightSize = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 30, r.getDisplayMetrics());
heightMeasureSpec = MeasureSpec.makeMeasureSpec(heightSize, MeasureSpec.EXACTLY);
}

super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

@Override
protected void onLayout(boolean changed, int left, int top, int right,
int bottom) {
super.onLayout(changed, left, top, right, bottom);

final int width = getWidth();
final int height = getHeight();

radius = Math.min(width, height) * 0.5f;
centerY = radius;
startX = radius;
endX = width - radius;
spotMinX = startX + borderWidth;
spotMaxX = endX - borderWidth;
spotSize = height - 4 * borderWidth;
spotX = toggleOn ? spotMaxX : spotMinX;
offLineWidth = 0;
}

SimpleSpringListener springListener = new SimpleSpringListener(){
@Override
public void onSpringUpdate(Spring spring) {
final double value = spring.getCurrentValue();
calculateEffect(value);
}
};

private int clamp(int value, int low, int high) {
return Math.min(Math.max(value, low), high);
}

@Override
public void draw(Canvas canvas) {
//
super.draw(canvas);
rect.set(0, 0, getWidth(), getHeight());
paint.setColor(borderColor);
canvas.drawRoundRect(rect, radius, radius, paint);

if (offLineWidth > 0) {
final float cy = offLineWidth * 0.5f;
rect.set(spotX - cy, centerY - cy, endX + cy, centerY + cy);
paint.setColor(offColor);
canvas.drawRoundRect(rect, cy, cy, paint);
}

rect.set(spotX - 1 - radius, centerY - radius, spotX + 1.1f + radius, centerY + radius);
paint.setColor(borderColor);
canvas.drawRoundRect(rect, radius, radius, paint);

final float spotR = spotSize * 0.5f;
rect.set(spotX - spotR, centerY - spotR, spotX + spotR, centerY + spotR);
paint.setColor(spotColor);
canvas.drawRoundRect(rect, spotR, spotR, paint);

}

private void calculateEffect(final double value) {
final float mapToggleX = (float) SpringUtil.mapValueFromRangeToRange(value, 0, 1, spotMinX, spotMaxX);
spotX = mapToggleX;

float mapOffLineWidth = (float) SpringUtil.mapValueFromRangeToRange(1 - value, 0, 1, 10, spotSize);

offLineWidth = mapOffLineWidth;

final int fb = Color.blue(onColor);
final int fr = Color.red(onColor);
final int fg = Color.green(onColor);

final int tb = Color.blue(offBorderColor);
final int tr = Color.red(offBorderColor);
final int tg = Color.green(offBorderColor);

int sb = (int) SpringUtil.mapValueFromRangeToRange(1 - value, 0, 1, fb, tb);
int sr = (int) SpringUtil.mapValueFromRangeToRange(1 - value, 0, 1, fr, tr);
int sg = (int) SpringUtil.mapValueFromRangeToRange(1 - value, 0, 1, fg, tg);

sb = clamp(sb, 0, 255);
sr = clamp(sr, 0, 255);
sg = clamp(sg, 0, 255);

borderColor = Color.rgb(sr, sg, sb);

postInvalidate();
}

public interface OnToggleChanged{

public void onToggle(boolean on);
}

public void setOnToggleChanged(OnToggleChanged onToggleChanged) {
listener = onToggleChanged;
}

public boolean isAnimate() {
return defaultAnimate;
}
public void setAnimate(boolean animate) {
this.defaultAnimate = animate;
}

}

 

همچنین ببینید :   ربات اینستاگرام چیست؟

مرحله شماره سه :  فایلی به اسم toggle_button_attrs.xml در پوشه values بسازید و  و  کدهای زیر را درون  آن فایل قرار دهید.

 

<?xml version ="1.0" encoding ="utf-8"?>
<resources>
<declare-styleable name ="ToggleButton">
<attr name ="borderWidth" format ="dimension">
</attr>
<attr name ="offBorderColor" format ="reference|color">
</attr>
<attr name ="offColor" format ="reference|color">
</attr>
<attr name ="onColor" format ="reference|color">
</attr>
<attr name ="spotColor" format ="reference|color">
</attr>
<attr name ="animate" format ="reference|boolean">
</attr>
<attr name ="isDefaultOn" format ="reference|boolean">
</attr>
</declare-styleable>
</resources>

 

مرحله شماره چهار : کدهای زیر را به فایل xml اکتیویتی مربوطه اضافه نمایید.

 

<package_name.ToggleButton

android:id ="@+id/toggle"
android:layout_width ="80dp"
android:layout_height ="27dp"
android:layout_centerInParent ="true"
toggle:borderWidth ="1dp"
toggle:offBorderColor ="#d3d3d3"
toggle:offColor ="#d3d3d3"
toggle:onColor ="@color/colorAccent"
toggle:spotColor ="#fff"
tools:layout_editor_absoluteX ="165dp"
tools:layout_editor_absoluteY ="242dp"></package.ToggleButton>

 

در کدهای بالا به جای قسمت package_name برنامه ی مربوطه ی خود را قرار دهید.

 

مرحله شماره پنج : در قسمت  onCreate اکتیویتی کدهای زیر را اضافه نمایید.

 

ToggleButton toggle =(ToggleButton)findViewById(R.id.toggle);

toggle.setOnToggleChanged(new ToggleButton.OnToggleChanged() {
@Override
public void onToggle(boolean on) {
Toast.makeText(MainActivity.this, on+"", Toast.LENGTH_SHORT).show();
}
});

 

امیدوارم آموزش ساخت Toggle Button برای شما مفید بوده باشد و از آن نهایت لذت را برده باشید.

 

 

 

پیام بگذارید


تومان