温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎么在Android中利用Scrollview实现一个滑动渐变效果

发布时间:2021-01-29 15:53:33 来源:亿速云 阅读:359 作者:Leah 栏目:开发技术

本篇文章给大家分享的是有关怎么在Android中利用Scrollview实现一个滑动渐变效果,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

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实现一个滑动渐变效果,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI