实现Toolbar滑动半透明效
2017-11-22 本文已影响37人
咸鱼Jay
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();