tejariapp-new-logotejariapp-new-logotejariapp-new-logotejariapp-new-logo
  • صفحه اصلی
  • پروژه ها
    • پروژه طراحی سایت
    • پروژه های اندروید
    • پروژه های تحت ویندوز
    • UI & UX
    • ربات تلگرام
  • سفارش پروژه
    • انجام پروژه اندروید (Android)
    • طراحی و ساخت اپلیکیشن موبایل
    • انجام پروژه طراحی سایت با php
    • انجام پروژه طراحی سایت با Asp.net
    • انجام پروژه سی شارپ
    • فرم سفارش پروژه
  • مدرسه ی تجاری اپ
    • طراحی سایت
    • اندروید
    • سی شارپ
    • آموزش پایگاه داده
    • برنامه های کاربردی
  • لینک های مفید
    • پرداخت آنلاین
    • درباره تجاری اپ
    • تماس با ما
استخدام برنامه نویس متلب
سفارش پروژه
✕
            هیچ نتیجه ای یافت نشدمشاهده همه نتایج

            آموزش اندروید فصل سوم قسمت نهم – ابزارهای نمایش

            • صفحه نخست
            • مدرسه ی تجاری اپ آموزش اندروید
            • آموزش اندروید فصل سوم قسمت نهم – ابزارهای نمایش
            آموزش برنامه نویسی اندروید فصل سوم
            آموزش اندروید فصل سوم قسمت هشتم – رابط کاربری پویا
            8 تیر 1395
            آموزش برنامه نویسی اندروید فصل سوم
            آموزش اندروید فصل سوم قسمت دهم – ProgressBar
            11 تیر 1395
            منتشر شده توسط خانم منطق
            آموزش برنامه نویسی اندروید فصل سوم

            آموزش برنامه نویسی اندروید فصل سوم

            در قسمت بیست و ششم آموزش اندروید  با طرح بندی های مختلف اندروید جهت چینش ابزار آشنا شدیم حال با ابزارهای نمایش مختلف و پرکاربرد اندروید نیز آشنا خواهیم شد.

            آموزش اندروید فصل سوم قسمت نهم – ابزار نمایش

            توجه : برای مشاهده تصاویر در سایز اصلی برروی آنها کلیک کنید.

            طراحی رابط کاربری با استفاده از ابزار های نمایش

            در ادامه این آموزش با ابزار های نمایشی جهت ارتباط برقرار کردن با کاربر آشنا خواهیم شد

            • ابزار ها نمایش پایه : مثل TextView , EditText و Button که پیش تر به کررات از آن استفاده کردیم.
            • ابزارهای نمایش لیست : ابزارهای نمایش که به وسیله آن یک لیست طولانی نمایش داده میشود مثل ListView و SpinnerView
            • فرگمنت های اختصاصی : فرگمنت های اختصاصی که درای قابلیت های خاصی هستند.

            برای شروع چند ابزار نمایش پایه را که به وسیله آن میتوان رابط کاربری در برنامه های اندروید را طراحی نمود بررسی میکنیم

            • TextView
            • EditText
            • Button
            • ImageButton
            • CheckBox
            • ToggleButton
            • RadioButton
            • RadioGroup

            ابزار نمایش TextView

            اگر توجه کرده باشید هر پروژه ای که در اکلیپس اجرا میکنید یک TextView به صورت زیر دارد

            <TextView
            
                    android:layout_width="wrap_content"
            
                    android:layout_height="wrap_content"
            
                    android:text="@string/hello_world" />
            

            ابزار نمایش TextView برای نمایش یک متن به کاربر مورد استفاده قرار میگیرد و یکی از متداول ترین ابزارهاست این در حالی است که اگر بخواهیم از کاربر متنی دریافت کنیم باید از ابزار EditText استفاده کنیم.

            ابزار های نمایش Button , ImageButton , EditText , CheckBox , ToggleButton , RadioButton , RadioGroup

            ابزارهای پرکاربرد دیگر که بسیار مورد استفاده قرار خواهد گرفت به شرح زیر است

            • Button : یک دکمه فشاری ساده
            • ImageButton : کاربر همان Button را دارد با این تفاوت که دارای یک تصویر نیز میباشد
            • EditText : یک زیر کلاس از TextView که کاربران اجازه ویرایش محتوی درونش را دارند
            • CheckBox : یک نوع از دکمه که دارای دو حالت checked و unchecked به معنی انتخاب شده و انتخاب نشده میباشد
            • RadioButtonو RadioGroup : RadioButton هم مثل CheckBox دارای همان دوحالت است. RadioGroup نیز برای گروه بندی RadioButton ها استفاده میشود که در هر یک از گروه ها تنها یک RadioButton میتواند انتخاب شود.
            • ToggleButton : یک نمایش دهنده وضعیت انتخاب به صورت نور

            برای درک بیشتر به مثال زیر دقت فرمایید

            پروژه جدیدی به نام ViewPrj ایجاد کرده و در فایل activity-main.xml چنین کدنویسی میکنیم

            <?xml version="1.0" encoding="utf-8"?>
            
            <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            
            android:layout_width="fill_parent"
            
            android:layout_height="fill_parent"
            
            android:orientation="vertical" >
            
            
            
            <Button android:id="@+id/btnSave"
            
            android:layout_width="fill_parent"
            
            android:layout_height="wrap_content"
            
            android:text="@string/save"
            
            android:onClick="btnSaved_clicked"/>
            
            
            
            <Button android:id="@+id/btnOpen"
            
            android:layout_width="wrap_content"
            
            android:layout_height="wrap_content"
            
            android:text="Open" />
            
            
            
            <ImageButton android:id="@+id/btnImg1"
            
            android:layout_width="fill_parent"
            
            android:layout_height="wrap_content"
            
            android:src="@drawable/ic_launcher" />
            
            
            
            <EditText android:id="@+id/txtName"
            
            android:layout_width="fill_parent"
            
            android:layout_height="wrap_content" />
            
            
            
            <CheckBox android:id="@+id/chkAutosave"
            
            android:layout_width="fill_parent"
            
            android:layout_height="wrap_content"
            
            android:text="Autosave" />
            
            
            
            <CheckBox android:id="@+id/star"
            
            style="?android:attr/starStyle"
            
            android:layout_width="wrap_content"
            
            android:layout_height="wrap_content" />
            
            
            
            <RadioGroup android:id="@+id/rdbGp1"
            
            android:layout_width="fill_parent"
            
            android:layout_height="wrap_content"
            
            android:orientation="horizontal" >
            
            <RadioButton android:id="@+id/rdb1"
            
            android:layout_width="wrap_content"
            
            android:layout_height="wrap_content"
            
            android:text="Option 1" />
            
            <RadioButton android:id="@+id/rdb2"
            
            android:layout_width="wrap_content"
            
            android:layout_height="wrap_content"
            
            android:text="Option 2" />
            
            </RadioGroup>
            
            
            
            <ToggleButton android:id="@+id/toggle1"
            
            android:layout_width="wrap_content"
            
            android:layout_height="wrap_content" />
            
            </LinearLayout>
            

            برای مشاهده ابزارهای نمایش ایجاد شده برنامه را اجرا کرده و نتیجه را مطابق شکل زیر ببینید

            آموزش کاربردی اندروید-قسمت بیست و هفتم

            روش کار

            تمام ابزارها به صورت LinearLayout چینش شده پس همه به صورت خطی قرار میگیرند.

            برای دکمه اول خصوصیت layout-width مقدار fill_parent تعیین شده پس تمام عرض صفحه را اشغال میکند

            <Button android:id="@+id/btnSave"
            
            android:layout_width="fill_parent"
            
            android:layout_height="wrap_content"
            
            android:text="@string/save"
            
            android:onClick="btnSaved_clicked"/>
            

            درحالی که برای دکمه دوم مقدار wrap_content قرار گرفته بدین مفهوم که عرض دکمه به اندازه محتوی آن مشخص شود.

            ImageButton یک دکمه که دارای تصویر را نمایش میدهد آدرس تصویر در خصوصیت src درج شده در این مثال از تصویر آیکون برنامه استفاده میکنیم

            <ImageButton android:id="@+id/btnImg1"
            
            android:layout_width="fill_parent"
            
            android:layout_height="wrap_content"
            
            android:src="@drawable/ic_launcher" />
            

            ابزار نمایش EditText نیز برای دریافت رشته از کاربر میباشد که همانگونه که نمایش داده شده مقدار خصوصیت layout_width برابر با تمام عرض صفحه و layout_height برابر با محتوی ورودی میشود

            <ImageButton android:id="@+id/btnImg1"
            
            android:layout_width="fill_parent"
            
            android:layout_height="wrap_content"
            
            android:src="@drawable/ic_launcher" />
            

            آموزش کاربردی اندروید-قسمت بیست و هفتم

            CheckBox نیز این امکان را به شما میدهد تا عبارتی را انتخاب و تیک دار کنید که اگر از حالت پیش فرض آن خوشتان نیامد میتوانید با خصوصیت style ظاهر آن را عوض کنید

            <CheckBox android:id="@+id/chkAutosave"
            
            android:layout_width="fill_parent"
            
            android:layout_height="wrap_content"
            
            android:text="Autosave" />
            

            قالب کلی برای خصوصیت style به شکل زیر است

            ?[package:][type:]name

            .

            RadioGroup نیز حاوی دو RadioButton است.RadioGroup بسیار مهم است چون با انتخاب یک RadioButton در یک RadioGroup تمامی RadioButton های قبل غیرفعال شده و تنها یک RadioButton در هر لحظه فعال خواهد بود

            <RadioGroup android:id="@+id/rdbGp1"
            
            android:layout_width="fill_parent"
            
            android:layout_height="wrap_content"
            
            android:orientation="horizontal" >
            
            <RadioButton android:id="@+id/rdb1"
            
            android:layout_width="wrap_content"
            
            android:layout_height="wrap_content"
            
            android:text="Option 1" />
            
            <RadioButton android:id="@+id/rdb2"
            
            android:layout_width="wrap_content"
            
            android:layout_height="wrap_content"
            
            android:text="Option 2" />
            
            </RadioGroup>
            

            با استفاده از خصوصیت orientation میتوان نحوه چیدمان RadioButton هارا نیز مشخص کرد.

            ToggleButton نیز همانگونه که مشخص است یک دکمه است که قابلیت خاموش و روشن شدن دارد.

            تمامی خصوصیات دارای مقدار خصوصیت id میباشند که این قابلیت را به ابزارها میدهد تا توسط متدهای ()View.findViewById و ()Activity.findViewById شناسایی و استفاده شوند.

            برای خوانایی بیشتر برنامه میتوان در فایل MainActivity.java چنین کدنویسی کنیم تا با کلیک برروی هر کدام از ابزار ها پیغام مناسب را نمایش دهد

            package net.learn2develop.BasicViews1;
            
            import android.app.Activity;
            
            import android.os.Bundle;
            
            import android.view.View;
            
            import android.widget.Button;
            
            import android.widget.CheckBox;
            
            import android.widget.RadioButton;
            
            import android.widget.RadioGroup;
            
            import android.widget.RadioGroup.OnCheckedChangeListener;
            
            import android.widget.Toast;
            
            import android.widget.ToggleButton;
            
            public class ViewPrj extends Activity {
            
                    public void btnSaved_clicked (View view) {
            
                             DisplayToast("You have clicked the Save button1");
                    }
            
                    /** Called when the activity is first created. */
            
                    @Override
            
                    public void onCreate(Bundle savedInstanceState) {
            
                             super.onCreate(savedInstanceState);
            
                             setContentView(R.layout.activity-main);
            
                             //---Button view---
            
                             Button btnOpen = (Button) findViewById(R.id.btnOpen);
            
                             btnOpen.setOnClickListener(new View.OnClickListener() {
            
                                       public void onClick(View v) {
            
                                                DisplayToast("You have clicked the Open button");
            
                                       }
            
                             });
            
                             //---CheckBox---
            
                             CheckBox checkBox = (CheckBox) findViewById(R.id.chkAutosave);
            
                             checkBox.setOnClickListener(new View.OnClickListener()
            
                             {
            
                                       public void onClick(View v) {
            
                                                if (((CheckBox)v).isChecked())
            
                                                          DisplayToast("CheckBox is checked");
            
                                                 else
            
                                                          DisplayToast("CheckBox is unchecked");
            
                                       }
            
                             });
            
            
            
                             //---RadioButton---
            
                             RadioGroup radioGroup = (RadioGroup) findViewById(R.id.rdbGp1);
            
                             radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener()
            
                             {
            
                                       public void onCheckedChanged(RadioGroup group, int checkedId) {
            
                                                RadioButton rb1 = (RadioButton) findViewById(R.id.rdb1);
            
                                                if (rb1.isChecked()) {
            
                                                          DisplayToast("Option 1 checked!");
            
                                                } else {
            
                                                          DisplayToast("Option 2 checked!");
            
                                                }
            
                                       }
            
                             });
            
            
            
                             //---ToggleButton---
            
                             ToggleButton toggleButton =
            
                                                (ToggleButton) findViewById(R.id.toggle1);
            
                             toggleButton.setOnClickListener(new View.OnClickListener()
            
                             {
            
                                       public void onClick(View v) {
            
                                                if (((ToggleButton)v).isChecked())
            
                                                          DisplayToast("Toggle button is On");
            
                                                else
            
                                                         DisplayToast("Toggle button is Off");
            
                                       }
            
                             });
            
                    }
            
            
            
                    private void DisplayToast(String msg)
            
                    {
            
                             Toast.makeText(getBaseContext(), msg,
            
                                                Toast.LENGTH_SHORT).show();
            
                    }
            
            }
            

            روش کار

            برای اینکه رویدادی که به واسطه یک ابزار نمایش رخ داده است را کنترل کنید میبایسیتی ابتدا به وسیله متد() findViewById که متعلق به کلاس پایه Activity است آن را پیدا کنید این کار با ID آن انجام میده ایم

                    //---Button view---                  
            Button btnOpen = (Button) findViewById(R.id.btnOpen);
            

            متد setOnClickListner()

            یک فراخوان برای کنترل رویداد در هنگام کلیک ابزار نمایش ثبت میکند

                btnOpen.setOnClickListener(new View.OnClickListener() {
            
                                       public void onClick(View v) {
            
                                                DisplayToast("You have clicked the Open button");
            
                                       }
            

            رویداد onClick نیز وقتی کاربر دکمه را کلیک کند اتفاق می افتد.

            برای اینکه حالت کنونی CheckBox را دریابیم باید آرگومان متد ()onClick را به صورت CheckBox تبدیل و سپس با استفاده از متد ()isCheked وضعیت آن را بررسی میکنیم

              //---CheckBox---
            
                             CheckBox checkBox = (CheckBox) findViewById(R.id.chkAutosave);
            
                             checkBox.setOnClickListener(new View.OnClickListener()
            
                             {
            
                                       public void onClick(View v) {
            
                                                if (((CheckBox)v).isChecked())
            
                                                          DisplayToast("CheckBox is checked");
            
                                                 else
            
                                                          DisplayToast("CheckBox is unchecked");
            
                                       }
            
                             });
            

            در مورد RadioButton باید با استفاده از متد  ()setOnChekedChangeLinstner در RadioGroup یک فراخوان را ثبت کرده تا هنگام تغییرات در وضعیت انتخاب RadioButton آن متد اجرا گردد:

                          //---RadioButton---
            
                             RadioGroup radioGroup = (RadioGroup) findViewById(R.id.rdbGp1);
            
                             radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener()
            
                             {
            
                                       public void onCheckedChanged(RadioGroup group, int checkedId) {
            
                                                RadioButton rb1 = (RadioButton) findViewById(R.id.rdb1);
            
                                                if (rb1.isChecked()) {
            
                                                          DisplayToast("Option 1 checked!");
            
                                                } else {
            
                                                          DisplayToast("Option 2 checked!");
            
                                                }
            
                                       }
            
                             });
            

            وقتی یک RadioButton کلیک میشود متد ()onCheckedChanged فراخوانی میگردد.سپس با استفاده از متد ()isChecked وضعیت این ابزار نمایش را در میابیم.

            ToggleButton نیز کاملا شبیه CheckBox عمل میکند.

            بنابراین برای کنترل رویداد ابزارهای نمایش ابتدا یک رجوع به آن ابزار نمایش ایجاد کرده سپس یک callback ثبت میکنیم تا رویداد کنترل شود.البته راه دیگری هم وجود دارد برای مثال به تکه کد زیر دقت فرمایید

            <Button android:id="@+id/btnSave"
            
                android:layout_width="fill_parent"
            
                android:layout_height="wrap_content"
            
                android:text="@string/save"
            
                android:onClick="btnSaved_clicked"/>
            

            خصوصیت onClick حاوی نام متدی است که در هنگام کلیک کردن دکمه صدا زده میشود حال تنها کافیست مطابق زیر برای کنترل این رویداد از این نام استفاده کنیم

            public void btnSaved_clicked (View view) {
            
                             DisplayToast("You have clicked the Save button1");
            
                    }
            

            این روش کمی ساده تر بنظر میرسد و بسته به نظر خود میتوان از یکی از روش ها استفاده کرد.

            مدرس : خانم مهندس داودی نژاد

            آموزش اندروید فصل سوم قسمت هشتم

            آموزش اندروید فصل سوم قسمت دهم

            اشتراک گذاری

            پست های مرتبط

            دستورات جریان کنترل (Control flow statements) یا دستورات شرطی و حلقه ها در زبان برنامه نویسی دارت Dart

            دستورات جریان کنترل (Control flow statements) یا دستورات شرطی و حلقه ها در زبان برنامه نویسی دارت Dart

            30 بهمن 1400

            دستورات شرطی و حلقه ها در زبان برنامه نویسی دارت (Dart)


            ادامه مطلب
            آموزش عملگرها یا Operator ها در زبان برنامه نویسی دارت یا Dart

            آموزش عملگرها یا Operator ها در زبان برنامه نویسی دارت یا Dart

            30 بهمن 1400

            آموزش عملگرها یا Operator ها در زبان برنامه نویسی دارت (Dart)


            ادامه مطلب
            توابع در زبان برنامه نویسی دارت (Dart)

            توابع در زبان برنامه نویسی دارت (Dart)

            27 بهمن 1400

            توابع در زبان برنامه نویسی دارت (Dart)


            ادامه مطلب

            دیدگاهتان را بنویسید لغو پاسخ

            نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

            ساخت اپلیکیشن های موبایل

            • ساخت اپلیکیشن فروشگاهی
            • ساخت اپلیکشن ابزاری و خدماتی
            • ساخت اپلیکیشن آموزشی
            • و هزاران موضوع دیگر

             
            کلیک کنید

            آخرین دیدگاه ها

            • 7 خرداد 1401

              داودی نظر در آموزش استفاده از ckeditor همراه با آپلود عکس در لاراول 6

            • 6 فروردین 1401

              yasaman نظر در راست چین کردن متن در فیگما Figma

            • 3 فروردین 1401

              رضا نظر در مفاهیم Observable و Observer در RxJava

            تجاری اپ در شبکه های اجتماعی

            لوگوی تایید پرداخت آنلاین

            2015-2022 © تمامي حقوق مادي و معنوي اين وب سايت نزد تجاری اپ محفوظ بوده و هر گونه کپي برداري از مطالب پيگرد قانوني به همراه دارد! | طراح سایت : ProgRun
            سفارش پروژه
                      هیچ نتیجه ای یافت نشدمشاهده همه نتایج