前言:Toolbar前几章都有介绍,现在的越来越多的使用toolbar,便开始在toolbar上做效果,常见的是随着你的滑动,toolbar呈现半透明的效果,有的是随着你的滚动而滚动,今天我们实现的效果就是toolbar呈现半透明的效果!
-----------------------前几章的ToolBar使用-------------------------------
---------------------------分割线-----------------------------------------------
ToolBar半透明的效果:
---------------------------分割线-----------------------------------------------
思路:
1.监听ScrollView的滑动事件,不断地修改Toolbar透明度。
2.给MyScrollView设置paddingTop
注意:
1.android:clipToPadding="false" 该控件的绘制范围是否不在Padding里面。false:绘制的时候范围会考虑padding即会往里面缩进。
2.android:clipChildren="false" 子控件是否能不超出padding的区域(比如ScrollView上滑动的时候,child可以滑出该区域)
---------------------------分割线-----------------------------------------------
首先写一个透明度接口:
public interface TranslucentListener {
/**
* 透明度的监听
*
* @param alpha 0~1透明度
*/
void onTranlucent(float alpha);
}
接着重写ScrollView:
import android.content.Context;
import android.util.AttributeSet;
import android.widget.ScrollView;
/**
* Created by Fly on 2017/5/6.
*/
public class MyScrollView extends ScrollView {
private TranslucentListener listener;
public void setTranslucentListener(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;
if (scrollY <= screen_height / 3f) {//0~1f,而透明度应该是1~0f
listener.onTranlucent(1 - scrollY / (screen_height / 3f));//alpha=滑出去的高度/(screen_height/3f)
}
}
}
}
MainActivity代码:
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
public class MainActivity extends AppCompatActivity implements TranslucentListener {
private Toolbar toolbar;
private MyScrollView myScrollView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
myScrollView = (MyScrollView) findViewById(R.id.scrollView);
myScrollView.setTranslucentListener(this);
}
@Override
public void onTranlucent(float alpha) {
toolbar.setAlpha(alpha);
}
}
完整布局:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
tools:context="com.fly.lsn11_translucentscrolltoolbar.MainActivity">
<com.fly.lsn11_translucentscrolltoolbar.MyScrollView
android:id="@+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false"
android:clipToPadding="false"
android:paddingTop="?attr/actionBarSize">
<android.support.v7.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="button1" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="button2" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="button3" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="button4" />
<Button
android:layout_width="match_parent"
android:layout_height="300dp"
android:text="button5" />
<Button
android:layout_width="match_parent"
android:layout_height="300dp"
android:text="button5" />
<Button
android:layout_width="match_parent"
android:layout_height="300dp"
android:text="button5" />
<Button
android:layout_width="match_parent"
android:layout_height="300dp"
android:text="button5" />
<Button
android:layout_width="match_parent"
android:layout_height="300dp"
android:text="button5" />
<Button
android:layout_width="match_parent"
android:layout_height="300dp"
android:text="button5" />
<Button
android:layout_width="match_parent"
android:layout_height="300dp"
android:text="button5" />
<Button
android:layout_width="match_parent"
android:layout_height="300dp"
android:text="button5" />
<Button
android:layout_width="match_parent"
android:layout_height="300dp"
android:text="button5" />
</android.support.v7.widget.LinearLayoutCompat>
</com.fly.lsn11_translucentscrolltoolbar.MyScrollView>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:title="我的奋斗" />
</RelativeLayout>
-------------------------------- 结束!!!------------------------------------------------------------