آموزش ArcToolbar در برنامه نویسی اندروید

سلام دوستان در این سری از آموزش برنامه نویسی اندروید به آموزش ArcToolbar در برنامه نویسی اندروید می پردازیم Toolbar های متریال دیزاین زیادی را به شما معرفی کردیم در این آموزش به Toolbar Arc می پردازیم که در سال 2017 بسیار معروف شد در ادامه می توانید پیش نماشی از آن را مشاهده کنید.

به علت بالا بودن حجم gif از لینک زیر برای دیدن آن استفاده کنید.
لینک پیش نمایش
برای اینکه از این کتاب خانه متریال استفاده کنید لازم است وارد فایل Build.gradle از نوع Module شده سپس در بخش dependencies خط زیر را اضافه کنید.

dependencies {
  implementation 'com.massivedisaster.widget:arctoolbarview:0.0.1'
}

dependencies {

implementation 'com.massivedisaster.widget:arctoolbarview:0.0.1'

}

در صورتی که implementation برای شما کار نکرد از compile استفاده کنید.
پروژه را sync کنید مثل همیشه قندشکن فراموش نشه !
برای اینکه از این نوع View استفاده کنید لازم است Root شما از نوع CoordinatorLayout استفاده کنید (پس لازم است کتاب خانه support را نیز اضافه کنید)
ابتدا یک فایل به نام content_arc_toolbar_view ایجاد کنید و هرچیزی که دوست دارید درآن نمایش داده شود را در آن قرار دهید (این فایل باید در پوشه layout باشد.)

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/text_margin"
        android:text="programchi the best programming site !" />
</android.support.v4.widget.NestedScrollView>

<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.widget.NestedScrollView 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"

app:layout_behavior="@string/appbar_scrolling_view_behavior">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_margin="@dimen/text_margin"

android:text="programchi the best programming site !" />

</android.support.v4.widget.NestedScrollView>

در این فایل ما فقط یک متن قرار داده ایم (بیشتر باید در آن محتوا باشد تا Arc مشخص شود !)
سپس در layout اصلی از آن استفاده می کنیم نام layout ما برابر با 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.massivedisaster.sample.MainActivity">
    <com.massivedisaster.widget.ArcToolbarView
        android:id="@+id/topArc"
        android:layout_width="match_parent"
        android:layout_height="@dimen/arc_height"
        android:layout_alignParentTop="true"
        android:background="@color/colorPrimary" />
    <com.massivedisaster.widget.ArcToolbarView
        android:id="@+id/bottomArc"
        android:layout_width="match_parent"
        android:layout_height="@dimen/arc_height"
        android:layout_alignParentBottom="true"
        android:background="@color/colorPrimary"
        android:rotation="180" />
    <FrameLayout
        android:id="@+id/txtLongtext"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/bottomArc"
        android:layout_below="@+id/topArc">
        <include layout="@layout/content_arc_toolbar_view" />
    </FrameLayout>
</RelativeLayout>

<?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:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="com.massivedisaster.sample.MainActivity">

<com.massivedisaster.widget.ArcToolbarView

android:id="@+id/topArc"

android:layout_width="match_parent"

android:layout_height="@dimen/arc_height"

android:layout_alignParentTop="true"

android:background="@color/colorPrimary" />

<com.massivedisaster.widget.ArcToolbarView

android:id="@+id/bottomArc"

android:layout_width="match_parent"

android:layout_height="@dimen/arc_height"

android:layout_alignParentBottom="true"

android:background="@color/colorPrimary"

android:rotation="180" />

<FrameLayout

android:id="@+id/txtLongtext"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_above="@id/bottomArc"

android:layout_below="@+id/topArc">

</FrameLayout>

</RelativeLayout>

در بالا از ArcToolbar بدون استفاده از CoordinatorLayout به کار رفته است ! (به خوبی شاید نمایش داده نشود)
در ادامه یک نمونه دیگر را می توانید مشاهده کنید.

<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">
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="180dp">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:expandedTitleTextAppearance="@style/TextAppearance.AppCompat.Headline"
            app:expandedTitleMarginBottom="50dp"
            app:toolbarId="@+id/toolbar">
            <com.massivedisaster.widget.ArcToolbarView
                android:id="@+id/arcToolbar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@android:color/transparent" />
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" >
            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <include layout="@layout/content_arc_toolbar_view" />
</android.support.design.widget.CoordinatorLayout>

<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">

<android.support.design.widget.AppBarLayout

android:id="@+id/appbar"

android:layout_width="match_parent"

android:layout_height="180dp">

<android.support.design.widget.CollapsingToolbarLayout

android:id="@+id/toolbar_layout"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:fitsSystemWindows="true"

app:layout_scrollFlags="scroll|exitUntilCollapsed"

app:expandedTitleTextAppearance="@style/TextAppearance.AppCompat.Headline"

app:expandedTitleMarginBottom="50dp"

app:toolbarId="@+id/toolbar">

<com.massivedisaster.widget.ArcToolbarView

android:id="@+id/arcToolbar"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@android:color/transparent" />

<android.support.v7.widget.Toolbar

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

app:layout_collapseMode="pin" >

</android.support.v7.widget.Toolbar>

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

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

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

این آموزش هم به پایان رسید.

موفق و پیروز باشید.

مطالعه بیشتر

آموزش ArcToolbar در برنامه نویسی اندروید

مطالب مشابه

یک پاسخ به “آموزش ArcToolbar در برنامه نویسی اندروید”

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

مطالب مشابه

یک پاسخ به “آموزش ArcToolbar در برنامه نویسی اندروید”

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

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