آموزش برنامه نویسی اندروید با اندروید استودیو (بخش پنجاه و دوم: برنامه نویسی کلیپ بورد (ClipBoard) در اندروید )

استاندارد

در این بخش از برنامه نویسی اندروید، می خواهیم نحوه ساخت کلیپ بورد (ClipBoard) های ساده را به شما آموزش دهیم.

کلیپ بورد (clipboard) یک حافظه ی موقت است که تصاویر،متن و ..در این محیط به طور موقت ذخیره می شوند تا بعدا مورد استفاده قرار بگیرد و یا حذف شود.

این بخش را به صورت پروژه محور، انجام می دهیم.

من یک پروژه به نام Gsm-ClipBoard در اندروید استودیو ایجاد می کنم. به سراغ فایل Layout برنامه یعنی activity_main.xml می روم.

این فایل همان طور که می دانید در مسیر res->Layout می باشد.

کاری که می خواهیم انجام دهیم اینست که در یک EditText یا همان PlainText ، متنی را بنویسیم سپس با استفاده از ابزار دکمه button کپی کنیم. و در EditText دیگر، آن را با دکمه ی Button دیگر، Paste نماییم. پس به چهار ابزار نیاز داریم.

پس دو ابزار PlainText از جعبه ابزار (Palette) انتخاب کرده و به لایه اپلیکیشن می کشم.

سپس دو ابزار دکمه Button نیز به داخل این لایه می کشم. و اسم یکی از آن ها را Copy نام دیگری را Paste می گذارم.

من برای دو دکمه ی Button که ایجاد کردم خاصیت دیگری به اسم onClick اضافه می کنم.

این خاصیت شبیه Listener عمل می کند و باعث می شود که وقتی بر روی دکمه Button کلیک کردیم، دکمه تابعی که به آن در این قسمت معرفی می شود را اجرا نماید.

به عنوان مثال :

android:onClick="copy"

در قسمت جاوای برنامه باید متدی به نام copy وجود داشته باشد تا وقتی بر روی این دکمه کلیک شد، عملیات مربوط به آن اجرا شوند.

پس کد دکمه های ما به این صورت است:

<Button
        android:text="Copy"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/editText"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp"
        android:onClick="copy"
        android:id="@+id/button" />

    <Button
        android:text="Paste"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/editText2"
        android:layout_alignLeft="@+id/button"
        android:layout_alignStart="@+id/button"
        android:layout_marginTop="80dp"
        android:onClick="paste"
        android:id="@+id/button2" />

کد Layout اپلیکیشن

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    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"
    tools:context="com.gsm_developers.clipboard_gsm.MainActivity">

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="textPersonName"
        android:text="Copy this text"
        android:ems="10"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="83dp"
        android:id="@+id/editText" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="textPersonName"
        android:text="Paste The text here"
        android:ems="10"
        android:layout_alignParentBottom="true"
        android:layout_alignRight="@+id/editText"
        android:layout_alignEnd="@+id/editText"
        android:layout_marginBottom="154dp"
        android:id="@+id/editText2" />

    <Button
        android:text="Copy"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/editText"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp"
        android:onClick="copy"
        android:id="@+id/button" />

    <Button
        android:text="Paste"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/editText2"
        android:layout_alignLeft="@+id/button"
        android:layout_alignStart="@+id/button"
        android:layout_marginTop="80dp"
        android:onClick="paste"
        android:id="@+id/button2" />
</RelativeLayout>

به سراغ فایل MainActivity.java می رویم تا کدهای جاوای برنامه را بنویسیم.

در کلاس MainActivity ، ابتدا یک شی به نام Clipboard از کلاس ClipboardManager ، می سازیم. تا عملیات مربوط به Copy & Paste را بتوانیم با آن مدیریت نماییم.

private ClipboardManager Clipboard;

سپس یک شی به نام Clipdata از کلاس ClipData می سازیم تا مقدار رشته ای که می خواهیم از EditText اول، کپی کنیم را در خود نگه دارد.

private ClipData Clipdata;

همچنین دو شی نیز از کلاس EditText می سازیم تا بتوانیم ابزارهای CopyText و PasteText را به کد جاوای برنامه معرفی کنیم.

private EditText CopyText,PasteText;

در متد ()onCreate این اشیایی که ساختیم را مقدار دهی می کنیم. تا در هنگام اجرای برنامه دارای مقدار باشند.

Clipboard = (ClipboardManager)getSystemService(CLIPBOARD_SERVICE);
CopyText = (EditText)findViewById(R.id.editText);
PasteText = (EditText)findViewById(R.id.editText2);

البته Clipdata که شی از کلاس ClipData بود را در توابعی که می خواهیم بنویسیم، مقدار دهی می کنیم.

در خارج از متد ()onCreate یک تابع برای عملیات کپی مینویسیم. اسم این تابع را copy می گذاریم.

public void copy(View view){
        String text = CopyText.getText().toString();
        Clipdata = ClipData.newPlainText("text", text);
        Clipboard.setPrimaryClip(Clipdata);
        Toast.makeText(getApplicationContext(), "Text Copied",
                Toast.LENGTH_SHORT).show();
    }

کد بالا ابتدا متغیری به نام text را از نوع رشته معرفی کرده و مقدار آن را برابر با متنی که در ابزار EditText اول وجود دارد می گذارد.

سپس در خط دوم، مقدار آن را به عنوان ورودی متد newPlainText برای ذخیره ی نوشته ، در آبجکت Clipdata می ریزیم.

دستور getPrimaryClip که یکی از اجزای آبجکت Clipboard است، کلیپ بورد را برای عملیات کپی و پیس فراخوانی می کند.

مقدار آرگومان ورودی این متد (getPrimaryClip) برای کپی کردن، آبجکت Clipdata که شی از کلاس ClipData می باشد، است که در بالا آن را مقدار دهی کردیم.

در خط آخر نیز، عملیات کپی کردن متن، به کاربر با استفاده از یک Toast اطلاع داده می شود.

در قسمت بعدی یک متد برای Paste کردن به نام paste می نویسیم.

public void paste(View view){
        ClipData neveshte = Clipboard.getPrimaryClip();
        ClipData.Item item = neveshte.getItemAt(0);
        String text = item.getText().toString();
        PasteText.setText(text);
        Toast.makeText(getApplicationContext(), "Text Pasted",
                Toast.LENGTH_SHORT).show();
    }

در کد بالا و اولین خط با استفاده از متد getPrimaryClip ، آبجکت Clipdata که مقدار آن را در کد بالا از ورودی EditText اول گرفته بودیم، فراخوانی کرده و در یک آبجکت جدید به نام neveshte که نوعی از کلاس ClipData می باشد می ریزیم.

در دو خط بعدی مقدار نوشته ای که درون این آبجکت است، گرفته شده و به رشته تبدیل می شود.

در خط چهارم، مقدار این رشته را به عنوان ورودی متن در ابزار EditText دوم ( که با آیدی PasteText آن را می شناسیم)، می ریزیم.

در خط آخر نیز با استفاده از پیغام Toast موفق بودن عملیات به کاربر نشان داده می شود.

کدهای MainActivity.java

package com.gsm_developers.clipboard_gsm;

import android.content.ClipData;
import android.content.ClipboardManager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private ClipboardManager Clipboard;
    private ClipData Clipdata;
    private EditText CopyText,PasteText;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Clipboard = (ClipboardManager)getSystemService(CLIPBOARD_SERVICE);
        CopyText = (EditText)findViewById(R.id.editText);
        PasteText = (EditText)findViewById(R.id.editText2);
    }

    public void copy(View view){
        String text = CopyText.getText().toString();
        Clipdata = ClipData.newPlainText("text", text);
        Clipboard.setPrimaryClip(Clipdata);
        Toast.makeText(getApplicationContext(), "Text Copied",
                Toast.LENGTH_SHORT).show();
    }

    public void paste(View view){
        ClipData neveshte = Clipboard.getPrimaryClip();
        ClipData.Item item = neveshte.getItemAt(0);
        String text = item.getText().toString();
        PasteText.setText(text);
        Toast.makeText(getApplicationContext(), "Text Pasted",
                Toast.LENGTH_SHORT).show();
    }
}

پروژه را Run می کنیم.

بر روی دکمه ی Copy کلیک می کنیم تا نوشته ی درون EditText ، کپی شود.

مشاهده می کنید که با استفاده از یک Toast این موضوع به اطلاع می رسد.

حال بر روی دکمه Paste کلیک می کنیم. مشاهده می کنید که نوشته ی بالا در ابزار EditText دوم، Paste شد.

آموزش برنامه نویسی اندروید با اندروید استودیو (بخش چهل و دوم: ساخت TextWatcher در اندروید)

استاندارد

آیا تاکنون پیش آمده که در یک اپلیکیشن یا سایتی، بخواهید رمزی را برای اکانت خود انتخاب کنید و در عین حال مشاهده کنید که میزان قدرت رمز شما به شما نشان داده می شود؟

برای ساخت چنین ویژگی، باید از TextWatcher استفاده نمایید.

در این آموزش نحوه ساخت یک TextWatcher را به شما آموزش می دهیم.

 

TextWatcher، طول یک تکست را اندازه می گیرد و بر حسب طول تکست ، عملیاتی که ما می خواهیم را برای ما انجام می دهد.

از آنجایی که معمولا از TextWatcher به عنوان بررسی امنیت پسوردها استفاده می شود، در این پروژه نیز نحوه پیاده سازی یک TextWatcher را بر روی رمز عبور و یا همان پسورد را ، آموزش می دهیم.

من یک پروژه به نام TextWatcher-Gsm در اندروید استودیو ایجاد می کنم. در ابتدا به سراغ لایه اپلیکیشن یا همان activity_main.xml می روم.

سپس از قسمت ابزارها (Paletteها)، یک LinearLayout به لایه اپلیکیشن برنامه اضافه می کنم.

در قسمت بعدی، دو TextView یکی برای نمایش کلمه Strength و دیگری برای نمایش میزان Strength به LinearLayout اضافه می کنم. کمی پایینتر از لایه LinearLayout ، یک ابزار TextPlain یا همان EditText ، نیز به لایه اصلی اپلیکیشن اضافه می کنم.

کد اصلی لایه اپلیکیشن

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    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"
    tools:context="com.gsm_developers.textwatcher_gsm.MainActivity">

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#0baff4"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/textViewPassword"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:text=" Strength : "
            android:textColor="#fff"
            android:textSize="20dp" />

        <TextView
            android:id="@+id/textViewPasswordStrength"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:text="Not Eneterd"
            android:textColor="#fff"
            android:textSize="23dp"
            android:textStyle="bold" />
    </LinearLayout>
    <EditText
        android:id="@+id/Password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/linearLayout"
        android:layout_below="@+id/linearLayout"
        android:layout_marginTop="105dp"
        android:ems="10"
        android:gravity="center_horizontal"
        android:hint="Enter Password"
        android:inputType="textPassword"
        android:maxLength="20"
        android:textSize="23dp" >

        <requestFocus />
    </EditText>
</RelativeLayout>

کارمان با لایه اصلی اپلیکیشن ، تمام شده است. به سراغ فایل MainActivity.java می رویم تا کدهای جاوای برنامه را بنویسیم.

در ابتدا TextView و EditText را به صورت Global معرفی می کنیم. یعنی در MainActivity و قبل از تابع ()onCreate .

EditText Password;
TextView PasswordStrengthIndiactor;

سپس در تابع onCreate با استفاده از آیدی که در لایه اپلیکیشن معرفی نمودیم، ،TextViewی که کارش نشان دادن قدرت پسورد است را معرفی می کنیم. (آیدی textViewPasswordStrength )

در خط بعدی، پسورد (آیدی Password) که محل نوشتن پسورد ما است را به کد جاوای برنامه معرفی می کنیم.

PasswordStrengthIndiactor = (TextView) findViewById(R.id.textViewPasswordStrength);
Password = (EditText) findViewById(R.id.Password);

در مرحله بعدی، مقدار Password را به تابع mTextEditorWatcher می فرستم تا عملیات مربوطه بر روی آن انجام شود. (این تابع را در قسمت بعدی تکمیل می کنیم)

Password.addTextChangedListener(mTextEditorWatcher);

یک تابع private final TextWatcher ایجاد می کنیم. سپس با استفاده از رویدادهای beforeTextChanged و onTextChanged ، می توانیم در زمان قبل از تغییر EditText و در هنگام تغییر EditText ، عملیات های لازم را انجام دهیم.

معرفی تابع mTextEditorWatcher :

private final TextWatcher mTextEditorWatcher = new TextWatcher() {
// کدهای بعدی اینجا نوشته می شوند
};

معرفی دو رویداد beforeTextChanged و onTextChanged :

public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            PasswordStrengthIndiactor.setText("Not Entered");
        }

public void onTextChanged(CharSequence s, int start, int before, int count) {

        }

در مرحله بعدی، یک رویداد afterTextChanged معرفی می کنیم، تا در هنگامی که متن را داخل EditText نوشتیم بر اساس طول متن پسورد، و با استفاده از دستورهای if و else ، میزان قدرت پسورد را به ما نشان دهد.

public void afterTextChanged(Editable s) {
            if (s.length() == 0)
                PasswordStrengthIndiactor.setText("Not Entered");
            else if (s.length() < 6)
                PasswordStrengthIndiactor.setText("آسان");
            else if (s.length() < 10)
                PasswordStrengthIndiactor.setText("متوسط");
            else if (s.length() < 15)
                PasswordStrengthIndiactor.setText("قوی");
            else
                PasswordStrengthIndiactor.setText("قوی تر");

            if (s.length() == 20)
                PasswordStrengthIndiactor.setText("رمز عبور به حداکثر طول رسیده است!");
        }

کد کامل MainActivity

package com.gsm_developers.textwatcher_gsm;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.widget.EditText;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    EditText Password;
    TextView PasswordStrengthIndiactor;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        PasswordStrengthIndiactor = (TextView) findViewById(R.id.textViewPasswordStrength);
        Password = (EditText) findViewById(R.id.Password);

        Password.addTextChangedListener(mTextEditorWatcher);

    }

    private final TextWatcher mTextEditorWatcher = new TextWatcher() {

        public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            PasswordStrengthIndiactor.setText("Not Entered");
        }

        public void onTextChanged(CharSequence s, int start, int before, int count) {

        }

        public void afterTextChanged(Editable s) {
            if (s.length() == 0)
                PasswordStrengthIndiactor.setText("Not Entered");
            else if (s.length() < 6)
                PasswordStrengthIndiactor.setText("آسان");
            else if (s.length() < 10)
                PasswordStrengthIndiactor.setText("متوسط");
            else if (s.length() < 15)
                PasswordStrengthIndiactor.setText("قوی");
            else
                PasswordStrengthIndiactor.setText("قوی تر");

            if (s.length() == 20)
                PasswordStrengthIndiactor.setText("رمز عبور به حداکثر طول رسیده است!");
        }
    };
}

حال برنامه آماده اجراست. مشاهده می کنید که در تصویر زیر، برای این پسورد، مقدار Strength متوسط در نظر گرفته شده است:

آموزش برنامه نویسی اندروید با اندروید استودیو (بخش چهل و یکم: تفاوت بین دو حالت LinearLayout و RelativeLayout برای نمایش فایل xml متناظر با activity ها)

استاندارد

زمانی که برای یک activity ، یک فایل xml متناظر می سازیم، معمولا نوع نمایش عناصر فایل xml متناظر آن، به صورت یکی از دو حالت LinearLayout و RelativeLayout می باشد. تفاوت این دو نوع نمایش، در نحوه قرارگیری ابزارهای مختلف در کنار یکدیگر می باشد.

برای مثال اگر ما یک دکمه Button و یک TextView داشته باشیم، اگر از حالت LinearLayout استفاده کنیم، این دو ابزار دقیقا در کنار هم چیده می شوند. ولی اگر از حالت RelativeLayout استفاده کنیم، این دو ابزار بر روی همدیگر قرار می گیرند!

یک پروژه جدید به نام Layout-Gsm ایجاد می کنم.

اگر فایل activity_main.xml را در بخش Res -> Layout انتخاب نماییم (قسمت Text) ، کدهای زیر را در ابتدا مشاهده می کنیم.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    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"
    tools:context="com.gsm_developers.layout_gsm.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />
</RelativeLayout>

به تگ RelativeLayout (یک تگ شروع و یک تگ پایان) دقت کنید. این تگ است که مشخص کرده است که نوع نمایش فایل xml به صورت RelativeLayout باشد. بنابراین اگر بخواهیم که نوع نمایش، به صورت LinearLayout باشد، باید دو عبارت RelativeLayout را به LinearLayout تبدیل کنیم، یعنی کدها باید به صورت زیر تغییر داده شوند :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    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"
    tools:context="com.gsm_developers.layout_gsm.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />
</LinearLayout>

حالت LinearLayout

همان طور که قبلا گفته شد وقتی حالت نمایش فایل Xml به صورت LinearLayout باشد، ابزار ها به ترتیب در کنار هم چیده می شوند و بر روی هم قرار نمی گیرند. برای درک بهتر این موضوع، دو دکمه Button را هم به لایه اپلیکیشن می کشیم.

وقتی به قسمت Design فایل activity_main.xml می رویم، همان طور که در تصویر بالا مشاهده می کنید، عناصر به صورت مرتب و در یک ردیف افقی در کنار هم قرار می گیرند.

این سوال پیش می آید که اگر بخواهیم عناصر به صورتی عمودی پشت سر هم قرار بگیرند چی کار کنیم؟ به تصویر زیر دقت کنید. در قسمتی که فلش نشان داده شده است، اگر بر روی آن قسمت کلیک کنیم، چینش عناصر تغییر می کند و از افقی به عمودی و یا برعکس تبدیل می شود.

 

در این تصویر، با کلیک بر روی این گزینه، ابزارها به صورتی عمودی چیده شدند.

لازم به ذکر است که این گزینه فقط برای حالت LinearLayout فعال است.

حالت RelativeLayout

حال دوباره به قسمت Text فایل activity_main.xml می رویم. و تگ Xml آن را به RelativeLayout تغییر می دهیم. به قسمت Design می رویم و مشاهده می کنید که ابزارها بر روی همدیگر افتاده اند.

می توانید مکان ابزارها را با ماوس، تغییر دهید. ولی در حالت LinearLayout این مورد امکان پذیر نبود.

اگر به قسمت Text فایل activity_main.xml بروید، مشاهده می کنید که مثلا در ابزار Button کد زیر وجود دارد:

android:layout_below="@+id/textView2"

این کد حاکی از آنست که این عنصر، زیر عنصری با آیدی textView2 قرار دارد. پس اگر دیدید که با جابه جایی ابزاری، ابزار دیگری نیز جابه جا شد، با حذف اینچنین کدهایی می توانید این قسمت را غیرفعال نمایید.

اگر گزینه ای که در زیر با فلش مشخص شده است را بزنید، مقدار layout_width ابزاری که انتخاب کرده ایم، از wrap_content به match_parent تغییر می کند.

بدیهی است که گزینه کناری آن نیز این تغییر را برای Layout_height به وجود می آورد.

“آموزش برنامه نویسی اندروید با اندروید استودیو (بخش چهلم: Shape در اندروید(قسمت دوم))

استاندارد

در بخش قبلی از آموزش های اندروید استودیو، کار با Shape را یاد گرفتیم.

فهمیدیم که Shape در اصل به چه کاری می آید. سپس یک Button ایجاد کردیم و سعی کردیم با استفاده از Shape شکل ظاهری آن را تغییر دهیم.

همچنین برای Buttonی که نوشته بودیم، دو شکل ظاهری تعریف کردیم. که اگر بر روی Button کلیک شد، شکل ظاهری آن تغییر کند. و برای آن از Selector استفاده نمودیم.

در این بخش از آموزش های اندروید استودیو، سعی می کنیم در ابتدا یک Button گرد ایجاد نماییم. سپس در ادامه آموزش ، با Gradient کار خواهیم کرد.

ایجاد یک Button گرد

گاهی اوقات نیاز دارید که یک دکمه ی گرد برای اپلیکیشن اندرویدی خود طراحی کنید.

کار را با همان پروژه ی قبلی پیش می بریم. ولی اگر پروژه جدیدی ایجاد کرده اید کافیست به سراغ فایل activity_main.xml یا همان لایه اپلیکیشن اندرویدی بروید و یک دکمه با آیدی Button ایجاد نمایید.

برای ایجاد یک دکمه گرد، به سراغ پوشه drawable در دایرکتوری res می رویم و بر روی آن کلیک راست می کنیم.

سپس از قسمت New به Drawable resource file بروید و بر روی آن کلیک کنید.

در پنجره ای که باز می شود اسم فایل (File Name) را circlebutton ( دکمه گرد ) می گذارم. شما هر نامی دوست دارید به آن بدهید.

حال یک فایل xml به نام circlebutton برای شما در پوشه drawable ایجاد شده است.

در جلسه پیش هم گفته شد، دوستانی که با اکلیپیس کار کرده اند قسمتی برای ایجاد Shape داشته اند. ولی ما به ناچار روش دیگری را انتخاب می کنیم.

بدین منظور بر روی circlebutton.xml کلیک کنید تا محتویات آن به صورت xml برای شما باز شود. مشاهده می کنید که تگی به نام selector وجود دارد. آن تگ را حذف و بنویسید shape تا تگ shape را ایجاد نمایید.

حال می توانید کد های زیر را در تگ shape بنویسید:

<stroke
        android:width="2dp"
        android:color="#4d2929" />
    <corners
        android:radius="20dp"
        />
    <solid
        android:color="#206af2"
        />

    <padding
        android:left="5dp"
        android:top="5dp"
        android:right="5dp"
        android:bottom="5dp"
        />

کد کامل circlebutton.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >

    <stroke
        android:width="2dp"
        android:color="#4d2929" />
    <corners
        android:radius="20dp"
        />
    <solid
        android:color="#206af2"
        />

    <padding
        android:left="5dp"
        android:top="5dp"
        android:right="5dp"
        android:bottom="5dp"
        />

</shape>

همانند بخش قبلی باید به سراغ فایل activity_main.xml برویم و circlebutton.xml را به عنوان آدرس background را به دکمه بدهیم:

android:background="@drawable/circlebutton"

کد کامل دکمه Button من:

<Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/circlebutton"
        android:id="@+id/button" />

اگر به قسمت لایه اپلیکیشن یا همان activity_main.xml در قسمت Design بروید، مشاهده می کنید که شکل دکمه شما به این صورت تغییر کرده است:

آموزش کار با gradient

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

Gradient در واقع باعث می شود که دکمه شما به صورت لایه به لایه، رنگ های متفاوتی داشته باشد.

همانند قبل، به سراغ دایرکتوری drawable در res می رویم و بر روی آن کلیک راست می کنیم. سپس یک فایل xml ایجاد می کنیم.

اسم فایلی که من ایجاد کردم، shapebackground است. لازم به ذکر است که این فایل نوعی shape است و محتویات آن در زیر به شما نشان داده شده است:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <corners
        android:radius="14dp"
        />
    <gradient
        android:angle="90"
        android:centerX="35%"
        android:centerColor="#2c96de"
        android:startColor="#E8E8E8"
        android:endColor="#c64444"
        android:type="linear"
        />
    <padding
        android:left="0dp"
        android:top="0dp"
        android:right="0dp"
        android:bottom="0dp"
        />
    <size
        android:width="270dp"
        android:height="60dp"
        />
    <stroke
        android:width="3dp"
        android:color="#254458"
        />

</shape>

در مورد خاصیت های padding , stroke, corner در آموزش های قبل توضیح داده شد.در حال حاضر می خواهیم خاصیت gradient را بررسی کنیم.

همانطور که می بینید در gradient خاصیت startColor برای شروع رنگ و خاصیت EndColor برای پایان دادن به رنگ ایجاد شده است. همچنین از خاصیت angle برای زاویه ای که به رنگ شیب داده می شود استفاده شده است. که شما می توانید با تغییر دادن آن زاویه ی دلخواه را به رنگ لیوت بدهید.خاصیت type را برابر با linear قرار دادیم که به این مفهوم است که شروع شیب از کناره ها باشد.

به سراغ فایل activity_main.xml رفته و در قسمت text برای background دکمه Button کد زیر را می نویسیم: (آدرس shapebackground را به آن می دهیم)

android:background="@drawable/shapebackground"

کد کامل دکمه من:

 

<Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/shapebackground"
        android:id="@+id/button" />

خروجی نهایی به صورت زیر است:

آموزش برنامه نویسی اندروید با اندروید استودیو (بخش سی و نهم: Shape در اندروید)

استاندارد

زمانی که شما در حال ایجاد یک برنامه ی کاربردی هستید نیازی نیست که از گرافیک یا تصاویر برای زیباسازی رابط کاربری خود استفاده کنید. زیرا اگر همچین کاری انجام دهید هم این امکان وجود دارد که سرعت برنامه ی شما پائین بیاید و هم حجم فایل خروجی برنامه زیاد شود!

در نتیجه برای افزایش سرعت و کاهش حجم برنامه ی خود باید از shape ها استفاده کنید.

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

در این آموزش با شیپ ها آشنا می شوید و با استفاده از آن شکل یک Button را تغییر می دهید. این کار را هم با xml و هم با کدهای جاوا می توان انجام داد که در ادامه ی آموزش ها کدهای جاوا را هم کار خواهیم کرد.

یک پروژه ایجاد می کنم و نام آن را Shape-Gsm می گذارم.

به سراغ فایل لایه اپلیکیشن یا همان activity_main.xml می روم. یک Button را از قسمت Paletteها به لایه اپلیکیشن اندروید می کشم. می خواهیم برای این دکمه انواع ظاهر سازی ها را انجام دهیم.

باید یک فایل xml جدید در قسمت drawable بسازیم. برای این کار بر روی پوشه Drawbale کلیک راست نمایید. سپس از قسمت New به Drawable resource file بروید و بر روی آن کلیک کنید.

در پنجره ای که باز می شود، اسم فایل را myshape می گذارم و بدون هیچ تغییر دیگری بر روی Ok کلیک می کنم.

 

 

دوستانی که با اکلیپیس کار کرده اند قسمتی برای ایجاد Shape داشته اند. ولی ما به ناچار با همین روش پیش رفتیم و در درون فایلی که ایجاد شده است تغییرات را انجام می دهیم . تا فایل ما هم Shape شود!!

بدین منظور بر روی myshape کلیک کنید تا محتویات آن به صورت xml برای شما باز شود. مشاهده می کنید که تگی به نام selector وجود دارد. آن تگ را حذف و بنویسید shape تا تگ shape را ایجاد نمایید.

در داخل تگ shape، کدهای زیر را کپی کنید.

 

<corners
        android:radius="11dp"
        />
    <solid
        android:color="#DE983C"
        />
    <padding
        android:left="0dp"
        android:top="0dp"
        android:right="0dp"
        android:bottom="0dp"
        />
    <size
        android:width="270dp"
        android:height="60dp"
        />
    <stroke
        android:width="4dp"
        android:color="#32D93D"
        />

در واقع محتویات فایل myshape من به این شکل است.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <corners
        android:radius="11dp"
        />
    <solid
        android:color="#DE983C"
        />
    <padding
        android:left="0dp"
        android:top="0dp"
        android:right="0dp"
        android:bottom="0dp"
        />
    <size
        android:width="270dp"
        android:height="60dp"
        />
    <stroke
        android:width="4dp"
        android:color="#32D93D"
        />

</shape>

توضیحات:

در قسمت اول که rectangle می باشد باعث می شود که شکا Button شما به صورت مربع باشد و گزینه های دیگری هم دارد که شما می توانید از آنها استفاده کنید.تگ Stroke یک مرزی را در دور تا دور دکمه ایجاد می کند و هر چقدر مقدار آن بیشتر باشد آن خطی که به صورت مرز دور دکمه است پهن تر می شود.corner گوشه های  دکمه را از تمامی جهت ها قوس می دهد و از آن حالت تیز بودن خارج می کند.تگ solid هم یک رنگ برای داخل دکمه در نظر می گیرد.بعد از تمامی این کارها باید فایل xml که حاوی کدهای shape است را به Button اختصاص دهید.

برای این کار، به سراغ فایل activity_main.xml رفته و در قسمت Text این فایل ( کدهای xml) ، به دکمه Button خاصیت جدیدی به نام android:background اضافه می کنیم.

android:background="@drawable/myshape"

این خاصیت، به آدرس Shape که ساخته ایم، اشاره می کند که در پوشه drawable با اسم myshape وجود دارد.

کد کامل دکمه Button من:

<Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/myshape"
        android:id="@+id/button" />

اگر به قسمت Design لایه اپلیکیشن خود، بروید؛ مشاهده می کنید که دکمه Button شما به این شکل در آمده است.

تغییر ظاهر دکمه Button در هنگام کلیک

گاهی اوقات شما می خواهید که وقتی روی یک Button کلیک می کنید ظاهر آن تغییر کرده و نمای زیبایی به باتن دهید.این کار باعث می شود که ظاهر دکمه ی شما در هنگام کلیک کردن و در هنگامی که کلیکی روی آن صورت نگرفته تفاوت داشته باشد.

در قسمت قبلی، دیدید که تگ selector را پاک کردیم و به جایش تگ shape را گذاشتیم. برای آن که وقتی بر روی دکمه کلیک می کنیم، ظاهر آن تغییر نماید، این بار باید این کار را از طریق selector انجام دهیم!

باید یک فایل xml جدید در قسمت drawable بسازیم. برای این کار بر روی پوشه Drawbale کلیک راست نمایید. سپس از قسمت New به Drawable resource file بروید و بر روی آن کلیک کنید.

در پنجره باز شده نام فایل را به myselector تغییر می دهم.

بدون ایجاد تغییرات دیگری بر روی ok کلیک می کنم تا فایل ایجاد شود.

حال کد زیر را درون تگ selector فایل myselector قرار می دهم.

<item android:state_pressed="true" android:drawable="@drawable/pressd"></item>

<item android:state_enabled="true" android:drawable="@drawable/enable"></item>

محتویات داخل فایل myselector من به این شکل است:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/pressd"></item>

    <item android:state_enabled="true" android:drawable="@drawable/enable"></item>
</selector>

در قسمت state_pressd شما آدرس آن فایل xml را که می خواهید زمانی که دکمه فشرده می شود تغییر ظاهر دهد را وارد می کنید.در واقع state_pressd مقدار trou دارد یعنی حالت pressd یا فشرده شدن آن درست است و در ادامه آدرس فایل داده می شود.در قسمت stte_enable هم که مقدار آن true می باشد آدرس فایل xml که می خواهید زمانی که هنوز روی دکمه کلیکی انجام نشده نمایش داده شود را وارد می کنید.

در کد “android:drawable=”@drawable/pressd مشکل پیش آمده است چون به رنگ قرمز در آمده است. به این علت است که فایل pressd در دایرکتوری drawable وجود ندارد. فایل pressd مشخص می کند که بر روی دکمه کلیک شده است. برای ایجاد آن دوباره یک فایل xml در پوشه drawable به نام pressd می سازیم. و محتویات آن را به صورت زیر تغییر می دهیم:

دقت کنید که این فایل نوعی shape است.

 

محتویات فایل pressd.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <corners
        android:radius="16dp"
        />
    <solid
        android:color="#FF58C728"
        />
    <padding
        android:left="0dp"
        android:top="0dp"
        android:right="0dp"
        android:bottom="0dp"
        />
    <size
        android:width="250dp"
        android:height="50dp"
        />
    <stroke
        android:width="3dp"
        android:color="#e74040"
        />

</shape>

در کد “android:drawable=”@drawable/enable نیز مشکل پیش آمده است چون به رنگ قرمز در آمده است. به همان علتی که برای فایل pressd نیز مشکل پیش آمده بود.

 برای ایجاد آن یک فایل xml در پوشه drawable به نام enable می سازیم. و محتویات آن را به صورت زیر تغییر می دهیم:

دقت کنید که این فایل نیز نوعی shape است.

محتویات فایل enable.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <corners
        android:radius="16dp"
        />
    <solid
        android:color="#284dc7"
        />
    <padding
        android:left="0dp"
        android:top="0dp"
        android:right="0dp"
        android:bottom="0dp"
        />
    <size
        android:width="250dp"
        android:height="50dp"
        />
    <stroke
        android:width="3dp"
        android:color="#b540e7"
        />

</shape>

باید آدرس فایل myselector را به دکمه Button بدهیم. برای این کار، همانند بالا به سراغ فایل activity_main.xml رفته و در قسمت Text این فایل ( کدهای xml) ، به دکمه Button خاصیت جدیدی به نام android:background اضافه می کنیم.

android:background="@drawable/myselector"

این خاصیت، به آدرس Shape که ساخته ایم، اشاره می کند که در پوشه drawable با اسم myselector وجود دارد.

کد کامل دکمه Button من:

<Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/myselector"
        android:id="@+id/button" />

از آنجایی که باید بر روی دکمه Button کلیک کنیم تا تغییرات را در آن ببینیم، برنامه را اجرا می کنیم.

این شکل برنامه در حالی است که بر روی دکمه Button کلیک نکرده ایم.

این هم شکل دکمه Button وقتی بر روی آن کلیک می کنیم.

آموزش برنامه نویسی اندروید با اندروید استودیو (بخش سی و هشتم: طراحی لایه جدید با استفاده از Toast سفارشی)

استاندارد

در پروژه ها و آموزش های قبلی از توست (Toast) استفاده کردیم. دیدیم که Toast یک پیغام چند لحظه ای را به کاربر نشان می داد.

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

در این آموزش می خواهیم با هم نحوه ساخت یک Toast سفارشی را یاد بگیریم که با سلیقه خود، آن را طراحی می کنیم. و همچنین از عکس دلخواه در آن استفاده می کنیم.

یک پروژه جدید به نام CustomToast-Gsm ایجاد می کنم.  حال به قسمت لایه اصلی اپلیکیشن یعنی activity_main.xml می رویم. سپس یک Button را به داخل لایه اپلیکیشن می کشیم.

وظیفه این دکمه اینست که وقتی بر روی Button کلیک شود، پیغام Toast ما نشان داده شود.

به این قسمت خوب توجه کنید. چون برای ساخت یک Toast سفارشی ، باید یک فایل xml جدید در قسمت Layout بسازیم.

برای این کار بر روی پوشه Layout کلیک راست می کنیم. سپس از قسمت New به Layout Resource File می رویم و بر روی آن می زنیم. ( مراحلی که گفته شد را می توانید در عکس مشاهده نمایید )

در پنجره ای که باز شده است، FileName و یا همان اسم فایل را mytoast (حروف کوچک) می گذاریم. Root element و Directory name باید مقدار LinearLayout و Layout را داشته باشند ( به طور پیش فرض این دو فعال هستند)

حال مشاهده می کنید که یک فایل layout جدید به نام mytoast اضافه شده است که می توان همانند activity_main.xml به این لایه نیز ابزار های مختلف را اضافه نمود.

از قسمت Paletteها یک textView به این لایه (mytoast) اضافه می کنیم. سپس یک ImageView نیز به این لایه اضافه می کنیم.

وقتی که ImageView را به داخل لایه mytoast اپلیکیشن می کشیم، از ما تصویری برای نمایش می خواهد که طبق شکل زیر این آیکون اندروید را برای آن انتخاب می کنیم.

کد کامل mytoast.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:weightSum="1">

    <TextView
        android:text="در حال بارگذاری، لطفا منتظر بمانید"
        android:id="@+id/textView"
        android:layout_height="70dp"
        android:layout_marginLeft="150dp"
        android:layout_marginTop="150dp"
        android:layout_width="120dp" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:srcCompat="@mipmap/ic_launcher"
        android:id="@+id/imageView" />

</LinearLayout>

پس تا به اینجا یک دکمه Button به لایه activity_main.xml اضافه کردیم. سپس یک لایه جدید به نام mytoast.xml ساختیم. و در آن لایه، یک ابزار TextView و یک ابزار ImageView اضافه نمودیم.

حال که لایه های برنامه را تکمیل کرده ایم ، برای طراحی و زیبا سازی Toast می خواهیم کارهای دیگری انجام دهیم.

بدین منظور بر روی پوشه drawable کلیک راست می کنیم و از قسمت New به Drawable Resource File می رویم.

 

در پنجره باز شده نام فایل را Toast_border می گذاریم. و RootElement را Shape انتخاب می کنیم.

نکته:

اگر شما قادر به ساخت Shape نبودید می توانید محتویات داخل فایل toast_border.xml را به شکل زیر تغییر دهید تا به یک فایل shape تغییر داده شود.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

</shape>

برای طراحی و زیبا سازی، ما از کدهای زیر استفاده کرده ایم .بعدا با تغییر این کدها می توانید به شیوه خودتان طراحی Toast را انجام دهید.

کد کامل toastborder.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <stroke
        android:width="4dp"
        android:color="#FFF" />

    <padding
        android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />

    <corners
        android:radius="10dp" />

    <solid
        android:color="#00A1E4"></solid>

</shape>

نکته: طراحی رابط کاربری در بخش بعد توضیح داده می شود.

پس از این که کارمان با قسمت لایه ها انجام شد، به سراغ فایل activity_main.xml می رویم تا کدهای جاوای آن را بنویسیم. در مرحله اول همانند قبل، کد Button را معرفی میکنیم و برای آن یک تابع می نویسیم تا وقتی روش کلیک شود، Toast را فراخوانی نماید.

private Button ClickToShowToast;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ClickToShowToast = (Button) findViewById(R.id.button);

        ClickToShowToast.setOnClickListener(new View.OnClickListener() {

            public void onClick(View v) {

                showCustomAlert();
            }
        });
    }

تابع Toast که در قسمت پایین کد جاوای ما و درون MainActivity نوشته است ، نیز بدین شرح است:

public void showCustomAlert() {

        Context context = getApplicationContext();
        LayoutInflater inflater = getLayoutInflater();

        View toastRoot = inflater.inflate(R.layout.mytoast, null);

        Toast toast = new Toast(context);

        toast.setView(toastRoot);
        toast.setGravity(Gravity.CENTER_HORIZONTAL | Gravity.CENTER_VERTICAL, 0, 0);
        toast.setDuration(Toast.LENGTH_LONG);
        toast.show();

    }

یک لایه با استفاده از mytoast.xml می سازد.

LayoutInflater inflater = getLayoutInflater();

سپس لایه را برای نمایش toast فراخوانی می کند.

View toastRoot = inflater.inflate(R.layout.mytoast, null);

و در آخر مقادیر لایه را به Toast جهت نمایش ست می کند.

toast.setView(toastRoot);
toast.setGravity(Gravity.CENTER_HORIZONTAL | Gravity.CENTER_VERTICAL, 0, 0);
toast.setDuration(Toast.LENGTH_LONG);

با استفاده از دستور setGravity یک مقدار جاذبه برای Toast در نظر گرفته ایم. با استفاده از دستور setDuration نیز یک زمان نمایش برای Toast در نظر می گیریم.

کد کامل MainActivity

package com.gsm_developers.customtoast_gsm;

import android.content.Context;
import android.content.DialogInterface;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private Button ClickToShowToast;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ClickToShowToast = (Button) findViewById(R.id.button);

        ClickToShowToast.setOnClickListener(new View.OnClickListener() {

            public void onClick(View v) {

                showCustomAlert();
            }
        });
    }

    public void showCustomAlert() {

        Context context = getApplicationContext();
        LayoutInflater inflater = getLayoutInflater();

        View toastRoot = inflater.inflate(R.layout.mytoast, null);

        Toast toast = new Toast(context);

        toast.setView(toastRoot);
        toast.setGravity(Gravity.CENTER_HORIZONTAL | Gravity.CENTER_VERTICAL, 0, 0);
        toast.setDuration(Toast.LENGTH_LONG);
        toast.show();

    }
}

مشاهده می کنید که خروجی Toast سفارشی ما بدین شرح است.

آموزش برنامه نویسی اندروید با اندروید استودیو (بخش بیست و هشتم: پیاده سازی RatingBar در اپلیکیشن اندرویدی)

استاندارد

این بخش از آموزش اندروید استودیو، به راه اندازی ریتینگ بار (Rating Bar) در اندروید می پردازیم.

برای آن دسته از دوستانی که نمی دانند Rating Bar چیست، ابتدا توضیحاتی در این رابطه می دهیم. بعضی اوقات لازم است که در برنامه اندرویدی که طراحی نموده ایم، به قسمتی امتیاز دهی کنیم.

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

ریتینگ به معنای درجه بندی و یا رتبه بندی است.

ratingoutput1

در رابطه با پیاده سازی ریتینگ بار، دو عمل باید انجام شود. یکی ایجاد ریتینگ بار و دیگری خواندن اطلاعات از ریتینگ بار!  زیرا نیاز داریم تا امتیازاتی که کاربران در ریتینگ بار می دهند را بتوانیم، گردآوری کنیم.

در این بخش با ایجاد پروژه ای، سعی شده است که کار با این ابزار نیز، به شما آموزش داده شود.

من یک پروژه به نام RatingBar-Gsm ایجاد کرده ام.

از قسمت Paletteها در activity_main.xml ، یک RatingBar به لایه اپلیکیشن خود، اضافه نموده ام.

android-studio-beginners-gsm-developers_91

مشاهده می کنید که یک Rating Bar به صورت Empty به لایه اپلیکیشن، اضافه می شود.

حال یک دکمه Button نیز به لایه اپلیکیشن خود، اضافه می کنیم.

کاری که میخواهیم انجام دهیم اینست که کاربر با زدن دکمه Button ، امتیازی که داده است توسط اپلیکیشن گرفته بشه، و سپس به کاربر نشان داده شود.

کد کامل Activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    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"
    tools:context="com.gsm_developers.ratingbar_gsm.MainActivity">

    <RatingBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="61dp"
        android:id="@+id/ratingBar" />

    <Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/ratingBar"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="133dp"
        android:id="@+id/button" />
</RelativeLayout>

حال به سراغ کد جاوای برنامه یا همان MainActivity.java می رویم.

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

سپس یک رشته به نام Rating معرفی کرده تا اطلاعات را از Rating Bar بگیرد و با استفاده از توست (Toast) به کاربر نشان دهد.

کد زیر که در تابع ()onCreate نوشته می شود، ابتدا دکمه Button و RatingBar را معرفی کرده و سپس اطلاعات را با استفاده از رشته از RatingBar می گیرد و به کار نمایش می دهد.

final RatingBar ratbar = (RatingBar) findViewById(R.id.ratingBar);

        Button button = (Button) findViewById(R.id.button);

        button.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {

                String rating=String.valueOf(ratbar.getRating());

                Toast.makeText(getApplicationContext(), rating, Toast.LENGTH_LONG).show();

            }
        });

کد کامل برنامه (قسمت جاوا)

package com.gsm_developers.ratingbar_gsm;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.RatingBar;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // معرفی ریتینگ بار
        final RatingBar ratbar = (RatingBar) findViewById(R.id.ratingBar);
        // معرفی دکمه
        Button button = (Button) findViewById(R.id.button);
        //  buttonمعرفی رویداد دکمه 
        button.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                // معرفی یک رشته برای گرفتن اطلاعات از ریتینگ بار
                String rating=String.valueOf(ratbar.getRating());
                // نمایش اطلاعات رشته ای که از ریتینگ بار، اطلاعات گرفته بود به کاربر با استفاده از توست
                Toast.makeText(getApplicationContext(), rating, Toast.LENGTH_LONG).show();

            }
        });
    }
}

کد بالا را اجرا می کنیم و خروجی زیر را مشاهده می کنید.

android-studio-beginners-gsm-developers_93

در این قسمت این ریتینگ بار به صورت پیش فرض با رنگ خودش آورده شد. بعدا در آموزش های بعدیمان، سعی می کنیم نحوه شخصی سازی Rating Bar را نیز اضافه نماییم.