一个可以下拉放大头部背景图的布局控件,可轻松实现下拉放大头部背景图和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 |
<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>
<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>
使用动态添加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);
}
});