帶有可點擊區域的圖像

Question

我創建了一個國家/地區的地圖，當我點擊每個區域時，我想要突出顯示該區域。 有17個地區，可以選擇任何組合。 為此，我將所有圖像設置為不可見，除了背景國家地圖，然后在用戶單擊關聯區域時將每個圖像設置為可見。

當我一次加載多個圖像時，使用的內存量接近120mb。 如何減少使用的內存量仍然可以解決同樣的問題？

每張圖片僅約30kb。

我從這里修改了代碼

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.Color;
import android.os.Bundle;
import android.text.TextUtils;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageView;
import android.widget.Toast;

/**
 * Created by Sam Murtagh on 23/10/13.
 */


public class MetActivity extends Activity
        implements View.OnTouchListener {

    static Integer colorFN = Color.rgb(0, 0, 255);
    static Integer colorTA = Color.rgb(255, 0, 0);
    static Integer colorED = Color.rgb(255, 255, 0);
    static Integer colorTK = Color.rgb(0, 255, 0);
    static Integer colorCP = Color.rgb(0, 255, 255);
    static Integer colorMH = Color.rgb(255, 0, 255);
    static Integer colorSA = Color.rgb(0, 166, 81);
    static Integer colorDV = Color.rgb(255, 255, 255);
    static Integer colorTN = Color.rgb(0, 174, 240);
    static Integer colorST = Color.rgb(247, 151, 121);
    static Integer colorWW = Color.rgb(83, 71, 65);
    static Integer colorKA = Color.rgb(189, 140, 191);
    static Integer colorAL = Color.rgb(96, 57, 19);
    static Integer colorPL = Color.rgb(0, 54, 99);
    static Integer colorFD = Color.rgb(125, 167, 217);
    static Integer colorCY = Color.rgb(172, 212, 115);
    static Integer colorGE = Color.rgb(75, 0, 73);

    private String metflightCode = null;

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_met);

        ImageView iv = (ImageView) findViewById(R.id.image);
        if (iv != null) {
            iv.setOnTouchListener(this);
        }
    }

    public boolean onTouch(View v, MotionEvent ev) {
        boolean handledHere = false;

        final int action = ev.getAction();

        final int evX = (int) ev.getX();
        final int evY = (int) ev.getY();

        switch (action) {
            case MotionEvent.ACTION_DOWN:
                int touchColor = getHotspotColor(R.id.image_areas, evX, evY);
                int tolerance = 25;

                ImageView imageView2 = null;
                String arforCode = null;

                if (closeMatch(colorFN, touchColor, tolerance)) {
                    imageView2 = (ImageView) findViewById(R.id.image_fn);
                    arforCode = "FN";
                } else if (closeMatch(colorTA, touchColor, tolerance)) {
                    imageView2 = (ImageView) findViewById(R.id.image_ta);
                    arforCode = "TA";
                } else if (closeMatch(colorED, touchColor, tolerance)) {
                    imageView2 = (ImageView) findViewById(R.id.image_ed);
                    arforCode = "ED";
                } else if (closeMatch(colorTK, touchColor, tolerance)) {
                    imageView2 = (ImageView) findViewById(R.id.image_tk);
                    arforCode = "TK";
                } else if (closeMatch(colorCP, touchColor, tolerance)) {
                    imageView2 = (ImageView) findViewById(R.id.image_cp);
                    arforCode = "CP";
                } else if (closeMatch(colorMH, touchColor, tolerance)) {
                    imageView2 = (ImageView) findViewById(R.id.image_mh);
                    arforCode = "MH";
                } else if (closeMatch(colorSA, touchColor, tolerance)) {
                    imageView2 = (ImageView) findViewById(R.id.image_sa);
                    arforCode = "SA";
                } else if (closeMatch(colorDV, touchColor, tolerance)) {
                    imageView2 = (ImageView) findViewById(R.id.image_dv);
                    arforCode = "DV";
                } else if (closeMatch(colorTN, touchColor, tolerance)) {
                    imageView2 = (ImageView) findViewById(R.id.image_tn);
                    arforCode = "TN";
                } else if (closeMatch(colorST, touchColor, tolerance)) {
                    imageView2 = (ImageView) findViewById(R.id.image_st);
                    arforCode = "ST";
                } else if (closeMatch(colorWW, touchColor, tolerance)) {
                    imageView2 = (ImageView) findViewById(R.id.image_ww);
                    arforCode = "WW";
                } else if (closeMatch(colorKA, touchColor, tolerance)) {
                    imageView2 = (ImageView) findViewById(R.id.image_ka);
                    arforCode = "KA";
                } else if (closeMatch(colorAL, touchColor, tolerance)) {
                    imageView2 = (ImageView) findViewById(R.id.image_al);
                    arforCode = "AL";
                } else if (closeMatch(colorPL, touchColor, tolerance)) {
                    imageView2 = (ImageView) findViewById(R.id.image_pl);
                    arforCode = "PL";
                } else if (closeMatch(colorFD, touchColor, tolerance)) {
                    imageView2 = (ImageView) findViewById(R.id.image_fd);
                    arforCode = "FD";
                } else if (closeMatch(colorCY, touchColor, tolerance)) {
                    imageView2 = (ImageView) findViewById(R.id.image_cy);
                    arforCode = "CY";
                } else if (closeMatch(colorGE, touchColor, tolerance)) {
                    imageView2 = (ImageView) findViewById(R.id.image_ge);
                    arforCode = "GE";
                }

                if (imageView2 != null) {
                    if (imageView2.getVisibility() == View.INVISIBLE) {
                        imageView2.setVisibility(View.VISIBLE);
                        if (metflightCode == null)
                            metflightCode = arforCode;
                        else
                            metflightCode = metflightCode + ' ' + arforCode;
                    } else {
                        imageView2.setVisibility(View.INVISIBLE);
                        String[] extract = metflightCode.split(arforCode);
                        metflightCode = TextUtils.join("", extract);
                    }
                }

                Toast.makeText(this, metflightCode, Toast.LENGTH_LONG).show();

                handledHere = true;
                break;
            default:
                handledHere = false;
        } // end switch

        return handledHere;
    }

    public int getHotspotColor(int hotspotId, int x, int y) {
        ImageView img = (ImageView) findViewById(hotspotId);
        img.setDrawingCacheEnabled(true);
        Bitmap hotspots = Bitmap.createBitmap(img.getDrawingCache());
        img.setDrawingCacheEnabled(false);
        return hotspots.getPixel(x, y);
    }

    /**
     * Return true if the two colors are a pretty good match.
     * To be a good match, all three color values (RGB) must be within the tolerance value given.
     *
     * @param color1    int
     * @param color2    int
     * @param tolerance int - the max difference that is allowed for any of the RGB components
     * @return boolean
     */

    public boolean closeMatch(int color1, int color2, int tolerance) {
        if ((int) Math.abs(Color.red(color1) - Color.red(color2)) > tolerance) return false;
        if ((int) Math.abs(Color.green(color1) - Color.green(color2)) > tolerance) return false;
        if ((int) Math.abs(Color.blue(color1) - Color.blue(color2)) > tolerance) return false;
        return true;
    }


}

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/my_frame"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
     >
    <ImageView
        android:id="@+id/image_areas"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitCenter"
        android:visibility="invisible"
        android:src="@drawable/arfor_clickable"
        />

    <ImageView
        android:id="@+id/image"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitCenter"
        android:src="@drawable/arfor_outline"
        />

    <ImageView
        android:id="@+id/image_fn"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitCenter"
        android:visibility="invisible"
        android:src="@drawable/arfor_fn"
        />

    <ImageView
        android:id="@+id/image_ta"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitCenter"
        android:visibility="invisible"
        android:src="@drawable/arfor_ta"
        />

    <ImageView
        android:id="@+id/image_ed"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitCenter"
        android:visibility="invisible"
        android:src="@drawable/arfor_ed"
        />

    <ImageView
        android:id="@+id/image_tk"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitCenter"
        android:visibility="invisible"
        android:src="@drawable/arfor_tk"
        />

    <ImageView
        android:id="@+id/image_cp"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitCenter"
        android:visibility="invisible"
        android:src="@drawable/arfor_cp"
        />

    <ImageView
        android:id="@+id/image_mh"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitCenter"
        android:visibility="invisible"
        android:src="@drawable/arfor_mh"
        />

    <ImageView
        android:id="@+id/image_sa"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitCenter"
        android:visibility="invisible"
        android:src="@drawable/arfor_sa"
        />

    <ImageView
        android:id="@+id/image_st"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitCenter"
        android:visibility="invisible"
        android:src="@drawable/arfor_st"
        />

    <ImageView
        android:id="@+id/image_dv"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitCenter"
        android:visibility="invisible"
        android:src="@drawable/arfor_dv"
        />

    <ImageView
        android:id="@+id/image_tn"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitCenter"
        android:visibility="invisible"
        android:src="@drawable/arfor_tn"
        />

    <ImageView
        android:id="@+id/image_ww"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitCenter"
        android:visibility="invisible"
        android:src="@drawable/arfor_ww"
        />

    <ImageView
        android:id="@+id/image_ka"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitCenter"
        android:visibility="invisible"
        android:src="@drawable/arfor_ka"
        />

    <ImageView
        android:id="@+id/image_al"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitCenter"
        android:visibility="invisible"
        android:src="@drawable/arfor_al"
        />

    <ImageView
        android:id="@+id/image_pl"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitCenter"
        android:visibility="invisible"
        android:src="@drawable/arfor_pl"
        />

    <ImageView
        android:id="@+id/image_fd"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitCenter"
        android:visibility="invisible"
        android:src="@drawable/arfor_fd"
        />

    <ImageView
        android:id="@+id/image_cy"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitCenter"
        android:visibility="invisible"
        android:src="@drawable/arfor_cy"
        />

    <ImageView
        android:id="@+id/image_ge"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitCenter"
        android:visibility="invisible"
        android:src="@drawable/arfor_ge"
        />

    <ImageView
        android:id="@+id/image_text"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitCenter"
        android:visibility="visible"
        android:src="@drawable/arfor_text"
        />
</FrameLayout>

Answer 1

通過擁有多個圖像很難完成這項任務。它會占用大量的內存。我想建議你遵循ImageMapping概念，而不是處理多個圖像。你可以更精確地實現相同的功能，顯然只使用一個圖像。

參考：

我在這里發布的詳細答案

來自github的庫和示例項目： AndroidImageMap

Answer 2

重要的不是圖像的壓縮文件大小，而是您選擇的尺寸和RGB配置 ，因為您正在解碼為Bitmap 。

我建議您在發生單擊時以編程方式加載“不可見”圖像，而不是使用一堆圖像和相應的ImageView預加載布局。

加載圖像時，您可以在BitmapFactory.decodeResource使用並傳遞一個BitmapFactory.Options其中inPrefferedConfig設置為RGB_565 （每像素2個字節）或ALPHA_8 （每個像素1個字節），具體取決於圖像的性質，默認情況下是ARGB_8888 ，每個像素占用4個字節。 在我的使用案例中， RGB_565在半個字節的情況下為您提供了相當好的質量，所以我會繼續使用它。