آموزش Toolbar متریال دیزاین در برنامه نویسی اندروید

سلام دوستان در این سری از آموزش برنامه نویسی اندروید به آموزش Toolbar متریال دیزاین در برنامه نویسی اندروید می پردازیم یکی از بهترین متریال دیزاین سال 2016 که بسیار زیباست در ادامه می توانید پیش نمایشی از آن را مشاهده کنید با ما همراه باشید.

همانطور که مشاهده می کنید بسیار زیبا است و انیمیشن Smooth دارد.
برای استفاده از آن ابتدا وارد فایل Build.gradle شده از نوع Top Level و خط زیر را به بخش repositories اضافه کنید.

   maven { url "https://jitpack.io" }

حالا وارد فایل build.gradle شده خط زیر را به بخش dependencies اضافه کنید.

  compile 'com.github.yalantis:jellytoolbar:v1.0'

هم اکنون پروژه را sync کنید علت خطاهای گریدل را قبلا بررسی کرده ایم.
برای استفاده از آن می توانید همانند زیر استفاده کنید.

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <com.yalantis.jellytoolbar.widget.JellyToolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        app:cancelIcon="@drawable/ic_close"
        app:endColor="@color/colorEnd"
        app:icon="@drawable/ic_search"
        app:startColor="@color/colorStart"
        app:title="News Feed"
        app:titleTextColor="@android:color/white" />
</LinearLayout>

app:cancelIcon تصویری که برای کنسل کردن آن استفاده می شود.
android:background : تصویری را برای background قرار می دهد.
app:endColor زمانی که بروی دکمه کلیک می کنید رنگی در  آخر نمایش داده می شود.
app:startColor : رنگی که برای شروع استفاده می شود (فایل gif را تماشا کنید تا متوجه شودید)
app:title : برای قرار دادن عنوان استفاده شده است.
app:titleTextColor : برای تنظیم رنگ عنوان استفاده می شود.
و برای این که آن را hadle کنید مثل زیر عمل کنید.

public class MainActivity extends AppCompatActivity {
    private JellyToolbar toolbar;
    private AppCompatEditText editText;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar = (JellyToolbar) findViewById(R.id.toolbar);
        toolbar.getToolbar().setNavigationIcon(R.drawable.ic_menu);
        toolbar.setJellyListener(jellyListener);
        editText = (AppCompatEditText) LayoutInflater.from(this).inflate(R.layout.edit_text, null);
        editText.setBackgroundResource(R.color.colorTransparent);
        toolbar.setContentView(editText);
    }
    private JellyListener jellyListener = new JellyListener() {
        @Override
        public void onCancelIconClicked() {
            if (TextUtils.isEmpty(editText.getText())) {
                toolbar.collapse();
            } else {
                editText.getText().clear();
            }
        }
    };
}

برای اینکه یک جایی برای تایپ وجود داشته باشد یک فایل به نام edit_text.xml ایجاد کنید و کد زیر را در آن قرار دهید.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.AppCompatEditText xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorTransparent"
    android:lines="1"
    android:textColor="#7fffffff" />

ما برای استفاده از toolbar سفارشی از JellyToolbar استفاده کردیم ولی برای اینکه Collaps و expand اجرا شود برای toolbar یک Listener تعریف کردیم
 
این آموزش هم به پایان رسید.
 
موفق و موید باشید.

مطالعه بیشتر