Skip to content

old-traveler/HeadZoomLayout

Repository files navigation

HeadZoomLayout

   AppVeyor

一个可以下拉放大头部背景图的布局控件,可轻松实现下拉放大头部背景图和QQ个人信息页面下拉扩展并放大背景图效果

非入侵式,不干扰业务代码、不影响子View的滑动。类似于官方的SwipeRefreshLayout

1.0.5之后迁移androidx

可包裹以下控件使用

  • RecyclerView
  • ListView
  • ScrollView
  • NestedScrollView
  • LinearLayout等

效果展示

使用

定义布局时需要声明头部视图的id{@link HeadZoomLayout#headViewId}, 同时需要将头部中的背景图片(ImageView对象)scaleType设置为centerCrop

如需实现类似于QQ个人信息界面中下拉扩展并放大效果只需保证头部的宽高比大于图片的宽高比即可。

allprojects {
	repositories {
		//...
		maven { url 'https://jitpack.io' }
	}
}
dependencies {
	implementation 'com.github.old-traveler:HeadZoomLayout:Tag'
}
属性名称 属性说明 默认值
headViewId 头部视图id 0
maxZoomRatio 头部最大放大比例 1.0f
zoomEnable 是否可以放大头部 true
maxDragDistance 值越大,阻尼越大 1000f
dragAccelerationRatio 值越大,阻尼越大 3.0f
useDecelerateInterpolator 回弹动画使用减速插值器 true
maxRecoverTime 最大回弹动画时间 400L

嵌套LinearLayout使用

<com.hyc.headzoomlayout.HeadZoomLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  app:headViewId="@id/fl_head">
  <!--嵌套LinearLayout使用-->
  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <!--头部视图-->
    <FrameLayout
      android:id="@+id/fl_head"
      android:layout_width="match_parent"
      android:layout_height="150dp"
      android:background="@color/colorAccent">
      <!--给背景ImageView设置中心剪裁方式 android:scaleType="centerCrop"-->
      <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@mipmap/test" />
      //...
      
    </FrameLayout>
    
    //...
  </LinearLayout>
</com.hyc.headzoomlayout.HeadZoomLayout>

嵌套ScrollView或NestedScrollView

<com.hyc.headzoomlayout.HeadZoomLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  app:headViewId="@id/fl_head">
  <!--嵌套ScrollView或者NestedScrollView使用-->
  <ScrollView
     android:layout_width="match_parent"
     android:layout_height="match_parent">
     <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <!--头部视图-->
        <FrameLayout
          android:id="@+id/fl_head"
          android:layout_width="match_parent"
          android:layout_height="150dp"
          android:background="@color/colorAccent">
          <!--给背景ImageView设置中心剪裁方式 android:scaleType="centerCrop"-->
          <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@mipmap/test" />
          //...
          
        </FrameLayout>
        
        //...
     </LinearLayout>
  </ScrollView>
</com.hyc.headzoomlayout.HeadZoomLayout>

嵌套RecyclerView或ListView

使用动态添加Head的形式并将其id设置HeadZoomLayout中headViewId or 多样式布局时设置第一个Item的布局id为HeadZoomLayout中的headViewId

<!--主布局-->
<com.hyc.headzoomlayout.HeadZoomLayout
  app:headViewId="@id/fl_head"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  
  <ListView
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
  
</com.hyc.headzoomlayout.HeadZoomLayout>

<!--head布局,在代码中添加到ListView或者RecyclerView中-->
<FrameLayout
   android:id="@+id/fl_head"
   android:layout_width="match_parent"
   android:layout_height="150dp"
   android:background="@color/colorAccent">
   <!--给背景ImageView设置中心剪裁方式 android:scaleType="centerCrop"-->
   <ImageView
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:scaleType="centerCrop"
     android:src="@mipmap/test" />
   //...  
</FrameLayout>

注意事项

  • 必须给代表背景的ImageView设置centerCrop剪裁模式
  • 如需实现qq那种先扩展再放大的效果,需保证图片的高宽比大于ImageView的高宽比
  • 如果使用Glide或者其他会对图片进行剪裁的图片加载库时会造成无法实现qq那种扩展放大效果。可通过ImageView.setImageDrawable或者以setImageBitmap加载来解决 以Glide为例子,通过Drawable加载可解决问题:
 Glide.with(context)
        .asDrawable()
        .load(Constant.BASE_IMAGE_URL + url)
        .into(new SimpleTarget<Drawable>() {
          @Override
          public void onResourceReady(@NonNull Drawable resource,
              @Nullable Transition<? super Drawable> transition) {
            imageView.setImageDrawable(resource);
          }
        });