Android 滑动Scrollview标题栏渐变效果(仿京东toolbar)

Scrollview标题栏滑动渐变

仿京东样式(上滑显示下滑渐变消失)

/** * @ClassName MyScrollView * @Author Rex * @Date 2021/1/27 17:38 */ public class MyScrollView extends ScrollView { private TranslucentListener mTranslucentListener; public void setTranslucentListener(TranslucentListener translucentListener) { this.mTranslucentListener = translucentListener; } public MyScrollView(Context context) { this(context, null); } public MyScrollView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public MyScrollView(Context context, AttributeSet attrs, int defStyleAttr) { this(context, attrs, defStyleAttr, 0); } public MyScrollView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) { super(context, attrs, defStyleAttr, defStyleRes); } @Override protected void onScrollChanged(int l, int t, int oldl, int oldt) { super.onScrollChanged(l, t, oldl, oldt); if (mTranslucentListener != null) { //ScrollView滑出高度 int scrollY = getScrollY(); //屏幕高度 int screenHeight = getContext().getResources().getDisplayMetrics().heightPixels; //有效滑动距离为屏幕2分之一 // alpha = 滑动高度/（screenHeight/3f） if (scrollY <= screenHeight / 2f) { Log.d(">>>>>>>>>", "ScrollView划出高度：" + scrollY); Log.d(">>>>>>>>>", "屏幕高度：" + screenHeight); Log.d(">>>>>>>>>", "渐变值：" + (0 + scrollY / (screenHeight / 4f))); // 渐变的过程 1~0 mTranslucentListener.onTranslucent(0 + scrollY / (screenHeight /4f)); } } } }

Activity 设置

public class ToolbarActivity extends AppCompatActivity implements TranslucentListener { private Toolbar mToolBar; private MyScrollView mScrollView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_toobar); mToolBar = findViewById(R.id.id_toolbar); mScrollView = findViewById(R.id.id_scrollView); //初始化渐变为0 mToolBar.setAlpha(0); //设置渐变回调 mScrollView.setTranslucentListener(this); } @Override public void onTranslucent(float alpha) { mToolBar.setAlpha(alpha); } }

渐变回调接口

/** * @ClassName TranslucentListener * @Author rex * @Date 2021/1/27 17:38 */ public interface TranslucentListener { /** * 透明度的回调监听 * * @param alpha 0~1 透明度 */ public void onTranslucent(float alpha); }

布局文件

<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.rex.rxhttpdemo.MyScrollView android:id="@+id/id_scrollView" android:layout_width="match_parent" android:layout_height="match_parent" android:clipChildren="false" android:clipToPadding="false" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <Button android:id="@+id/button1" android:layout_width="match_parent" android:layout_height="match_parent" android:text="Button0" /> <Button android:layout_width="match_parent" android:layout_height="match_parent" android:text="Button1" /> <Button android:layout_width="match_parent" android:layout_height="match_parent" android:text="Button2" /> <Button android:layout_width="match_parent" android:layout_height="match_parent" android:text="Button3" /> <Button android:layout_width="match_parent" android:layout_height="match_parent" android:text="Button4" /> <Button android:layout_width="match_parent" android:layout_height="match_parent" android:text="Button5" /> <Button android:layout_width="match_parent" android:layout_height="match_parent" android:text="Button5" /> <Button android:layout_width="match_parent" android:layout_height="match_parent" android:text="Button5" /> <Button android:layout_width="match_parent" android:layout_height="match_parent" android:text="Button5" /> <Button android:layout_width="match_parent" android:layout_height="match_parent" android:text="Button5" /> <Button android:layout_width="match_parent" android:layout_height="match_parent" android:text="Button5" /> <Button android:layout_width="match_parent" android:layout_height="match_parent" android:text="Button5" /> <Button android:layout_width="match_parent" android:layout_height="match_parent" android:text="Button5" /> <Button android:layout_width="match_parent" android:layout_height="match_parent" android:text="Button" /> <Button android:layout_width="match_parent" android:layout_height="match_parent" android:text="Button" /> <Button android:layout_width="match_parent" android:layout_height="match_parent" android:text="Button" /> <Button android:layout_width="match_parent" android:layout_height="match_parent" android:text="Button" /> <Button android:layout_width="match_parent" android:layout_height="match_parent" android:text="Button" /> <Button android:layout_width="match_parent" android:layout_height="match_parent" android:text="Button" /> <Button android:layout_width="match_parent" android:layout_height="match_parent" android:text="Button" /> <Button android:layout_width="match_parent" android:layout_height="match_parent" android:text="Button" /> <Button android:layout_width="match_parent" android:layout_height="match_parent" android:text="Button" /> <Button android:layout_width="match_parent" android:layout_height="match_parent" android:text="Button" /> </LinearLayout> </com.rex.rxhttpdemo.MyScrollView> <androidx.appcompat.widget.Toolbar android:id="@+id/id_toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorAccent" app:title="title" /> </RelativeLayout>

下滑显示上滑渐变消失

/** * @ClassName MyScrollView * @Author Rex * @Date 2021/1/27 17:38 */ public class MyScrollView extends ScrollView { private TranslucentListener mTranslucentListener; public void setTranslucentListener(TranslucentListener translucentListener) { this.mTranslucentListener = translucentListener; } public MyScrollView(Context context) { this(context, null); } public MyScrollView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public MyScrollView(Context context, AttributeSet attrs, int defStyleAttr) { this(context, attrs, defStyleAttr, 0); } public MyScrollView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) { super(context, attrs, defStyleAttr, defStyleRes); } @Override protected void onScrollChanged(int l, int t, int oldl, int oldt) { super.onScrollChanged(l, t, oldl, oldt); if (mTranslucentListener != null) { //ScrollView滑出高度 int scrollY = getScrollY(); //屏幕高度 int screenHeight = getContext().getResources().getDisplayMetrics().heightPixels; //有效滑动距离为屏幕2分之一 // alpha = 滑动高度/（screenHeight/3f） if (scrollY <= screenHeight / 2f) { Log.d(">>>>>>>>>", "ScrollView划出高度：" + scrollY); Log.d(">>>>>>>>>", "屏幕高度：" + screenHeight); Log.d(">>>>>>>>>", "渐变值：" + (1 - scrollY / (screenHeight / 4f))); // 渐变的过程 1~0 mTranslucentListener.onTranslucent(1 - scrollY / (screenHeight /4f)); } } } }

注意: 这里只是更改了 mTranslucentListener.onTranslucent 里的 渐变值

Activty 里 把初始化 mToolBar.setAlpha(0); 去掉

XML

<com.rex.rxhttpdemo.MyScrollView android:id="@+id/id_scrollView" android:layout_width="match_parent" android:layout_height="match_parent" android:clipChildren="false" android:clipToPadding="false" android:paddingTop="?attr/actionBarSize" > </com.rex.rxhttpdemo.MyScrollView>

xml 加入 paddingtop .

注意:
android:clipChildren=“false”
android:clipToPadding="false"
这俩个属性 如果不加会有留白

到此这篇关于Android 滑动Scrollview标题栏渐变效果(仿京东toolbar)的文章就介绍到这了,更多相关Android 滑动Scrollview标题栏渐变内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！

您可能感兴趣的文章:Android中控制和禁止ScrollView自动滑动到底部的方法Android HorizontalScrollView左右滑动效果浅谈Android实践之ScrollView中滑动冲突处理解决方案Android中ScrollView实现滑动距离监听器的方法Android 顶部标题栏随滑动时的渐变隐藏和渐变显示效果Android ScrollView滑动实现仿QQ空间标题栏渐变

渐变效果 toolbar scrollview Android