زر التبديل Android، مثال على الوضع

اليوم سنتعلم حول زر التبديل والمفتاح في تطبيق Android. سنناقش ونقوم بتنفيذ واجهة مستخدم لزر التبديل وواجهة مستخدم لعنصر ToggleButton في تطبيقنا.

زر التبديل في Android

يتم استخدام زر التبديل في Android لعرض حالة التشغيل والإيقاف على زر. المفتاح (Switch) هو نوع آخر من أزرار التبديل يُستخدم بشكل رئيسي منذ Android 4.0. يوفر المفتاح في Android تحكمًا بشكل منزلق. كلا ToggleButton و Switch هما فصول فرعية من الفئة CompoundButton. توضح السمات XML المستخدمة لتعريف زر التبديل أدناه.

1. android:disabledAlpha: الشفافية المطبقة على المؤشر عند التعطيل
2. android:textOff: النص للزر عندما لا يتم التحقق منه
3. android:textOn: النص للزر عند التحقق منه

لتعديل زر التبديل برمجيًا، يُستخدم الأساليب التالية.

1. CharSequence getTextOff(): تُرجع النص عندما يكون الزر غير محدد
2. CharSequence getTextOn(): تُرجع النص عندما يكون الزر محددًا
3. void setChecked(boolean checked): تغيير حالة التحقق من هذا الزر

مفتاح Android

مفتاح Android أو عنصر واجهة المستخدم الخاص بـ SwitchCompat (جزء من مكتبة AppCompat التي توفر التوافق الخلفي لإصدارات Android الأقدم حتى إصدار Android API v7) هو مُنزلق مخصص للتشغيل والإيقاف يُستخدم عادة في إعدادات الهاتف. مزايا عنصر واجهة المستخدم الخاص بـ Android Switch:

1. يعتبر أفضل بديل لخانات الاختيار وأزرار الراديو
2. يستغرق تنفيذه أقل من دقيقة فقط
3. لا حاجة لاستخدام الكثير من الرسومات والموارد الأخرى

يتم توفير تخطيط xml لـ SwitchCompat أدناه:

<android.support.v7.widget.SwitchCompat
        android:id="@+id/switchButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Switch example"
        />

تُستخدم android:text لعرض نص بجانب زر التبديل المُنزلق.

مثال على زر تبديل ومفتاح Android

في هذا التطبيق، سنعرض زوجين من أزرار التبديل وزر واحد للتشغيل/الإيقاف. يتم عرض حالة أزرار التبديل في SnackBar عند الضغط على FloatingActionButton. يُغيّر حالة زر التبديل إلى صحيحة كلما تم النقر على زر العمل في شريط الإعلام أو يتم عرض الحالة في شريط الإعلام عن طريق تحريك المفتاح.

هيكل مشروع Android Toggle Button و Switch

كود Android Toggle Button

يظل activity_main.xml كما هو. يحتوي content_main.xml على زرين Toggle ومفتاح تبديل (Switch) محددان على false افتراضيًا كما هو موضح في مقتطف الكود أدناه:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.journaldev.switchandtoggle.MainActivity"
    tools:showIn="@layout/activity_main">

    <ToggleButton
        android:id="@+id/tb1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="ToggleButton 1"
        android:textOff="Off"
        android:textOn="On" />

    <ToggleButton
        android:id="@+id/tb2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/tb1"
        android:layout_alignBottom="@+id/tb1"
        android:layout_toRightOf="@+id/tb1"
        android:text="ToggleButton 2"
        android:textOff="Off"
        android:textOn="On" />

    <android.support.v7.widget.SwitchCompat
        android:id="@+id/switchButton"
        android:layout_width="wrap_content"
        android:layout_centerInParent="true"
        android:checked="false"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Switch example"
        />


</RelativeLayout>

يظهر كود MainActivity.java أدناه:

package com.journaldev.switchandtoggle;

import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.SwitchCompat;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.CompoundButton;
import android.widget.ToggleButton;

public class MainActivity extends AppCompatActivity {

    ToggleButton tb1, tb2;
    SwitchCompat switchCompat;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                StringBuilder result = new StringBuilder();
                result.append("ToggleButton1 : ").append(tb1.getText());
                result.append("\nToggleButton2 : ").append(tb2.getText());

               Snackbar snackbar= Snackbar.make(view, result.toString(), Snackbar.LENGTH_LONG)
                        .setAction("SWITCH ENABLE", new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                switchCompat.setChecked(true);
                            }
                        });

                snackbar.setActionTextColor(Color.RED);
                snackbar.show();
            }
        });

        tb1= (ToggleButton)findViewById(R.id.tb1);
        tb2=(ToggleButton)findViewById(R.id.tb2);
        switchCompat=(SwitchCompat)findViewById(R.id.switchButton);

        switchCompat.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {

                Snackbar.make(buttonView, "Switch state checked "+isChecked, Snackbar.LENGTH_LONG)
                        .setAction("ACTION",null).show();
            }
        });



    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // نفخ القائمة؛ يضيف هذا العناصر إلى شريط الأدوات إذا كان موجودًا.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // قم بالتعامل مع نقرات عناصر شريط الأدوات هنا. سيتعامل شريط الأدوات
        // تلقائيًا مع النقرات على زر الصفحة الرئيسية/الرجوع، طالما
        // حددت نشاطًا أم-parent في AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

A String builder is used to get the current state of the toggle buttons and append them to display in the snackbar. Switch button being a subclass of Compound Button, an OnCheckChangeListener is implemented as shown in the code above. The output below is the app in action. This brings an end to android toggle button and switch in android tutorial. You can download the final Android SwitchAndToggle Project from the link below.

تحميل مشروع Android Switch و Toggle Button

المرجع: توغل بن الروبوت الوثائق