آموزش نحوه اضافه کردن باتن(Button) یا ویوها به تولبار(toolbar) در اندروید

منتشرشده توسط حامد قنبری در تاریخ

 

 

از اندروید5  به بعد نوار ابزار  یا toolbar جایگزین action bar  شده است. در این آموزش ما قصد داریم با استفاده از support v7 library نحوه کار کردن با تولبار را برای دوستان آموزش دهیم. هدف ما اجرای برنامه ای با یک تولبار با آیکون  ، ‌Buttonو TextView است که توسط نسخه های قدیمی تر Android نیز پشتیبانی می شود.

مرحله 1: بررسی وابستگی Gradle

ماژول پروژه خود را باز کنید و مطمئن شوید وابستگی زیر را اعمال کرده اید.:

  dependencies {
        compile fileTree(dir: 'libs', include: ['*.jar'])
        compile 'com.android.support:appcompat-v7:23.1.1'
    }

مرحله 2:

به لایوت پروژه خود به آدرس res / layout / activity_main.xml بروید و نوار ابزار خود را به عنوان  ویجت قابل نمایش به آن اضافه کنید. سپس در داخل آن  یک  RelativeLayout ایجاد کنید و در داخل لایه والد آن چند ویو از جمله یک Button  و یک TextViewایجاد کنید به شکل زیر:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay">


        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="The ToolBar in android"
                android:id="@+id/title"
                android:layout_centerVertical="true"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:id="@+id/button"
                android:text="clickme"
                android:layout_marginLeft="57dp"
                android:layout_marginStart="57dp"
                android:layout_alignParentTop="true"
                android:layout_toRightOf="@+id/title"
                android:layout_toEndOf="@+id/title" />
        </RelativeLayout>
        </android.support.v7.widget.Toolbar>


    </android.support.design.widget.AppBarLayout>


</android.support.design.widget.CoordinatorLayout>

در پروژه خود به مسیر res / menu / menu_main.xml بروید و یک عنصر جدید را با أن اضافه کنید (مانند ثبت نام). توجه کنید که در صورت نبودن فایل menu  بر روی res  یا resource   پروژه کلیک راست کنید و از آیتم های ظاهر شده گزینه Android resource directory  را کلیک می کنیم و از پنجره شده و از قسمت resource type  گزینه menu  را انتخاب کرده و گزینه ok  را می زنیم:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity">

    <item
        android:id="@+id/action_click"
        android:orderInCategory="300"
        android:title="User"
        android:icon="@drawable/image_icon"
        app:showAsAction="ifRoom"></item>

</menu>

لازم است تصویری در ابعاد کوچک با نام image_icon به منظور نشان دادن آیکن در تولبار در drawable  خود قرار دهید.

مرحله 4: اضافه کردن نوار ابزار به Activity

کلاس MainActivity.java را باز کرده و تولبار   و ویوها را بر اساس آیدی برای کلاس تعریف می کنیم . افزون بر آن  لازم است که در متدهای menu کارکرد action_click  را تعریف کنیم  بدین صورت که با کلیک بر روی آن آیتم پیام متنی نشان داده شود.

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main3);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        
        Button btn = (Button)findViewById(R.id.button);
        final TextView text = (TextView)findViewById(R.id.title);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "شما بر روی باتن کلیک کردید", Toast.LENGTH_LONG).show();
                text.setText("your title");
            }
        });



    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_click) {
            Toast.makeText(Main3Activity.this, "Action clicked", Toast.LENGTH_LONG).show();
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}


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

کپی برداری از محتوای سایت psrd، ممنوع بوده و پیگرد قانونی دارد. (تنها استفاده شخصی کاربران ، مجاز است) (کپی برداری توسط سایر وب سایت ها  غیرقانونی بوده و در صورت رویت به ستادسازماندهی اطلاع داده خواهد شد.


1 دیدگاه

حامد قنبری · آگوست 24, 2018 در 1:02 ب.ظ

خواهش می کنم

دیدگاهتان را بنویسید

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

-- بارگیری کد امنیتی --