آموزش ساخت رابط کاربری (UI) در اندروید

در این قسمت می‌خواهیم برخی از viewهای مهم در ساخت رابط کاربری را به طور مختصر معرفی کنیم.

Text View

یک TextView معمولا برای نمایش متن به کار می‌رود. این متن را می‌توان به صورت مستقیم، از طریق strings.xml یا به صورت html به TextView اختصاص داد.

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="This is a test" />

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

خصوصیت‌هایی که برای شخصی‌سازی قابل تغییر هستند شامل موارد زیر است:

تعداد خطوط نمایش داده شدهandroid:lines=”int
تعداد حداکثر خطوط قابل نمایشandroid:maxLines=”int
اندازه نوشته‌android:textSize=”size
رنگ نوشتهandroid:textColor=”color

Button

یک Button معمولا شامل یک متن و یا یک تصویر (یا هر دو) است که مشخص کننده یک عملیات وقتی که کاربر آن را لمس می‌کند است.

بر اساس کاربرد آن به یکی از سه شکل زیر می‌توان یک Button را تعریف کرد.

  • به همراه متن با استفاده از Button
<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_text"
    ... />
  • به همراه تصویر با استفاده از ImageButton
<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/button_icon"
    android:contentDescription="@string/button_icon_desc"
    ... />
  • به همراه متن و تصویر با استفاده از Button و خصوصیت android:drawableLeft (android:drawableRight)
<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_text"
    android:drawableLeft="@drawable/button_icon"
    ... />

برای مدیریت کلیک بر روی Button دو راه پیش رو داریم:

استفاده از android:onClick

با استفاده از خصوصیت android:onClick در هنگام تعریف Button در Layout مورد نظر می‌توان کلیک بر روی Button را مدیریت کرد، به این صورت که اسم متدی که در Activity مورد نظر مدیریت کلیک را بر عهده دارد را به خصوصیت android:onClick اختصاص می‌دهیم.

<Button xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/button_send"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_send"
    android:onClick="sendMessage" />

که در Activity به صورت زیر تعریف شده است:

/** Called when the user touches the button */
public void sendMessage(View view) {
    // Do something in response to button click
}

باید در نظر داشت که اسم متدی که به خصوصیت android:onClick اختصاص می‌دهیم باید موارد زیر را رعایت کند

  • حتما public باشد
  • حتما مقدار void را بازگرداند
  • حتما تنها پارامتر ورودی آن View باشد

استفاده از OnClickListener

می‌توان مدیریت کلیک را بیرون از Layout انجام داد. این کار زمانی مفید است که Button را در کدهای برنامه‌ی خود تولید می‌کنید و یا می‌خواهید مدیریت کلیک را در زیرکلاس‌های Fragment مربوطه انجام دهید.

برای انجام این کار کافی‌است یک شئ از View.OnClickListener تولید نموده و آن را به setOnClickListener(View.OnClickListener) اختصاص دهید.

Button button = (Button) findViewById(R.id.button_send);
button.setOnClickListener(new View.OnClickListener() {
    public void onClick(View v) {
        // Do something in response to button click
    }
});

Image View

یک ImageView برای نمایش یک تصویر به کار می‌رود. این تصویر می‌تواند از منابع داخل برنامه باشد یا از طریق اینترنت دانلود شود و یا از محتوای داخل دستگاه کاربر باشد.

<ImageView
    android:id="@+id/simpleImageView"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/lion" />

یکی از خصوصیاتی که در ImageViewها مورد استفاده قرار می‌گیرد android:scaleType است که نحوه قرار گیری تصویر در فضای مورد نظر را مشخص می‌کند. مقادیر این خصوصیت شامل

بدون تغییر در اندازه در مرکز فضاCENTER
به طور یکنواخت اندازه تصویر را تغییر می‌دهد تا تصویر اندازه بزرگترین بعد فضا شودCENTER_CROP
به طور یکنواخت اندازه تصویر را تغییر می‌دهد تا تصویر به طور کامل در فضا قرار گیردCENTER_INSIDE
اندازه تصویر را از مرکز تغییر می‌دهدFIT_CENTER
اندازه تصویر را از انتهای فضا تغییر می‌دهدFIT_END
اندازه تصویر را از ابتدای فضا تغییر می‌دهدFIT_START
اندازه تصویر را به گونه‌ای تغییر می‌دهد که فضای مورد نظر را پر کندFIT_XY
بر اساس ماتریس تصویر اندازه را تغییر می‌دهدMATRIX

Check Box

برای انتخاب یک یا چند مورد از یک مجموعه معمولا از CheckBox استفاده می‌شود، و معمولا به صورت لیست عمودی به نمایش گذاشته می‌شوند.

برای ایجاد هر یک از CheckBox در Layout یک CheckBox اضافه می‌کنیم. بخاطر اینکه مجموعه‌ای از CheckBoxها به کاربر امکان انتخاب چند مورد را می‌دهد، هر CheckBox به طور جداگانه مدیریت می‌شود.

مدیریت کلیک روی چک باکس

با استفاده از خصوصیت android:onClick در هنگام تعریف CheckBox در Layout مورد نظر می‌توان کلیک بر روی CheckBox را مدیریت کرد، به این صورت که اسم متدی که در Activity مورد نظر مدیریت کلیک را بر عهده دارد را به خصوصیت android:onClick اختصاص می‌دهیم.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <CheckBox android:id="@+id/checkbox_meat"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/meat"
        android:onClick="onCheckboxClicked"/>
    <CheckBox android:id="@+id/checkbox_cheese"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/cheese"
        android:onClick="onCheckboxClicked"/>
</LinearLayout>

که در Activity به صورت زیر تعریف شده است:

public void onCheckboxClicked(View view) {
    // Is the view now checked?
    boolean checked = ((CheckBox) view).isChecked();

    // Check which checkbox was clicked
    switch(view.getId()) {
        case R.id.checkbox_meat:
            if (checked)
                // Put some meat on the sandwich
            else
                // Remove the meat
            break;
        case R.id.checkbox_cheese:
            if (checked)
                // Cheese me
            else
                // I'm lactose intolerant
            break;
        // TODO: Veggie sandwich
    }
}

باید در نظر داشت که اسم متدی که به خصوصیت android:onClick اختصاص می‌دهیم باید موارد زیر را رعایت کند

  • حتما public باشد
  • حتما مقدار void را بازگرداند
  • حتما تنها پارامتر ورودی آن View باشد

نکته: برای تغییر وضعیت CheckBox می‌توان از setChecked(Boolean) یا toggle() استفاده کرد.

Radio Button

برای انتخاب یک گزینه از گزینه‌های موجود می‌توان از RadioButton استفاده کرد. هنگامی از RadioButton استفاده می‌کنیم که بخواهیم تمامی گزینه‌ها را به کاربر نشان دهیم در غیر اینصورت بهتر از Spinner استفاده کنیم.

برای ایجاد هر کدام از این Radio Buttonها کافی است از کلاس RadioButton در Layout خود استفاده کنید، اما، بخاطر اینکه هر یک از RadioButtonها منحصر به فرد هستند باید تمامی آنها را به صورت مجموعه به داخل یک RadioGroup ببرید. با گروه‌بندی آنها، می‌توان مطمئن بود که فقط یکی از آنها انتخاب شده است.

مدیریت کلیک روی Radio Button

با استفاده از خصوصیت android:onClick در هنگام تعریف RadioButton در Layout مورد نظر می‌توان کلیک بر روی RadioButton را مدیریت کرد، به این صورت که اسم متدی که در Activity مورد نظر مدیریت کلیک را بر عهده دارد را به خصوصیت android:onClick اختصاص می‌دهیم.

<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <RadioButton android:id="@+id/radio_pirates"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/pirates"
        android:onClick="onRadioButtonClicked"/>
    <RadioButton android:id="@+id/radio_ninjas"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/ninjas"
        android:onClick="onRadioButtonClicked"/>
</RadioGroup>
نکته: به دلیل اینکه RadioGroup فرزند LinearLayout است به طور پیش‌فرض به صورت عمودی چیده می‌شود.

که در Activity به صورت زیر تعریف شده است:

public void onRadioButtonClicked(View view) {
    // Is the button now checked?
    boolean checked = ((RadioButton) view).isChecked();

    // Check which radio button was clicked
    switch(view.getId()) {
        case R.id.radio_pirates:
            if (checked)
                // Pirates are the best
            break;
        case R.id.radio_ninjas:
            if (checked)
                // Ninjas rule
            break;
    }
}

باید در نظر داشت که اسم متدی که به خصوصیت android:onClick اختصاص می‌دهیم باید موارد زیر را رعایت کند

  • حتما public باشد
  • حتما مقدار void را بازگرداند
  • حتما تنها پارامتر ورودی آن View باشد

نکته: برای تغییر وضعیت RadioButton می‌توان از setChecked(Boolean) یا toggle() استفاده کرد.

Toggle Buttons

یک Toggle Button به کاربر اجازه می‌دهد از دوحالت یکی را انتخاب کند.

می‌توان از یک ToggleButton به صورت ابتدایی استفاده کرد. از اندروید ۴.۰ به بعد یک ToggleButton جدید به نام Switch اضافه شد که به صورت کشیدنی امکان تغییر حالت را می‌دهد. با استفاده از SwitchCompat می‌توان این قابلیت را به اندروید‌هیا ۲.۱ نیز برد.

برای تغییر وضعیت دکمه می‌توان از CompoundButton.setChecked() و یا CompoundButton.toggle() استفاده کرد.

Toggle Button
Switch

مدیریت کلیک روی ToggleButton

برای اینکه تشخیص بدهیم که کاربر وضعیت دکمه را تغییر داده است یک CompoundButton.OnCheckedChangeListener تعریف می‌کنیم و آن را به setOnCheckedChangeListener() اختصاص می‌دهیم:

ToggleButton toggle = (ToggleButton) findViewById(R.id.togglebutton);
toggle.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        if (isChecked) {
            // The toggle is enabled
        } else {
            // The toggle is disabled
        }
    }
});

Spinner

یک راه سریع برای انتخاب یک گزینه از میان مجموعه گزینه‌ها Spinner است. در حالت پیش‌فرض، یک Spinner گزینه فعلی را نشان می‌دهد، با کلیک بر روی آن یک منو باز می‌شود که بقیه گزینه‌ها را شامل می‌شود، که کاربر می‌تواند یکی از آنها را انتخاب کند.

برای اضافه کردن یک Spinner به صورت زیر عمل می‌کنیم:

<Spinner
    android:id="@+id/planets_spinner"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" />

برای ایجاد گزینه‌ها باید یک SpinnerAdapter در  Activity یا Fragment ایجاد کنیم.

ایجاد گزینه‌های Spinner

گزینه‌های مورد استفاده در Spinner می‌تواند از هر منبعی باشد، اما باید توسط SpinnerAdapterی مثل یک ArrayAdapter اگر به صورت آرایه است، یا CursorAdapter اگر از پایگاه داده گرفته می‌شوند، فراهم شوند

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

<resources>
    <string-array name="planets_array">
        <item>Mercury</item>
        <item>Venus</item>
        <item>Earth</item>
        <item>Mars</item>
        <item>Jupiter</item>
        <item>Saturn</item>
        <item>Uranus</item>
        <item>Neptune</item>
    </string-array>
</resources>

با داشتن آرایه‌ای مثل بالا، می‌توان از کد زیر در Activity یا Fragment برای فراهم کردن گزینه‌ها به Spinner استفاده کرد.

Spinner spinner = (Spinner) findViewById(R.id.spinner);
// Create an ArrayAdapter using the string array and a default spinner layout
ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this,
        R.array.planets_array, android.R.layout.simple_spinner_item);
// Specify the layout to use when the list of choices appears
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
// Apply the adapter to the spinner
spinner.setAdapter(adapter);

متد createFromResource() به ما این قابلیت را می‌دهد که یک ArrayAdapter از آرایه‌های رشته‌ای ایجاد کنیم. پارامتر سوم این متد یک Layout است که مشخص می‌کند گزینه‌ی انتخابی چگونه نمایش داده شود. simple_spinner_item توسط اندروید فراهم شده است و به صورت پیش‌فرض مورد استفاده قرار می‌گیرد، البته می‌توانید آن را بر اساس برنامه خود تغییر دهید.

حتما باید متد setDropDownViewResource(int) را فراخوانی کنید تا Layout گزینه‌ها در منو را مشخص شود. simple_spinner_dropdown_item توسط اندروید فراهم شده است.

در آخر نیز Adapter تولید شده را به Spinner با استفاده از setAdapter() اختصاص می‌دهیم.

مدیریت انتخاب Spinner توسط کاربر

وقتی که کاربر یک گزینه را از منوی باز شده انتخاب می‌کند، Spinner یک رخداد on-item-selected را دریافت می‌کند.

برای اینکه تشخیص بدهیم که کاربر گزینه‌ را تغییر داده است یک AdapterView.OnItemSelectedListener تعریف می‌کنیم و آن را به onItemSelected() اختصاص می‌دهیم:

Spinner spinner = (Spinner) findViewById(R.id.spinner);
spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
    public void onItemSelected(AdapterView<?> parent, View view,
            int pos, long id) {
        // An item was selected. You can retrieve the selected item using
        // parent.getItemAtPosition(pos)
    }

    public void onNothingSelected(AdapterView<?> parent) {
        // Another interface callback
    }
});
Was this article helpful?
Dislike 0
قبلی: آشنایی با مفاهیم اولیه شروع برنامه نویسی اندروید
بعدی: خواندن و نوشتن فایل در برنامه‌نویسی اندروید