垂直滚动时工具栏渐变颜色

时间:2017-05-31 20:42:36

标签: android gradient android-appbarlayout

进入我的工具栏,以蓝色开始......当我滚动10%的colapsing工具栏时,它会保持更黑,20%更黑...... 100%全回......

任何人都有任何想法我该怎么做?

我正在使用此代码,但它只是从蓝色跳到黑色......

        appBar.addOnOffsetChangedListener(new AppBarStateChangeListener() {
        @Override
        public void onStateChanged(AppBarLayout appBarLayout, State state) {
            if (state == State.COLLAPSED) {
                btCollapseCards.setImageDrawable(ContextCompat.getDrawable(getContext(), R.drawable.ic_keyboard_arrow_down_white_24dp));
                if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
                    toolbarLayout.setBackgroundDrawable(ContextCompat.getDrawable(getActivity(), R.drawable.background_gradient_black));
                    llCardTitle.setBackgroundDrawable(ContextCompat.getDrawable(getActivity(), R.drawable.background_gradient_black));
                } else {
                    toolbarLayout.setBackground(ContextCompat.getDrawable(getActivity(), R.drawable.background_gradient_black));
                    llCardTitle.setBackground(ContextCompat.getDrawable(getActivity(), R.drawable.background_gradient_black));
                }
            } else if (state == State.EXPANDED) {
                btCollapseCards.setImageDrawable(ContextCompat.getDrawable(getContext(), R.drawable.ic_keyboard_arrow_up_white_24dp));
                if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
                    toolbarLayout.setBackgroundDrawable(ContextCompat.getDrawable(getActivity(), R.color.colorPrimary));
                    llCardTitle.setBackgroundDrawable(ContextCompat.getDrawable(getActivity(), R.color.colorPrimary));
                } else {
                    toolbarLayout.setBackground(ContextCompat.getDrawable(getActivity(), R.color.colorPrimary));
                    llCardTitle.setBackground(ContextCompat.getDrawable(getActivity(), R.color.colorPrimary));
                }
            }


                int toolBarHeight = toolbar.getMeasuredHeight();
            int appBarHeight = appBarLayout.getMeasuredHeight();
            Float f = ((((float) appBarHeight - toolBarHeight) + verticalOffset) / ( (float) appBarHeight - toolBarHeight)) * 255;
            viewBackground.getBackground().setAlpha(255 - Math.round(f));
        }
    });

请帮帮我......

编辑#01

插入此代码,在我向上滚动时产生我想要的效果...但是当我向下滚动时,不会得到相同的效果。

                int toolBarHeight = toolbar.getMeasuredHeight();
            int appBarHeight = appBarLayout.getMeasuredHeight();
            Float f = ((((float) appBarHeight - toolBarHeight) + verticalOffset) / ( (float) appBarHeight - toolBarHeight)) * 255;
            viewBackground.getBackground().setAlpha(255 - Math.round(f));

1 个答案:

答案 0 :(得分:0)

  

试试这个例子

<强> activity_main.xml中

<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.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">


            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                android:background="@drawable/profile_pic"
                android:id="@+id/profile_id"
                app:layout_collapseMode="parallax" />


            <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.design.widget.CollapsingToolbarLayout>

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

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/abc_search_url_text_normal"/>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ffe5e5e5"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:layout_marginTop="10dp">

            <include layout="@layout/card_layout" />

            <include layout="@layout/card_layout" />

            <include layout="@layout/card_layout" />

        </LinearLayout>


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

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

<强> card_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"

   >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="12dp">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Lorem ipsum"
            android:textSize="20sp"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/text_content"
            android:textSize="18sp"/>

    </LinearLayout>

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

<强> MainActivity.java

public class MainActivity extends AppCompatActivity {

    private CollapsingToolbarLayout collapsingToolbarLayout = null;
    TabLayout tabs;

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


        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        ActionBar actionBar = getSupportActionBar();
        actionBar.setDisplayHomeAsUpEnabled(true);

        collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
        collapsingToolbarLayout.setTitle(getResources().getString(R.string.user_name));
        tabs = (TabLayout) findViewById(R.id.tabs);

        dynamicToolbarColor();

        toolbarTextAppernce();
    }


    private void dynamicToolbarColor() {
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.profile_pic);
        Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
            @Override
            public void onGenerated(Palette palette) {
                collapsingToolbarLayout.setContentScrimColor(palette.getMutedColor(R.attr.colorPrimary));
                collapsingToolbarLayout.setStatusBarScrimColor(palette.getMutedColor(R.attr.colorPrimaryDark));
//                tabs.setBackgroundColor(palette.getMutedColor(R.attr.colorPrimary));
            }
        });
    }


    private void toolbarTextAppernce() {
        collapsingToolbarLayout.setCollapsedTitleTextAppearance(R.style.collapsedappbar);
        collapsingToolbarLayout.setExpandedTitleTextAppearance(R.style.expandedappbar);
    }



    @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) {
        return super.onOptionsItemSelected(item);
    }


}

<强>的build.gradle

apply plugin: 'com.android.application'

android {
    compileSdkVersion 23
    buildToolsVersion "23.0.1"

    defaultConfig {
        applicationId "com.tutorialsbuzz.collapsingtoolbardemo"
        minSdkVersion 7
        targetSdkVersion 22
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

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