登录
当前位置： 首页 > 编程笔记 >

详解Android使用CoordinatorLayout+AppBarLayout实现拉伸顶部图片功能

韩良策
2023-03-14
本文向大家介绍详解Android使用CoordinatorLayout+AppBarLayout实现拉伸顶部图片功能，包括了详解Android使用CoordinatorLayout+AppBarLayout实现拉伸顶部图片功能的使用技巧和注意事项，需要的朋友参考一下

一、国际惯例，先看下效果图

二、不跟你多bb直接上布局文件代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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=".MainActivity"
 android:clipChildren="false"
 android:clipToPadding="false">
 <androidx.coordinatorlayout.widget.CoordinatorLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  <com.google.android.material.appbar.AppBarLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:layout_behavior="com.ce.myscrollimg.AppBarLayoutOverScrollViewBehavior">
   <com.google.android.material.appbar.CollapsingToolbarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_scrollFlags="scroll"
    android:clipChildren="false"
    android:clipToPadding="false">
    <com.ce.myscrollimg.DisInterceptNestedScrollView
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:clipChildren="false"
     android:clipToPadding="false"
     app:layout_collapseMode="parallax"
     app:layout_collapseParallaxMultiplier="0.8">
     <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="vertical">
      <ImageView
       android:id="@+id/iv_bg"
       android:layout_width="match_parent"
       android:layout_height="130dp"
       android:src="@mipmap/ic_cover_1"
       android:scaleType="centerCrop"/>
     </LinearLayout>
    </com.ce.myscrollimg.DisInterceptNestedScrollView>
    <com.ce.myscrollimg.DisInterceptNestedScrollView
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:tag="middle"
     android:layout_marginTop="130dp">
     <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="vertical">
      <View
       android:layout_width="match_parent"
       android:layout_height="80dp"
       android:background="#FFF003"/>
      <View
       android:layout_width="match_parent"
       android:layout_height="80dp"
       android:background="#FF3300"/>
     </LinearLayout>
    </com.ce.myscrollimg.DisInterceptNestedScrollView>
    <androidx.appcompat.widget.Toolbar
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:tag="toolbar"
     app:layout_collapseMode="pin">
    </androidx.appcompat.widget.Toolbar>
   </com.google.android.material.appbar.CollapsingToolbarLayout>
  </com.google.android.material.appbar.AppBarLayout>
  <LinearLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">
   <com.google.android.material.tabs.TabLayout
    android:id="@+id/toolbar_tab"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:layout_gravity="center"
    app:tabIndicatorColor="#FFC000"
    app:tabIndicatorFullWidth="false"
    app:tabIndicatorHeight="0dp"
    app:tabMode="scrollable"
    android:layout_marginTop="4dp"
    android:layout_marginBottom="2dp"
    app:tabSelectedTextColor="#FFC000"
    app:tabTextColor="#FFFFFF"
    app:tabMaxWidth="90dp"
    app:tabPaddingEnd="-1dp" />
   <com.ce.myscrollimg.NoScrollViewPager
    android:id="@+id/vp_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
  </LinearLayout>
 </androidx.coordinatorlayout.widget.CoordinatorLayout>
</LinearLayout>

三、上java代码

package com.ce.myscrollimg;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.viewpager.widget.ViewPager;
import android.graphics.Typeface;
import android.os.Bundle;
import android.util.TypedValue;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;
import com.google.android.material.tabs.TabLayout;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
 private TabLayout toolbar_tab;
 private NoScrollViewPager vp_content;
 private ViewPagerAdapter vpAdapter;
 private List<Fragment> listFragment = new ArrayList<>();
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  initView();
 }
 //初始化view
 private void initView(){
  //tab
  toolbar_tab = findViewById(R.id.toolbar_tab);
  //
  vp_content = findViewById(R.id.vp_content);
  vpAdapter = new ViewPagerAdapter(getSupportFragmentManager(),listFragment);
  vp_content.setAdapter(vpAdapter);
  vp_content.setOffscreenPageLimit(2);
  toolbar_tab.setupWithViewPager(vp_content);
  for(int i=0;i<12;i++){
   listFragment.add(CeshiFragment.newInstance("第"+i+"页"));
  }
  vpAdapter.notifyDataSetChanged();
  for(int i=0;i<listFragment.size();i++){
   TabLayout.Tab tab = toolbar_tab.getTabAt(i);
   View customView = LayoutInflater.from(this).inflate(R.layout.tab_text, null, false);
   TextView textView = customView.findViewById(R.id.tv_custom_tab);
//   LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
//   layoutParams.weight = 0;
//   textView.setLayoutParams(layoutParams);
   if (i == 0) {
    textView.setText("推荐");
   } else {
    textView.setText("第"+i+"页");
   }
   if (i == 0) {
    textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);
    textView.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
    textView.setTextColor(getResources().getColor(R.color.color_FFFFC000));
   } else {
    textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 14);
    textView.setTextColor(getResources().getColor(R.color._1E1E1E));
   }
   tab.setCustomView(customView);
  }
  toolbar_tab.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
   @Override
   public void onTabSelected(TabLayout.Tab tab) {
    View view = tab.getCustomView();
    if (view != null) {
     TextView textView = view.findViewById(R.id.tv_custom_tab);
     textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);
     textView.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
     textView.setTextColor(getResources().getColor(R.color.color_FFFFC000));
    }
    vp_content.setCurrentItem(tab.getPosition());
   }
   @Override
   public void onTabUnselected(TabLayout.Tab tab) {
    View view = tab.getCustomView();
    if (view != null) {
     TextView textView = view.findViewById(R.id.tv_custom_tab);
     if (textView != null) {
      textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 14);
      textView.setTypeface(Typeface.defaultFromStyle(Typeface.NORMAL));
      textView.setTextColor(getResources().getColor(R.color._1E1E1E));
     }
    }
   }
   @Override
   public void onTabReselected(TabLayout.Tab tab) {
   }
  });
 }
}

四、重点在于设置AppBarLayout的Behavior这里自定义AppBarLayoutOverScrollViewBehavior，下面贴出代码

package com.ce.myscrollimg;
import android.animation.Animator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import androidx.appcompat.widget.Toolbar;
import androidx.coordinatorlayout.widget.CoordinatorLayout;
import androidx.core.view.ViewCompat;
import com.google.android.material.appbar.AppBarLayout;
/**
 * Created by gjm on 2017/5/24.
 * 目前包括的事件：
 * 图片放大回弹
 * 个人信息布局的top和botoom跟随图片位移
 * toolbar背景变色
 */
public class AppBarLayoutOverScrollViewBehavior extends AppBarLayout.Behavior {
 private static final String TAG = "overScroll";
 private static final String TAG_TOOLBAR = "toolbar";
 private static final String TAG_MIDDLE = "middle";
 private static final float TARGET_HEIGHT = 1500;
 private View mTargetView;
 private int mParentHeight;
 private int mTargetViewHeight;
 private float mTotalDy;
 private float mLastScale;
 private int mLastBottom;
 private boolean isAnimate;
 private Toolbar mToolBar;
 private ViewGroup middleLayout;//个人信息布局
 private int mMiddleHeight;
 private boolean isRecovering = false;//是否正在自动回弹中
 private final float MAX_REFRESH_LIMIT = 0.3f;//达到这个下拉临界值就开始刷新动画
 public AppBarLayoutOverScrollViewBehavior() {
 }
 public AppBarLayoutOverScrollViewBehavior(Context context, AttributeSet attrs) {
  super(context, attrs);
 }
 @Override
 public boolean onLayoutChild(CoordinatorLayout parent, AppBarLayout abl, int layoutDirection) {
  boolean handled = super.onLayoutChild(parent, abl, layoutDirection);
  if (mToolBar == null) {
   mToolBar = parent.findViewWithTag(TAG_TOOLBAR);
  }
  if (middleLayout == null) {
   middleLayout = (ViewGroup) parent.findViewWithTag(TAG_MIDDLE);
  }
  // 需要在调用过super.onLayoutChild()方法之后获取
  if (mTargetView == null) {
   mTargetView = parent.findViewById(R.id.iv_bg);
   if (mTargetView != null) {
    initial(abl);
   }
  }
  abl.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
   @Override
   public final void onOffsetChanged(AppBarLayout appBarLayout, int i) {
    mToolBar.setAlpha(Float.valueOf(Math.abs(i)) / Float.valueOf(appBarLayout.getTotalScrollRange()));
   }
  });
  return handled;
 }
 @Override
 public boolean onStartNestedScroll(CoordinatorLayout parent, AppBarLayout child, View directTargetChild, View target, int nestedScrollAxes, int x) {
  isAnimate = true;
  if (target instanceof DisInterceptNestedScrollView) return true;//这个布局就是middleLayout
  return super.onStartNestedScroll(parent, child, directTargetChild, target, nestedScrollAxes,x);
 }
 @Override
 public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, AppBarLayout child, View target, int dx, int dy, int[] consumed, int x) {
  if (!isRecovering) {
   if (mTargetView != null && ((dy < 0 && child.getBottom() >= mParentHeight)
     || (dy > 0 && child.getBottom() > mParentHeight))) {
    scale(child, target, dy);
    return;
   }
  }
  super.onNestedPreScroll(coordinatorLayout, child, target, dx, dy, consumed,x);
 }
 @Override
 public boolean onNestedPreFling(CoordinatorLayout coordinatorLayout, AppBarLayout child, View target, float velocityX, float velocityY) {
  if (velocityY > 100) {//当y速度>100,就秒弹回
   isAnimate = false;
  }
  return super.onNestedPreFling(coordinatorLayout, child, target, velocityX, velocityY);
 }
 @Override
 public void onStopNestedScroll(CoordinatorLayout coordinatorLayout, AppBarLayout abl, View target, int x) {
  recovery(abl);
  super.onStopNestedScroll(coordinatorLayout, abl, target,x);
 }
 private void initial(AppBarLayout abl) {
  abl.setClipChildren(false);
  mParentHeight = abl.getHeight();
  mTargetViewHeight = mTargetView.getHeight();
  mMiddleHeight = middleLayout.getHeight();
 }
 private void scale(AppBarLayout abl, View target, int dy) {
  mTotalDy += -dy;
  mTotalDy = Math.min(mTotalDy, TARGET_HEIGHT);
  mLastScale = Math.max(1f, 1f + mTotalDy / TARGET_HEIGHT);
  ViewCompat.setScaleX(mTargetView, mLastScale);
  ViewCompat.setScaleY(mTargetView, mLastScale);
  mLastBottom = mParentHeight + (int) (mTargetViewHeight / 2 * (mLastScale - 1));
  abl.setBottom(mLastBottom);
  target.setScrollY(0);
  middleLayout.setTop(mLastBottom - mMiddleHeight);
  middleLayout.setBottom(mLastBottom);
  if (onProgressChangeListener != null) {
   float progress = Math.min((mLastScale - 1) / MAX_REFRESH_LIMIT, 1);//计算0~1的进度
   onProgressChangeListener.onProgressChange(progress, false);
  }
 }
 public interface onProgressChangeListener {
  /**
   * 范围 0~1
   *
   * @param progress
   * @param isRelease 是否是释放状态
   */
  void onProgressChange(float progress, boolean isRelease);
 }
 public void setOnProgressChangeListener(AppBarLayoutOverScrollViewBehavior.onProgressChangeListener onProgressChangeListener) {
  this.onProgressChangeListener = onProgressChangeListener;
 }
 onProgressChangeListener onProgressChangeListener;
 private void recovery(final AppBarLayout abl) {
  if (isRecovering) return;
  if (mTotalDy > 0) {
   isRecovering = true;
   mTotalDy = 0;
   if (isAnimate) {
    ValueAnimator anim = ValueAnimator.ofFloat(mLastScale, 1f).setDuration(200);
    anim.addUpdateListener(
      new ValueAnimator.AnimatorUpdateListener() {
       @Override
       public void onAnimationUpdate(ValueAnimator animation) {
        float value = (float) animation.getAnimatedValue();
        ViewCompat.setScaleX(mTargetView, value);
        ViewCompat.setScaleY(mTargetView, value);
        abl.setBottom((int) (mLastBottom - (mLastBottom - mParentHeight) * animation.getAnimatedFraction()));
        middleLayout.setTop((int) (mLastBottom -
          (mLastBottom - mParentHeight) * animation.getAnimatedFraction() - mMiddleHeight));
        if (onProgressChangeListener != null) {
         float progress = Math.min((value - 1) / MAX_REFRESH_LIMIT, 1);//计算0~1的进度
         onProgressChangeListener.onProgressChange(progress, true);
        }
       }
      }
    );
    anim.addListener(new Animator.AnimatorListener() {
     @Override
     public void onAnimationStart(Animator animation) {
     }
     @Override
     public void onAnimationEnd(Animator animation) {
      isRecovering = false;
     }
     @Override
     public void onAnimationCancel(Animator animation) {
     }
     @Override
     public void onAnimationRepeat(Animator animation) {
     }
    });
    anim.start();
   } else {
    ViewCompat.setScaleX(mTargetView, 1f);
    ViewCompat.setScaleY(mTargetView, 1f);
    abl.setBottom(mParentHeight);
    middleLayout.setTop(mParentHeight - mMiddleHeight);
//    middleLayout.setBottom(mParentHeight);
    isRecovering = false;
    if (onProgressChangeListener != null)
     onProgressChangeListener.onProgressChange(0, true);
   }
  }
 }
}

五、源码下载

http://xiazai.jb51.net/201910/yuanma/MyScrollImg_jb51.rar

总结

以上所述是小编给大家介绍的Android使用CoordinatorLayout+AppBarLayout实现拉伸顶部图片功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

 类似资料：
  • 详解Android使用CoordinatorLayout+AppBarLayout+CollapsingToolbarLayou实现手指滑动效果

    本文向大家介绍详解Android使用CoordinatorLayout+AppBarLayout+CollapsingToolbarLayou实现手指滑动效果，包括了详解Android使用CoordinatorLayout+AppBarLayout+CollapsingToolbarLayou实现手指滑动效果的使用技巧和注意事项，需要的朋友参考一下 CoordinatorLayout+AppBar

  • Android实现图片拖拉功能

    本文向大家介绍Android实现图片拖拉功能，包括了Android实现图片拖拉功能的使用技巧和注意事项，需要的朋友参考一下 这次记录的是实现Android图片用手拖拉的功能，，供大家参考，具体内容如下 编译环境：eclipse Android版本4.0 创建工程过程略 实现图片在页面内的拖拉 原理图： 计算出手指移动的位移，通过matrix矩阵对象，将图片空间矩阵化之后根据手指位移让矩阵移动， 从

  • Android ListView实现下拉顶部图片变大效果

    本文向大家介绍Android ListView实现下拉顶部图片变大效果，包括了Android ListView实现下拉顶部图片变大效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了Android ListView下拉顶部图片变大的具体代码，供大家参考，具体内容如下 在git上查看牛人的代码，发现是反编译别人的代码，还没加注释，代码也没有完全编译完整，所以这里我做的简单的注释，仅供学

  • Android设计库CoordinatorLayout、AppBarLayout和

    我使用的是API22上的Android设计库。我想： 有一个工具栏和一个抽屉布局，里面有一个RecycerView 使Drawer布局位于工具栏下方；例如，当工具栏可见时，抽屉的主要内容应该在它下面，（左）抽屉也应该在它下面，这样当它展开时，工具栏仍然可见 当回收器视图向下滚动时，使工具栏从屏幕上滚动

  • Android实现图片自动切换功能(实例代码详解)

    本文向大家介绍Android实现图片自动切换功能(实例代码详解)，包括了Android实现图片自动切换功能(实例代码详解)的使用技巧和注意事项，需要的朋友参考一下 在Android中图片的自动切换不仅可以实现自动切换，而且还可以使用手动切换。而且一般在切换的时候，在图片下方还带有其他内容的切换，用来标记是第几个图片的切换。 这种效果在我们日常生活中很常见，例如某宝购物，一些商城都可以使用到，用户体

  • Android Volley图片加载功能详解

    本文向大家介绍Android Volley图片加载功能详解，包括了Android Volley图片加载功能详解的使用技巧和注意事项，需要的朋友参考一下 Gituhb项目 Volley源码中文注释项目我已经上传到github,欢迎大家fork和start. 为什么写这篇博客 本来文章是维护在github上的,但是我在分析ImageLoader源码过程中与到了一个问题,希望大家能帮助解答. Volle

相关阅读

Android Volley图片加载功能详解玩转AppBarLayout实现更酷炫的顶部栏拉伸背景图片CSS？Android仿QQ好友详情页下拉顶部图片缩放效果如何利用PHP实现上传图片功能详解

相关文章

货拉拉地图产品（凉）Bootstrap 图片货拉拉日常实习1h货拉拉Java开发实习货拉拉java后端实习

相关问答

Android相机预览拉伸请问html和css如何实现图片按曲线拉伸并排列布局呢？使用CSS设置背景图像而不拉伸图像使用RecyclerView AppBarLayout在Android上的GridView中使用哪个拉伸模式

相关工具

用Pinch手势撕裂图片图片放大镜iOS 图片滤镜ScrollView内图片缩放图片点击放大

相关文档

Android Animation 动画详解HAProxy 用法详解Laravel 源码详解GRUB2 配置文件 grub.cfg 详解 / GRUB2 实战手册深入理解 OpenStack 网络实现 Neutron
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.