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

Question

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

这将最终成为一个ScrollView的孩子的某种(可能是TwoDScrollView，但如果你有一个更好的建议让我知道)，所以无论文本或按钮得到放置不应该排除这种可能性。但WebView不是一个选项。我可能会使用RelativeLayout，除非你有更好的建议。

我想用编程的方式来做，而不是用XML。我不期望任何人提供完整的程序(除非已经存在)……我还没有找到一个)。我只需要一个坚实的轮廓，如何使这发生正确的一些文本在一个图像。

编辑:我一整天都在寻找，我发现了很多想法，但它们要么是纯xml的，要么与我在这里尝试做的完全不同。然而，如果你有一个适当的指针，请让我知道!

编辑2:这是我创建的一个工作示例，它完成了我打算完成的任务。希望这将对其他人有用!Animage1是一个1000x1000px的图像…关键是它比你正在使用的屏幕要大。Animage2相对较小(100x100px)。"Menu"被重载以切换第二张图像的可见性作为概念证明。

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方法中。这就是你大致的做法。您将需要做一些修改或添加，使其为您工作。