Texto de Android sobre imagen

Respuestas:

163

Así es como lo hice y funcionó exactamente como lo solicitó dentro de un RelativeLayout:

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/relativelayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <ImageView
        android:id="@+id/myImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/myImageSouce" />

    <TextView
        android:id="@+id/myImageViewText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/myImageView"
        android:layout_alignTop="@id/myImageView"
        android:layout_alignRight="@id/myImageView"
        android:layout_alignBottom="@id/myImageView"
        android:layout_margin="1dp"
        android:gravity="center"
        android:text="Hello"
        android:textColor="#000000" />

</RelativeLayout>
Alesqui
fuente
Muchas gracias por este ejemplo. Traté de usar la vista de texto compuesta de dibujo pero no puedo establecer una URL de imagen. Pero es importante utilizar esta solución alternativa en un diseño relativo para que se reconozca la configuración de layout_align.
AntonSack
poner la identificación de control en la alineación se resolvió mucho, gracias
kal kokah
16

Es posible que desee tomarlo desde un lado diferente: parece más fácil tener un TextView con un dibujable en el fondo:

 <TextView
            android:id="@+id/text"
            android:background="@drawable/rounded_rectangle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
        </TextView>
martar
fuente
10
el problema con esta respuesta es que no puede controlar los atributos de fondo como imageView. escala, por ejemplo.
Jesus Dimrix
6

Posiblemente podrías

  • hacer una nueva clase heredada de Class ImageView y
  • anular el método onDraw. Llame super.onDraw()a ese método primero y
  • luego dibuja un texto que quieras mostrar.

si lo hace de esa manera, puede usarlo como un único componente de diseño, lo que facilita el diseño junto con otros componentes.

Chris
fuente
5

Hay muchas maneras. Utiliza RelativeLayout o AbsoluteLayout.

Con relativo, puede hacer que la imagen se alinee con el padre en el lado izquierdo, por ejemplo, y también hacer que el texto se alinee con el padre izquierdo también ... luego puede usar márgenes y relleno y gravedad en la vista de texto para alinearlo donde usted quiero sobre la imagen.

trgraglia
fuente
1
Encontré este método por accidente. Pero es muy útil cuando desea poner texto sobre un botón de imagen o una vista de imagen. Ejemplo: coloque la temperatura actual sobre la imagen de las condiciones actuales.
Phobos
2

Puede usar un TextView y cambiar su fondo a la imagen que desea usar

Eonasdan
fuente
el problema con esta respuesta es que no puede controlar los atributos de fondo como imageView. escala, por ejemplo.
Jesus Dimrix
2

Para esto, puede usar solo un TextView android:drawableLeft/Right/Top/Bottompara colocar una imagen en TextView. Además, puede usar algo de relleno entre TextView y el dibujable conandroid:drawablePadding=""

Úselo así:

<TextView
    android:id="@+id/textAndImage"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

    android:drawableBottom="@drawable/yourDrawable"
    android:drawablePadding="10dp" 
    android:text="Look at the drawable below"/>

Con esto no necesita un ImageView adicional. También es posible utilizar dos elementos de diseño en más de un lado de TextView.

El único problema al que se enfrentará al usar esto es que el elemento de diseño no se puede escalar como un ImageView.

Steve Benett
fuente
2

Prueba el siguiente código, esto te ayudará.

  <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="150dp">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:src="@drawable/gallery1"/>


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#7ad7d7d7"
        android:gravity="center"
        android:text="Juneja Art Gallery"
        android:textColor="#000000"
        android:textSize="15sp"/>
</RelativeLayout>
Akhi Prajapati
fuente
0

El siguiente código te ayudará

public class TextProperty {
    private int heigt;                              //读入文本的行数
    private String []context = new String[1024];    //存储读入的文本

    /*
     *@parameter wordNum
     *
     */
    public TextProperty(int wordNum ,InputStreamReader in) throws Exception {
        int i=0;
        BufferedReader br = new BufferedReader(in);
        String s;
        while((s=br.readLine())!=null){
            if(s.length()>wordNum){
                int k=0;
                while(k+wordNum<=s.length()){
                    context[i++] = s.substring(k, k+wordNum);
                    k=k+wordNum;
                }
                context[i++] = s.substring(k,s.length());
            }
            else{
                context[i++]=s;
            }
        }
        this.heigt = i;
        in.close();
        br.close();
    }


    public int getHeigt() {
        return heigt;
    }

    public String[] getContext() {

        return context;
    }
}
public class MainActivity extends AppCompatActivity {

    private Button btn;
    private ImageView iv;
    private final int WORDNUM = 35;  //转化成图片时  每行显示的字数
    private final int WIDTH = 450;   //设置图片的宽度

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        iv = (ImageView) findViewById(R.id.imageView);
        btn = (Button) findViewById(R.id.button);

        btn.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                int x=5,y=10;
                try {
                    TextProperty tp = new TextProperty(WORDNUM, new InputStreamReader(getResources().getAssets().open("1.txt")));
                    Bitmap bitmap = Bitmap.createBitmap(WIDTH, 20*tp.getHeigt(), Bitmap.Config.ARGB_8888);
                    Canvas canvas = new Canvas(bitmap);
                    Paint paint = new Paint();
                    paint.setColor(Color.WHITE);
                    paint.setTextAlign(Paint.Align.LEFT);
                    paint.setTextSize(20f);

                    String [] ss = tp.getContext();
                    for(int i=0;i<tp.getHeigt();i++){
                        canvas.drawText(ss[i], x, y, paint);
                        y=y+20;
                    }

                    canvas.save(Canvas.ALL_SAVE_FLAG);
                    canvas.restore();
                    String path = Environment.getExternalStorageDirectory() + "/image.png";
                    System.out.println(path);
                    FileOutputStream os = new FileOutputStream(new File(path));
                    bitmap.compress(Bitmap.CompressFormat.PNG, 100, os);
                    //Display the image on ImageView.
                    iv.setImageBitmap(bitmap);
                    iv.setBackgroundColor(Color.BLUE);
                    os.flush();
                    os.close();
                }
                catch (Exception e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
            }
        });
    }
}```
Enli
fuente