美文网首页
实现Toolbar滑动半透明效

实现Toolbar滑动半透明效

作者: 咸鱼Jay | 来源:发表于2017-11-22 16:27 被阅读37次

1、先看看ScrollView滑动半透明效的布局文件

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

    <com.zuo.myapplication.MyScrollView
        android:id="@+id/scrollView"
        android:clipToPadding="false"
        android:clipChildren="false"
        android:paddingTop="?attr/actionBarSize"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <android.support.v7.widget.LinearLayoutCompat
            android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" >

            <Button
                android:id="@+id/button1"
                style="?android:attr/buttonStyleSmall"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="Button0" />

            <Button
                style="?android:attr/buttonStyleSmall"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="Button1" />

            <Button
                style="?android:attr/buttonStyleSmall"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="Button2" />

            <Button
                style="?android:attr/buttonStyleSmall"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="Button3" />

            ......
            
        </android.support.v7.widget.LinearLayoutCompat>
    </com.zuo.myapplication.MyScrollView>

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:title="老妖的茶壶"
        android:background="?attr/colorPrimary"/>

</RelativeLayout>

2、自定义的MyScrollView

public class MyScrollView extends ScrollView {

    private TranslucentListener listener;
    
    
    public void setOnTranslucentListener(TranslucentListener listener) {
        this.listener = listener;
    }

    public MyScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    
    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if(listener!=null){
            int scrollY = getScrollY();//滑出去的高度
            int screen_height = getContext().getResources().getDisplayMetrics().heightPixels;//屏幕高度
            //0~1f,而透明度应该是1~0f
            listener.onTranlucent(1-scrollY / (screen_height / 3f));//alpha=滑出去的高度/(screen_height/3f)
        }
    }

    public interface TranslucentListener {
        /**
         * 透明度的回调监听
         * @param alpha 0~1 透明度
         */
        public void onTranlucent(float alpha);

    }
}

3、MainActivity.java

public class MainActivity extends AppCompatActivity implements MyScrollView.TranslucentListener {

    private Toolbar mToolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        MyScrollView scrollView = (MyScrollView) findViewById(R.id.scrollView);
        scrollView.setOnTranslucentListener(this);
        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(mToolbar);
    }

    @Override
    public void onTranlucent(float alpha) {
        mToolbar.setAlpha(alpha);
    }
}

在xml中的MyScrollView的两个属性必须要不然Toolbar变成透明了,但是padding还在,最后效果就如下图了

android:clipToPadding="false"
android:clipChildren="false"

clipToPadding:控件的绘制区域是否在padding里面, 值为true时padding那么绘制的区域就不包括padding区域;定义一个孩子是否仅限于画里面的界限。

clipChildren:当ViewGroup的Padding不为0时,定义ViewGroup是否裁剪子孩子的填充。

未写clipToPadding属性的效果.gif

加上上面两个属性后,效果如下:


写clipToPadding属性的效果.gif

RecyclerView实现Toolbar滑动半透明效

1、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.zuo.myapplication.Main2Activity">

<android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clipChildren="false"
    android:clipToPadding="false"
    android:paddingTop="?attr/actionBarSize"/>

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

2、RecyclerView实现滑动半透明效果的核心代码如下

recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
    @Override
    public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
        super.onScrolled(recyclerView, dx, dy);
        int position = layoutManager.findFirstVisibleItemPosition();
        View firstVisiableChildView = layoutManager.findViewByPosition(position);
        int itemHeight = firstVisiableChildView.getHeight();
        int y = (position) * itemHeight - firstVisiableChildView.getTop();
        float scaleY = y;
        int screen_height = recyclerView.getContext().getResources().getDisplayMetrics().heightPixels;//屏幕高度
        mToolbar.setAlpha(1 - scaleY / (screen_height / 3f));

    }
});

其中下面代码是求RecyclerView的滑动多少距离的Y值

int position = layoutManager.findFirstVisibleItemPosition();
View firstVisiableChildView = layoutManager.findViewByPosition(position);
int itemHeight = firstVisiableChildView.getHeight();
int y = (position) * itemHeight - firstVisiableChildView.getTop();

相关文章

网友评论

      本文标题:实现Toolbar滑动半透明效

      本文链接:https://www.haomeiwen.com/subject/nqhovxtx.html