Android開發之滑動ScrollView實現ToolBar半透明效果
阿新 • • 發佈:2019-02-04
前言: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:
MainActivity程式碼: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) } } } }
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>
--------------------------------結束!!!------------------------------------------------------------