如何以编程方式显示带有文本（或按钮或其他）覆盖的图像？

Question

我有一张要通过 ImageView 元素显示的图像。根据用户输入（例如，长按），我想在该图像上覆盖一些东西，这样覆盖层就在屏幕中间（或者至少在左上角以外的地方......但是关键是它覆盖了图像并且我可以在代码中选择该位置。它可能是一个信息丰富的 TextView 项（虽然不是 Toast），或者是一些短暂的缩放按钮）。

这最终都将成为某种 ScrollView 的子项（可能是 TwoDScrollView，但如果您有更好的建议，请告诉我），因此无论放置什么文本或按钮都不应排除这种可能性。 WebView 虽然不是一个选项。除非您有更好的建议，否则我可能会使用 RelativeLayout。

我想以编程方式执行此操作 - 不是在 XML 中。我不希望任何人提供完整的程序（除非已经存在......我还没有找到一个）。对于图像上的某些文本，我只需要一个关于如何正确实现这一点的坚实大纲。

编辑：我一直在寻找一整天，我发现了很多想法，但它们要么只是 XML，要么与我在这里尝试做的完全不同。但是，如果您有合适的指针，请告诉我！

编辑 2：这是我创建的一个工作示例，它完成了我打算完成的任务。希望这对其他人有用！ animage1 是一个 1000x1000px 的图像...关键是它比您使用的屏幕大。 animage2 相对较小（100x100px）。 “菜单”被重载以切换第二张图像的可见性作为概念证明。

package com.myname.testoverlay2;

//import android.widget.HorizontalScrollView; // Works with this as well

import com.myname.testoverlay2.TwoDScrollView;
// From - http://blog.gorges.us/2010/06/android-two-dimensional-scrollview/
//     with fix added from comments there

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.os.Handler;
import android.util.Log;
import android.view.Gravity;
import android.view.KeyEvent;
import android.view.ViewGroup.LayoutParams;
import android.widget.FrameLayout;
import android.widget.ImageView;

public class Testoverlay2Activity extends Activity {
    private static final String TAG = "MyApp";

    ImageView iv2;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        FrameLayout fl1 = new FrameLayout(this);
        FrameLayout.LayoutParams flp1 = new FrameLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);
        fl1.setId(9001);
        fl1.setLayoutParams(flp1);

        TwoDScrollView sv1 = new TwoDScrollView(this);
        sv1.setId(9002);

        FrameLayout fl2 = new FrameLayout(this);
        FrameLayout.LayoutParams flp2 = new FrameLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);
        fl2.setId(9003);
        fl2.setLayoutParams(flp2);

        ImageView iv1 = new ImageView(this);
        FrameLayout.LayoutParams ivp1 = new FrameLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        iv1.setId(9004);
        iv1.setLayoutParams(ivp1);
        Bitmap bm1 = BitmapFactory.decodeResource(getResources(),
            getResources().getIdentifier("animage1" , "drawable", getPackageName()));
        iv1.setImageBitmap(bm1);
        //Log.d(TAG, "Bitmap1 = (" + bm1.getWidth() + ", " + bm1.getHeight() + ")");

        iv2 = new ImageView(this);
        FrameLayout.LayoutParams ivp2 = new FrameLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT, Gravity.CENTER);
        iv2.setId(9005);
        iv2.setLayoutParams(ivp2);
        Bitmap bm2 = BitmapFactory.decodeResource(getResources(),
            getResources().getIdentifier("animage2" , "drawable", getPackageName()));
        iv2.setImageBitmap(bm2);
        //Log.d(TAG, "Bitmap2 = (" + bm2.getWidth() + ", " + bm2.getHeight() + ")");

        // Lay everything out
        fl1.addView(sv1);
        fl1.addView(iv2);
        sv1.addView(fl2);
        fl2.addView(iv1);
        setContentView(fl1);

        // The following is based on a StackOverflow comment that scrollTo won't work immediately, in general...
        // http://stackoverflow.com/questions/4720469/horizontalscrollview-auto-scroll-to-end-when-new-views-are-added
        Handler mHandler = new Handler();
        mHandler.postDelayed(new Runnable() {
            public void run() {
                TwoDScrollView container=(TwoDScrollView)findViewById(9002);
                if (container != null) {
                    Log.d(TAG, "executing scrollTo()");
                    //container.setOverScrollMode(TwoDScrollView.OVER_SCROLL_IF_CONTENT_SCROLLS); // Needed?
                    container.scrollTo(500,500);
                }
                else {
                    Log.d("MyApp", "Container is null");
                }
            }
        }, 100L);  
    }

    // Keyboard wedge for testing convenience
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        Log.d(TAG, "Keypress = (" + keyCode + ")");
        switch (keyCode) {
        case KeyEvent.KEYCODE_MENU:
            /* Sample for handling the Menu button globally */
            if (iv2.getVisibility() == ImageView.VISIBLE) {
                iv2.setVisibility(ImageView.INVISIBLE);             
            }
            else {
                iv2.setVisibility(ImageView.VISIBLE);
            }
            return true;
        }
        return super.onKeyDown(keyCode, event);
    } 
}

Answer 1

您可以扩展视图类并覆盖 ondraw 方法。使用画布，您可以在其上绘制位图和文本。

据我了解，您需要让文本出现在中间并且独立于滚动视图。这是我要制作的 UI 的结构

<FrameLayout>
    <ScrollView>
        <Imageview/>
    </ScrollView>
    <TextView/>
</FrameLayout>

要以编程方式创建此布局，大致就是这样做的。

    ViewGroup.LayoutParams lp = new LayoutParams(LayoutParams.FILL_PARENT, 
            LayoutParams.FILL_PARENT);

    ScrollView sv = new ScrollView(this);
    sv.setLayoutParams(lp);

    TextView tx = new TextView(this);
    tx.setLayoutParams(lp);
    tx.setGravity(Gravity.CENTER);
    tx.setText("Test");

    FrameLayout fr = new FrameLayout(this);        
    fr.setLayoutParams(lp);
    fr.addView(sv);
    fr.addView(tx);
    setContentView(fr);

上面的代码应该放在 onCreate 方法中。这就是你粗略的做法。您需要进行一些修改或添加以使其适合您。