企业官网建设流程全解析

ImageView & ImageButton

一、基础控件区分

1. ImageView

作用：专门展示图片，默认只是图像展示，无交互样式。

<ImageView android:id="@+id/iv_test" android:layout_width="100dp" android:layout_height="100dp" android:src="@drawable/ic_icon" <!-- 设置图片资源 --> android:scaleType="centerCrop"/>

2. ImageButton

继承ImageView，图片型按钮，ImageButton 具有按钮交互语义，默认样式通常包含背景或按压反馈，但具体效果取决于应用主题。

<ImageButton android:id="@+id/ibtn_test" android:layout_width="100dp" android:layout_height="100dp" android:src="@drawable/ic_icon"/>

二、核心属性

1. android:src：设置图片资源（推荐）

2. android:background：设置背景

   ⚠️区别： src：图片本身，会受scaleType缩放控制； background：底层背景，不受scaleType影响。

3. scaleType图片缩放模式（高频）

• fitXY：拉伸填满控件，比例会失真
• centerCrop：等比缩放，铺满控件，超出部分裁剪（最常用）
• centerInside：完整显示图片，不裁剪，不拉伸

三、ImageView 和 ImageButton 核心区别

1. ImageView：纯图片展示，无默认点击波纹；可以设置点击事件，但没有按压视觉效果。
2. ImageButton：图像按钮，自带默认背景按压效果，用于交互。

开发小技巧： 如果想要一张图片充当按钮，不想要默认按钮底色：优先用ImageView + setOnClickListener，而不是ImageButton。

四、需求：图像+文字一起显示

方案1：Button搭配drawable

普通Button，文字上下/左右附带图片，无需嵌套布局

<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="相册" android:drawableStart="@drawable/ic_photo" <!-- 左侧图片 --> android:drawablePadding="6dp"/> <!-- 图文间距 -->

可用属性：drawableTop/drawableBottom/drawableRight

方案2：布局嵌套（自由排版）

ConstraintLayout/LinearLayout 包裹 ImageView + TextView

<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical"> <ImageView android:layout_width="60dp" android:layout_height="60dp" android:src="@mipmap/ic_icon"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="图片下方文字"/> </LinearLayout>

五、选型速记

1. 只显示图片 →ImageView
2. 图片充当按钮、需要按压效果 → ImageButton 或 ImageView绑定点击事件
3. 图片+文字按钮→ 优先使用Button的drawable属性（代码最少）

⚠️常见坑

1. ImageButton默认有灰色背景，想要透明需要设置android:background="@null"
2. src和background不要混用混淆；缩放属性scaleType只作用于src
3. 大图直接加载容易OOM，项目中建议使用Glide等图片框架

需要我把图文按钮那一段，给你一份可直接复制的完整运行xml示例吗？