طریقه نوشتن یک collapsing toolbar بصورت سفارشی
باسلام خدمت دوستان
احتمالا شما هم تولبارهایی رو دیدید که وقتی اسکرول میشه تغییر پیدا میکنه
مثلا چیزی که در دیجی کالا وجود داره
من نحوه ساخت collapsing toolbar رو بلدم منتها نمیدونم باید چطور سفارشیش کنم مثلا وقتی اسکرول میکنم به بالا رنگ تولبارم به سمن قرمز بره ووقتی به سمت پایین میرم رنگش به سمت سفید بره
کلی هم اموزش خارجی بود که گفته بود باید bihavior رو شخصی سازی کنم ولی موفق نشدم
از دوستان اگه کسی کار کرده لطف کنه کمکم کنه
ممنون از همگی دوستان
سلام.
جواب دوستمون درسته و شاید با استفاده از این لینک بتونید مشکلتونو حل کنید.
من نمی دونم چه جوری توی کامنت باید لینک بذارم،بخاطر همین تو قسمت پاسخ،جوابو نوشتم:)
محتویات فایل Xml مورد نیاز :
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:nestedScrollingEnabled="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/imageView111"
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="#ff0000"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<TextView
android:id="@+id/txt_actionbar_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="Toolbar"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#000000" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<ImageView
android:id="@+id/imageView222"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#00ff00" />
<android.support.v4.widget.NestedScrollView
android:id="@+id/nestedScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/imageView222"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Text View"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
کدهایی که باید تو فایل جاوای مربوط به فایل Xml بالا اضافه کنید :
NestedScrollView nestedScrollView = (NestedScrollView) findViewById(R.id.nestedScrollView);
nestedScrollView.setOnScrollChangeListener(new NestedScrollView.OnScrollChangeListener() {
@Override
public void onScrollChange(NestedScrollView v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
if (scrollY > oldScrollY) {
Log.i(TAG, "Scroll DOWN");
hideViews();
}
if (scrollY < oldScrollY) {
Log.i(TAG, "Scroll UP");
showViews();
}
if (scrollY == 0) {
Log.i(TAG, "TOP SCROLL");
}
if (scrollY == (v.getChildAt(0).getMeasuredHeight() - v.getMeasuredHeight())) {
Log.i(TAG, "BOTTOM SCROLL");
}
}
});
//-----------------------------------------
private void hideViews() {
toolbar.setBackgroundColor(Color.WHITE);
}
private void showViews() {
toolbar.setBackgroundColor(Color.YELLOW);
}
فقط یه مشکلی که هست اینه که اگه اسکرول ویو خالی باشه،اون متد setOnScrollChangeListener اجرا نمیشه،اما اگه مثلا مقدار textView رو از Text View به یه متن بزرگ تغییر بدین،اونوقت این متدی که گفتم اجرا میشه...(ضمنا شما باید اسلایدر رو به جای imageView111 قرار بدین و می تونید imageView222 رو از فایل Xml بالا حذف کنید. ).
پاسخگویی و مشاهده پاسخ های این سوال تنها برای اعضای ویژه سایت امکان پذیر است .
چنانچه تمایل دارید به همه بخش ها دسترسی داشته باشید میتوانید از این بخش لایسنس این آموزش را خریداری نمایید .
