Android Text über Bild

95

Ich habe eine Bildansicht mit einem Bild. Über diesem Bild möchte ich einen Text platzieren. Wie kann ich das erreichen?

AndyAndroid
quelle
1
Eine einfache Möglichkeit besteht darin, eine Textansicht zu erstellen und den Hintergrund wie in ImageView festzulegen. es wird Ihre Arbeit leicht machen ..
Zar E Ahmer
Schauen Sie sich einfach den folgenden Link an. Ich hoffe, es wird dir helfen ... stackoverflow.com/questions/11100428/…
Ganesh Katikar

Antworten:

162

So habe ich es gemacht und es hat genau so funktioniert, wie Sie es in einem RelativeLayout verlangt haben:

<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
quelle
Vielen Dank für dieses Beispiel. Ich habe versucht, die zusammengesetzte Textansicht zu verwenden, aber dort kann ich keine Bild-URL festlegen. Es ist jedoch wichtig, diese Problemumgehung in einem relativen Layout zu verwenden, damit die Einstellungen für layout_align erkannt werden.
AntonSack
Das Setzen der ID der Kontrolle auf die Ausrichtung hat viel gelöst, danke
kal kokah
16

Vielleicht möchten Sie von einer anderen Seite nehmen: Es scheint einfacher zu sein, eine Textansicht mit einer Zeichnung im Hintergrund zu haben:

 <TextView
            android:id="@+id/text"
            android:background="@drawable/rounded_rectangle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
        </TextView>
Martar
quelle
10
Das Problem bei dieser Antwort ist, dass Sie die Hintergrundattribute wie imageView nicht steuern können. Skala zum Beispiel.
Jesus Dimrix
6

Sie könnten möglicherweise

  • Erstellen Sie eine neue Klasse, die von der Klasse ImageView und geerbt wurde
  • Überschreiben Sie die Methode onDraw. Rufen Sie zuerst super.onDraw()diese Methode auf und
  • Zeichnen Sie dann einen Text, den Sie anzeigen möchten.

Wenn Sie dies auf diese Weise tun, können Sie dies als einzelne Layoutkomponente verwenden, wodurch das Layout zusammen mit anderen Komponenten vereinfacht wird.

Chris
quelle
5

Es gibt viele Wege. Sie verwenden RelativeLayout oder AbsoluteLayout.

Mit "relative" können Sie beispielsweise das Bild auf der linken Seite am übergeordneten Element ausrichten und den Text auch links am übergeordneten Element ausrichten. Anschließend können Sie Ränder, Auffüllungen und Schwerkraft in der Textansicht verwenden, um es an der gewünschten Stelle auszurichten will über das Bild.

trgraglia
quelle
1
Ich bin zufällig auf diese Methode gestoßen. Es ist jedoch sehr praktisch, wenn Sie Text über eine Bildschaltfläche oder eine Bildansicht einfügen möchten. Beispiel - Legen Sie die aktuelle Temperatur über das Bild der aktuellen Bedingungen.
Phobos
2

Sie können eine Textansicht verwenden und ihren Hintergrund in das Bild ändern, das Sie verwenden möchten

Eonasdan
quelle
Das Problem bei dieser Antwort ist, dass Sie die Hintergrundattribute wie imageView nicht steuern können. Skala zum Beispiel.
Jesus Dimrix
2

Dazu können Sie nur eine TextView mit verwenden, android:drawableLeft/Right/Top/Bottomum ein Bild in der TextView zu positionieren. Darüber hinaus können Sie eine Auffüllung zwischen der Textansicht und dem Zeichenobjekt mit verwendenandroid:drawablePadding=""

Verwenden Sie es so:

<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"/>

Damit benötigen Sie keine zusätzliche ImageView. Es ist auch möglich, zwei Zeichen auf mehr als einer Seite der Textansicht zu verwenden.

Das einzige Problem, mit dem Sie dabei konfrontiert werden, ist, dass das Zeichenelement nicht wie eine ImageView skaliert werden kann.

Steve Benett
quelle
2

Versuchen Sie den folgenden Code, dies wird Ihnen helfen

  <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
quelle
0

Der folgende Code hilft Ihnen dabei

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
quelle