首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何从顶部扩展像centerCrop这样的ImageView?

要实现像centerCrop这样的ImageView的顶部扩展,可以通过以下步骤:

  1. 创建一个自定义的ImageView类,继承自android.widget.ImageView。
  2. 在自定义ImageView类中重写onMeasure方法,以实现顶部扩展的效果。

以下是一个示例的自定义ImageView类的代码:

代码语言:java
复制
import android.content.Context;
import android.util.AttributeSet;
import android.widget.ImageView;

public class TopCropImageView extends ImageView {

    public TopCropImageView(Context context) {
        super(context);
    }

    public TopCropImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public TopCropImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        // 获取ImageView的宽度和测量模式
        int width = getMeasuredWidth();
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);

        // 获取ImageView的高度和测量模式
        int height = getMeasuredHeight();
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);

        // 如果测量模式是精确模式或最大模式,则不需要进行顶部扩展
        if (widthMode == MeasureSpec.EXACTLY || widthMode == MeasureSpec.AT_MOST
                || heightMode == MeasureSpec.EXACTLY || heightMode == MeasureSpec.AT_MOST) {
            return;
        }

        // 计算顶部扩展后的高度
        int desiredHeight = (int) (width * getDrawable().getIntrinsicHeight()
                / (float) getDrawable().getIntrinsicWidth());
        setMeasuredDimension(width, desiredHeight);
    }
}

使用这个自定义ImageView类,可以在布局文件中替换原有的ImageView,实现顶部扩展的效果。

代码语言:xml
复制
<com.example.TopCropImageView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/image"
    android:scaleType="centerCrop" />

这样,ImageView的图片将会按照centerCrop的方式进行裁剪,并且顶部会进行扩展,填满ImageView的宽度。

腾讯云相关产品和产品介绍链接地址:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

听说你想控制网络图片显示尺寸

问题背景 在最近项目中,有这么一种情况要实现: 网络加载图片,放入GridViewImageView里面,要求ImageView宽高保持一致。 这个很简单嘛!...效果图1 图片竟然不是正方形,和说好不一样啊T.T 那么问题来了:如何将网络获取图片铺满整个控件呢? 解决方法 其实想要效果是这样: ?...想要效果 如何让图片高度占满控件,宽度自己裁剪呢?...本来我想法是,将网络图片下载到本地,然后用BitmapFactory实现裁剪,但是后来阻止了这个愚蠢想法,时间复杂度和空间复杂度来说,处理N个这样图片有点吃不消,后来我想起了之前用过一个ImageView...: 图【效果1】基础上,图片在ImageView顶部或左侧 fitEnd: 图【效果1】基础上,图片在ImageView底部或右侧 centerCrop: 图片会占满ImageView,超出部分不显示

47530

Android view滑动悬浮固定效果实现代码示例

1.背景 在项目开发过程中,有时候会碰到这样需求:在滑动过程中,在某时要将子view固定在顶部(常见是将界面中tab在滑动到顶部时候进行固定)。...之前写过一篇滑动组件悬浮固定在顶部文章,但感觉还是有些复杂,因此就有了这次实现。效果图: ?...4.扩展 a.关于CollapsingToolbarLayout中子view排列顺序对显示结果造成影响 如图: ?...可以看到图中黑色边框显示内容不一致,因此ToolBar和ImageView排列顺序会对视图显示结果造成影响。...(这样也避免了:在CollapsingToolbarLayout中,因为视图折叠覆盖问题,会导致整个ImageView被TabLayout覆盖一部分而显示不完全问题。)

80310

再学一遍android:fitsSystemWindows属性

Android手机顶部用于显示各种通知和状态信息这个栏叫做状态栏。 通常情况下,我们应用程序内容都是显示在状态栏下方。...这是因为,xml中配置毕竟只是一个标记,如果想要在应用程序当中产生具体效果,那还是要看代码中是如何处理这些标记。...,这样就避免了可交互控件被遮挡情况出现。...但是可能有的朋友会说,由于项目限制原因,他们无法使用CoordinatorLayout或CollapsingToolbarLayout,而是只能使用FrameLayout或LinearLayout这样传统布局...Android 11开始,Google提供了一个新API WindowInsetsController来实现同样功能,不过本篇文章就不往这方面展开了。

1.1K50

Android ConstraintLayout详解「建议收藏」

例如你有两个不同尺寸widget但是你想要他们文字部分对齐。 《ConstraintLayout入门到放弃》 太长;别读 5....我们可以在TextView顶部控键与ImageView底部控键创建一个约束,如图: 移除约束:移除某个约束只需点击指定约束控键;移除全部约束需要点击如下按钮: 下一步,创建ImageView...跟容器顶部约束 最后,创建ImageView左右两侧约束 89f057b3a8ea3e0b.png 创建基线约束 – 连接widget基线控键到另一个基线 三)熟悉Inspector...它在UI编辑器右侧。附带有已选择widget各种相关属性,而且还显示了该视图是如何对齐与约束。...如下图所示: 下一步,下方动图展示了以下几个步骤 10210fd273ea1a86.png ImageView对齐顶部并使用Inspector(AnySize)来确保他扩展到两侧 放置两个button

1.5K30

仿大众点评悬浮购买框效果

android:id="@+id/imageView1" android:layout_width="match_parent" android:layout_height="45dip"...:background="@drawable/one" android:scaleType="centerCrop" /> <ImageView android:layout_width...主界面的布局你可以看出,我们在上面放置了一个购买布局,可能你会想,先让上面的布局隐藏起来,等下面的布局滑动上来就将其显示出来,如果这样子就跟我之前写那篇文章差不多,效果不是很棒,所以这篇修改版肯定不是这样...myScrollView;   /**      * 在MyScrollView里面的购买布局      */ private LinearLayout mBuyLayout;   /**      * 位于顶部购买布局...好了,不过根据这种思路你也可以刚开始使用一个悬浮框来覆盖在下面的购买布局上面,然后onScroll()方法中更新悬浮框位置,不过悬浮框x,y不是相对于父布局,这点要注意下,这样子也能实现效果,不过相对于此

1.2K100

Android开发(51) 使用 CollapsingToolbarLayout ,可折叠顶部导航栏

概述 在很app上都见过 可折叠顶部导航栏效果。google support v7 提供了 CollapsingToolbarLayout 可以实现这个效果。效果图如下: ? ? ?...实现步骤 1.写一个 CollapsingToolbarLayout,它有两个 子视图,一个就是上图显示图片(降落伞哪个)Imageview,另一个就是 顶部导航栏toobar 2.为 CollapsingToolbarLayout...指定属性 app:layout_scrollFlags="scroll|exitUntilCollapsed" 3.为ImageView 指定属性,声明 它是可以折叠 app:layout_collapseMode...="parallax" 4.为 toobar指定属性,声明它是固定 app:layout_collapseMode="pin" 5.为 CollapsingToolbarLayout 所在父布局(view...match_parent" android:layout_height="match_parent" android:scaleType="centerCrop

1.7K00

android 圆角图片实现和封装

,负责具体圆角逻辑:只有顶部为圆角 public class DrawTopCornerImage implements DrawCornerImage { @Override public...有一点提一下如果你 ImageView 有用 android:scaleType=”centerCrop” 属性,可能上面方法就有点不合适了,centerCrop 属性会截取图片中心区域展示很可能圆角就不在展示范围了...但是大多场景 UI 给出设计尺寸和图片比例应该是一致,上面的适用范围还是很大。 如果你想达到 centerCrop 属性效果,也不是不可以,只是不适合封装在 Picasso 内部逻辑中了。...像素大小 float ivHeight = 600;//600 为布局中, 在我测试机中 ImageView 像素大小 int width = source.getWidth...和原图片宽高比,取其大值为了放大后能够完全覆盖 ImageView 大小 scale = Math.max(ivWidth / width, ivHeight / height);

1K40

Android通过overScrollBy实现下拉视差特效

,左边到头,向右拉为负,右边到头,向左拉为正 * @param deltaY y方向瞬时偏移量,顶部到头,向下拉为负,底部到头,向上拉为正 * @param scrollX...ListView中 3.需要获取HeaderViewImageView初始高度和ImageView中图片高度.因为这2个高度将决定下来时候图片拉出范围,以及松手后图片回弹动画效果.对应控件宽高获取.../header" / </LinearLayout 没什么特别的,就是一个ImageView,通过src设置了一张图片,这里唯一要将就是scaleType属性,我这边设置了centerCrop...顶部到头,向下拉为负,底部到头,向上拉为正 * @param scrollX 水平方向永久偏移量 * @param scrollY 竖直方向永久偏移量 * @param scrollRangeX...在松手时高度 int currHeight = mHeaderIv.getHeight(); // 当前高度mHeaderIv.getHeight(), 执行动画到原始高度mOriginalHeight

1.1K51

【Android】这效果,我没法描述

(下面是一些废话) 要求效果是这样顶部有部分悬浮,接着是一些布局,在下面是几个可切换Tab页面,然后滚动时候~~吧啦吧啦吧啦吧啦~~ 还是直接看图吧 ?...效果 主要就是顶部和Tab悬浮,还有就是被顶掉那个效果。 听到要实现这样效果,我抽屉那把砍产品专用菜刀已经蠢蠢欲动了。...思路 先说说实现思路吧,上面的效果大致可以分成两个部分: 1、Tab向上滚动到顶部时悬浮 Tab滚动后悬浮在顶部嘛~~ 这效果使用CoordinatorLayout + AppBarLayout就能轻松实现...额,应该可以勉强看懂后面的内容) 2、顶部悬浮以及“被顶走”效果 只要在CoordinatorLayout外面套一层FrameLayout,然后把这个顶部布局改在上面。...这样也导致下面的布局被盖住了一部分,因此在LinearLayout中加了与悬浮部分相同高度空View。 布局是完成了,那个“被顶走”效果怎么实现呢?

96550

安卓 ImageView scaleType 用法实用总结

也就是无论如何图片大小都不会改变,控件大小决定可见范围。 如左图图片小于ImageView,则能够完全显示;右图图片大于ImageView,只能显示中间一部分。...与fitCenter区别就是centerInside图片只会缩小,不会放大。 centerCrop 等比缩放到填充整个控件大小,并居中显示。...与fitCenter区别是centerCrop图片会填充整个区域,所以可能会被裁剪。 (注意这里图片背景为灰色,图片白色部分不属于ImageView,即ImageView已被图片占满。...MATRIX 需要与ImageView.setImageMatrix(Matrix matrix) 配合使用,指定一个变换矩阵用于指定图片如何展示。...就个人使用来说,觉得最常用就是fitCenter(默认值),因为能够按比例且完整显示,又能在某个方向撑满控件;当希望控件被图片占满时(图片可以被适当裁剪),比较常用就是centerCrop,因为可以保证图片按比例显示

1.1K30

Android项目实战教程之高仿网易云音乐启动页实例代码

android.intent.category.LAUNCHER" / </intent-filter </activity 布局的话可以说是很简单了,最外层使用RelativeLayout,顶部一个...ImageView让他在水平居中,具顶部一个距离,这个距离大家可以按照自己业务需求调整,然后放入一个TextView让他在水平居中,垂直方向和父布局底部对齐,同时设置一个Margin,接着放一个ImageView...android:layout_alignParentStart="true" android:layout_alignParentTop="true" android:scaleType="centerCrop...,是否登录等: public class SplashActivity extends BaseCommonActivity { //这样创建有内存泄漏,在性能优化我们具体讲解 @SuppressLint...总结 以上就是这篇文章全部内容了,希望本文内容对大家学习或者工作具有一定参考学习价值,如果有疑问大家可以留言交流,谢谢大家对ZaLou.Cn支持。

47710

代码实验室--带你一步步理解使用 ConstraintLayout

把 scaleType 属性改为 centerCrop 以符合此 codelab 目标....下一步是创建 ImageView 顶锚点于 Layout 顶部约束. 最终我们还可以使用左和右侧边约束锚定 ImageView 在布局中间. 本节演示了如何用拖拽连接线方式创建控件间约束基础....继续, 布局中删除 TextView 创建 ImageView 底锚点和容器底部约束 UI 生成器应该看起来是这样 Inspector 显示出控件控件在一个方形区域中间....现在布局里只有单一个 ImageView, 我们来看一下 Autoconnect 是如何创建约束 这里是本节下一部分步骤, 作为指导, 上面的动画显示下方使用步骤: 把 ImageView 对齐到顶部并使用...首先, 控件选择板拖拽一个 TextView 并放置在设置文本下面. 使用 操作水平扩展 View 以适应引导线. 使用 操作纵向扩展以填充纵向可用空间.

2.6K60

Android如何创建自定义ActionBar

比如适配器 Adapter,当很多适配器都差不多时,就可以通过打造一个通用适配器来实现。本例中主要是如何创建自定义 ActionBar。 ?...观察上图,当切换界面时,每个界面的顶部最多只有两个图标,而且有4个界面具有类似特性。所以可以考虑通过自定义控件来创建UI模板。...由于是需要创建出具有重用功能复合控件,所以通常需要继承 ViewGroup ,在给它添加指定功能控制。给其指定一些可配置属性,让其具有更强扩展性。...name 值为继承自 RelativeLayout类名,这样好处是在自定义属性较多时,能够很好辨认出自定义属性属于谁,属于哪个地方自定义。...创建一个只有两张图片布局文件,这样好处是在自定义控件类中可以减少代码量,不必在该类中创建 ImageView ,也能更好让 xml 完成 UI 界面设置,而 Java 程序则专门负责业务逻辑。

1.2K10

ImageViewScaleType之见解

“ 大家对ImageView再熟悉不过了,但其ScalType你了解吗?” ImageViewScaleType属性,表示ImageView中资源图片填充方式。...scaleType属性值有好几种,分别是: matrix(默认) center centerCrop centerInside fitCenter fitEnd fitStart fitXY 这里要注意...02 centerCrop android:scaleType=”centerCrop” 以填满整个ImageView为目的,将原图中心对准ImageView中心,等比例放大原图,直到填满ImageView...如果原图size本身就小于ImageViewsize,则原图size不作任何处理,居中显示在ImageView。...04 matrix android:scaleType=”matrix” 不改变原图大小,ImageView左上角开始绘制原图,原图超过ImageView部分作裁剪处理。

89920
领券