Toggle Button - 10 ( Android Bangla Tutorial)
Toogle বাটন হল যে বাটনের সাহায্যে একসাথে ২টি কাজ করা যায় যেমন আমাদের মোবাইলের টর্চ এর বাটন একটিই থাকে কিন্তু একবার টিপ দিলে জ্বলে আবার সেই বাটন-কেই টিপ দিলে আবার নিভে যায় ।
প্রথমে আমরা UI ডিজাইন করবো । টোগল বাটন নিয়ে কাজ করতে প্রথমে আমাদের যে ভিউ উপাদানটি লাগবে তা হল <ToggleButton
বরাবরের মত এখানে বুলিয়ান ভ্যালু বাটন অন থাকলে সত্য আর বাটন অফ থাকলে মিথ্যা রিটার্ন করবে ।
প্রথমে আমরা UI ডিজাইন করবো । টোগল বাটন নিয়ে কাজ করতে প্রথমে আমাদের যে ভিউ উপাদানটি লাগবে তা হল <ToggleButton
<ToggleButton
android:id="@+id/toggle_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textOff ="light off"
android:textOn="light on"
android:textAllCaps="false"
android:textAppearance="?android:textAppearanceLarge"
android:onClick="toggle"
android:textAppearance="?android:textAppearanceLarge"
android:onClick="toggle"
/>
এখানে আমরা নতুন যে ২টি ট্যাগ এর সাথে পরিচিত হয়েছি তা হল - textOff এবং textOn । বাই ডিফল্ট প্রোগ্রাম textOff এর প্রোগ্রামকে ভিজিবল করে রাখে ।
এখানে আমরা নতুন যে ২টি ট্যাগ এর সাথে পরিচিত হয়েছি তা হল - textOff এবং textOn । বাই ডিফল্ট প্রোগ্রাম textOff এর প্রোগ্রামকে ভিজিবল করে রাখে ।
In Java-
public class MainActivity extends AppCompatActivity{
@Override
protected void Oncreate(Bundle savedInstanceState) {
super.onCreate(saveInstanceState);
setContentView(R.layout.activity_main);
}
public void toggle(View view){
boolean checked = (( ToggleButton)view ).isChecked();
if(checked){
Toast.makeText(this, "light on", Toast.LENGTH_SHORT ).show();
} else {
Toast.makeText(this,"light off",Toast.LENGTH_SHORT ).show();
}
}
}
public class MainActivity extends AppCompatActivity{
@Override
protected void Oncreate(Bundle savedInstanceState) {
super.onCreate(saveInstanceState);
setContentView(R.layout.activity_main);
}
public void toggle(View view){
boolean checked = (( ToggleButton)view ).isChecked();
if(checked){
Toast.makeText(this, "light on", Toast.LENGTH_SHORT ).show();
} else {
Toast.makeText(this,"light off",Toast.LENGTH_SHORT ).show();
}
}
}
বরাবরের মত এখানে বুলিয়ান ভ্যালু বাটন অন থাকলে সত্য আর বাটন অফ থাকলে মিথ্যা রিটার্ন করবে ।
SwitchCompat
সুইচ টোগল বাটনের আপডেট ভার্সন । সুইচ বাটন দেখাতে আন্ড্রয়েড SDK মিনিমাম 17 হওয়া প্রয়োজন । তো দেখা যাক এটা দ্বারা কিভাবে কাজ করা হয় -
সুইচ বাটন নিয়ে কাজ করতে যে ভিউ উপাদানটি লাগবে তা হল <android.support.v7.widget.SwitchCompat
In Xml -
<android.support.v7.widget.SwitchCompat
android:id="@+id/switch_button"
android:textOff ="light off"
এখানে আমরা টেক্সট ভিউটি নিলাম আমাদের বাটন যে অবস্থানে আছে তা দেখার জন্য , এর আগেরবার আমরা টোস্ট এর সাহায্যে দেখেছি কিন্তু এবার সেটি টেক্সভিউ আকারে দেখাবে । আমরা ভিউ এর এখানে হ্যালো ওয়ার্ল্ড টেক্স লিখে রেখেছি । এপ্লিকেশন শুরু হওয়ার সময় ওখানে যাতে কোন লেখাই নাহ দেখা যায় তা আমরা কোডের মাধ্যমে ব্যাবস্থা করে রাখবো ।
In Java-
টোগল বাটনে আমরা অনক্লিক ম্যাথড ইউজ করেছিলাম কিন্তু এখানে আমরা কম্পাউন্ড-বাটন ক্লাসের ভিতর বিল্ড-ইন ম্যাথডের মাধ্যমে রেজাল্ট দেখাবো । এই ম্যাথড চাইলে টোগল বাটনেও ইউজ করা যায় । টোগল এবং সুইচ কম্প্যাক্ট দুইটাই কম্পাউন্ড-বাটন ক্লাসের সাবক্লাস ।
public class MainActivity extends AppCompatActivity{
SwitchCompat switch;
TextView textView;
প্রথমে আমরা টেক্সভিউ এবং সুইচ-কম্প্যাক্ট এর অব্জেক্ট তৈরি করলাম কেননা এই দুইটা ক্লাসই আমরা ইউজ করবো । টেক্সভিউটি আমাদের এক্সএমএল টেক্স ভিউতে লেখা প্রদর্শন এর জন্য এবং সুইচ-কম্প্যাক্ট ক্লাসের ম্যাথডের সাহায্যে আমরা কি টেক্স দেখাবো তা নির্ধারণ করবো ।
@Override
protected void Oncreate(Bundle savedInstanceState) {
super.onCreate(saveInstanceState);
setContentView(R.layout.activity_main);
textView = (TextView) findViewById(R.id.textview);
textView.setVisibility( View.INVISIBLE);
প্রথমেই এক্সএমএল এ আমাদের যে লেখাটা রয়েছে এই ম্যাথডের মাধ্যমে আমরা সেটাকে ইনভিজিবল করে দিলাম ।
switch=(SwitchCompact) findViewById(R.id.switch_button);
switch.setOnCheckedChangeListener ( new
CompoundButton.OnCheckedChangeListener(){
@Override
public void onCheckedChanged( CompoundButton buttonView, boolean isChecked){
if (isChecked) {
textView.setText("Light On");
textView.setVisibility(View.VISIBLE);
}
else {
textView.setText("Light Off");
}
}
} );
}
}
অনেকেই মনে করতে পারেন আমরা ইফ এর ভিতর টেক্সভিউ ভিজিবল করেছি কিন্তু এলস এর ভিতর কেন করলাম নাহ । কারন ইনিশিয়ালি ম্যাথড টা অফ হিসেবে থাকে তা আমরা টোগল বাটন থেকেই শিখেছি সুতরাং এরপর যখন বাটন অন করা হবে তখন ইফ ম্যাথডের ভিতর যেয়ে টেক্সভিউটি ভিজিবল হবে এবং এরপর অফ বাটনে প্রেস করলেও টেক্সভিউটি ভিজিবল অবস্থাতেই থাকছে ।
এখন আপনারা টোগল বাটন এর সাথে এই onCheckedChanged ম্যাথডের সাহায্যে এমন ভিউ প্রাকটিস করুন :)
সুইচ বাটন নিয়ে কাজ করতে যে ভিউ উপাদানটি লাগবে তা হল <android.support.v7.widget.SwitchCompat
In Xml -
<android.support.v7.widget.SwitchCompat
android:id="@+id/switch_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:textOff ="light off"
android:textOn="light on"
android:layout_gravity="center_horizontal" />
<TextView
android:id="@+id/textview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello World"
android:textSize="24sp" />android:layout_gravity="center_horizontal" />
<TextView
android:id="@+id/textview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello World"
এখানে আমরা টেক্সট ভিউটি নিলাম আমাদের বাটন যে অবস্থানে আছে তা দেখার জন্য , এর আগেরবার আমরা টোস্ট এর সাহায্যে দেখেছি কিন্তু এবার সেটি টেক্সভিউ আকারে দেখাবে । আমরা ভিউ এর এখানে হ্যালো ওয়ার্ল্ড টেক্স লিখে রেখেছি । এপ্লিকেশন শুরু হওয়ার সময় ওখানে যাতে কোন লেখাই নাহ দেখা যায় তা আমরা কোডের মাধ্যমে ব্যাবস্থা করে রাখবো ।
In Java-
টোগল বাটনে আমরা অনক্লিক ম্যাথড ইউজ করেছিলাম কিন্তু এখানে আমরা কম্পাউন্ড-বাটন ক্লাসের ভিতর বিল্ড-ইন ম্যাথডের মাধ্যমে রেজাল্ট দেখাবো । এই ম্যাথড চাইলে টোগল বাটনেও ইউজ করা যায় । টোগল এবং সুইচ কম্প্যাক্ট দুইটাই কম্পাউন্ড-বাটন ক্লাসের সাবক্লাস ।
public class MainActivity extends AppCompatActivity{
SwitchCompat switch;
TextView textView;
প্রথমে আমরা টেক্সভিউ এবং সুইচ-কম্প্যাক্ট এর অব্জেক্ট তৈরি করলাম কেননা এই দুইটা ক্লাসই আমরা ইউজ করবো । টেক্সভিউটি আমাদের এক্সএমএল টেক্স ভিউতে লেখা প্রদর্শন এর জন্য এবং সুইচ-কম্প্যাক্ট ক্লাসের ম্যাথডের সাহায্যে আমরা কি টেক্স দেখাবো তা নির্ধারণ করবো ।
@Override
protected void Oncreate(Bundle savedInstanceState) {
super.onCreate(saveInstanceState);
setContentView(R.layout.activity_main);
textView = (TextView) findViewById(R.id.textview);
textView.setVisibility( View.INVISIBLE);
প্রথমেই এক্সএমএল এ আমাদের যে লেখাটা রয়েছে এই ম্যাথডের মাধ্যমে আমরা সেটাকে ইনভিজিবল করে দিলাম ।
switch=(SwitchCompact) findViewById(R.id.switch_button);
switch.setOnCheckedChangeListener ( new
CompoundButton.OnCheckedChangeListener(){
@Override
public void onCheckedChanged( CompoundButton buttonView, boolean isChecked){
if (isChecked) {
textView.setText("Light On");
textView.setVisibility(View.VISIBLE);
}
else {
textView.setText("Light Off");
}
}
} );
}
}
অনেকেই মনে করতে পারেন আমরা ইফ এর ভিতর টেক্সভিউ ভিজিবল করেছি কিন্তু এলস এর ভিতর কেন করলাম নাহ । কারন ইনিশিয়ালি ম্যাথড টা অফ হিসেবে থাকে তা আমরা টোগল বাটন থেকেই শিখেছি সুতরাং এরপর যখন বাটন অন করা হবে তখন ইফ ম্যাথডের ভিতর যেয়ে টেক্সভিউটি ভিজিবল হবে এবং এরপর অফ বাটনে প্রেস করলেও টেক্সভিউটি ভিজিবল অবস্থাতেই থাকছে ।
এখন আপনারা টোগল বাটন এর সাথে এই onCheckedChanged ম্যাথডের সাহায্যে এমন ভিউ প্রাকটিস করুন :)
মন্তব্যসমূহ
একটি মন্তব্য পোস্ট করুন