Android中如何同时加载图片与文本？附布局代码示例

嘿，我看你已经基于RelativeLayout开始搭建图片加文本的布局了，下面我来帮你把这个实现补全，同时分享一些实用的优化技巧：

一、完善你的RelativeLayout布局 #

你提供的布局片段已经有了ImageView的基础，我帮你补全TextView的部分，同时添加一些提升体验的属性：

<RelativeLayout 
    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="com.example.jatin.foreignlanguagefinal.French.FrenchFacts">

    <!-- 顶部图片区域 -->
    <ImageView
        android:id="@+id/imageFact"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:src="@drawable/booksf"
        android:scaleType="centerCrop" <!-- 避免图片拉伸变形 -->
        android:contentDescription="@string/fact_image_desc"/> <!-- 适配无障碍需求 -->

    <!-- 图片下方的文本区域 -->
    <TextView
        android:id="@+id/textFact"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imageFact" <!-- 让文本固定在图片下方 -->
        android:layout_marginHorizontal="16dp"
        android:layout_marginTop="16dp"
        android:textSize="18sp"
        android:textColor="@android:color/black"
        android:text="@string/sample_fact_content" <!-- 替换成你的目标文本 -->
        android:lineSpacingExtra="4sp" <!-- 增加行间距提升可读性 -->
        android:ellipsize="end" <!-- 长文本末尾用省略号截断 -->
        android:maxLines="10"/> <!-- 限制文本最大行数，避免占用过多空间 -->
</RelativeLayout>

二、加载逻辑实现 #

1. 本地资源加载 #

如果你的图片和文本都是本地资源（比如drawable里的图片、strings.xml里的文本），那么上面的布局已经可以直接显示内容了，不需要额外的Java/Kotlin代码。

2. 网络资源加载 #

如果需要加载网络图片和远程文本，推荐用成熟的图片加载库（比如Glide）来处理图片加载，同时通过接口请求获取文本：

步骤1：添加Glide依赖（在app/build.gradle里）

dependencies {
    implementation 'com.github.bumptech.glide:glide:4.16.0'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.16.0'
}

步骤2：在Activity中实现加载逻辑

import com.bumptech.glide.Glide;

public class FrenchFacts extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.your_layout_name); // 替换成你的布局文件名

        ImageView imageView = findViewById(R.id.imageFact);
        TextView textView = findViewById(R.id.textFact);

        // 加载网络图片
        Glide.with(this)
             .load("https://your-domain.com/fact-image.jpg") // 替换为你的图片URL
             .placeholder(R.drawable.placeholder) // 加载过程中显示的占位图
             .error(R.drawable.error_image) // 加载失败时显示的图片
             .into(imageView);

        // 加载远程文本（这里用示例，实际项目中可以用Retrofit/OkHttp请求接口）
        String remoteFactText = "从接口获取的事实文本内容";
        textView.setText(remoteFactText);
    }
}

三、实用优化建议 #

• 权限配置：如果加载网络资源，别忘了在AndroidManifest.xml中添加网络权限：

  <uses-permission android:name="android.permission.INTERNET"/>
  

• 图片性能优化：对于大尺寸图片，建议使用WebP格式，或者通过Glide的override()方法指定加载尺寸，避免占用过多内存导致OOM。
• 文本适配：可以根据不同屏幕尺寸调整文本大小，比如用sp单位，或者通过 dimens.xml配置不同分辨率下的文本尺寸。
• 列表场景适配：如果是在RecyclerView中批量展示图片+文本，要注意ViewHolder的复用，同时用Glide的缓存机制避免重复加载，提升列表滚动流畅度。

内容的提问来源于stack exchange，提问作者Jatin