安卓学习日志 Day04 — 单词图片&界面美化

概述

继续构建Miwok应用，上次已经成功在四个页面显示了 每个词汇的 两个语言版本

接下来将在每个列表项中为 词汇添加图片 ，最后，对页面进行一下美化，即 将每个页面中列表项的背景色改为 该页面的主题色

目标

• 图片资源添加
• 页面外观改善（列表项的背景色等）

最终的效果，是这样（Phrases 页面不需要添加图片，因为没有合适的图片来表达短语）：

实现步骤

更改布局

修改列表项的布局，预留一个应用显示词汇图片的区域：

最终的列表项布局分为左右两部分，左边为该词汇的图片，右边则显示词汇的 Miwok 和 English 语言版本。

而右边的显示词汇部分，又可以分为上下两部分：上面是Miwok版本、下面是English版本。

因此可以考虑使用一个水平的线性布局，再嵌套一个垂直的线性布局来实现：

添加图片资源

首先，将所有的图片文件 放到 资源目录下 的 drawable 文件夹当中，这里就不再截图了。

每个单词都有一个对应的图片（ Phrases 页面没有），那么将图片资源的id 封装的每个 Word对象当中是一个可行的策略。

这样 就可以根据每个 Word对象的 图片资源 id 来这 列表项中的图片了。

更改 Word 类如下：为其添加一个成员变量来记录图片资源的id ，以及该成员变量的 Getter 方法：

public class Word {
   
    
    // …………
    
    /**
     * Image resource is for the word
     */
    private int imageResourceId = NO_IMAGE_PROVIDED;

    /**
     * Constant value that represents no image was provided for this word
     */
    private static final int NO_IMAGE_PROVIDED = -1;
    
    /**
     * Create a new Word object.
     *
     * @param defaultTranslation is the word in a language that the user is already familiar with
     *                           (such as English)
     * @param miwokTranslation   is the word in the Miwok language
     */
    public Word(String defaultTranslation, String miwokTranslation) {
   
        this.defaultTranslation = defaultTranslation;
        this.miwokTranslation = miwokTranslation;
    }
    
    /**
     * Create a new Word object.
     *
     * @param defaultTranslation is the word in a language that the user is already familiar with
     *                           (such as English)
     * @param miwokTranslation   is the word in the Miwok language
     * @param imageResourceId    is the drawable resource ID for the image associated with the word
     * @param audioResourceId    is the audio resource id with the word
     */
    public Word(String defaultTranslation, String miwokTranslation, int imageResourceId) {
   
        this.defaultTranslation = defaultTranslation;
        this.miwokTranslation = miwokTranslation;
        this.imageResourceId = imageResourceId;
    }
    
    /**
     * Get the image resource is for the word
     */
    public int getImageResourceId() {
   
        return imageResourceId;
    }<