Texte Android sur l'image


96

J'ai une imageView avec une image, sur cette image je veux placer un texte. Comment puis-je y parvenir?


1
Un moyen simple consiste à prendre un textView et à le définir en arrière-plan comme vous le faites dans ImageView. il fera votre travail facilement ..
AndroidGeek

regardez simplement le lien ci-dessous. J'espère que cela vous aidera ... stackoverflow.com/questions/11100428/…
Ganesh Katikar

Réponses:


163

C'est ainsi que je l'ai fait et cela a fonctionné exactement comme vous l'avez demandé dans 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>

Merci beaucoup pour cet exemple. J'ai essayé d'utiliser la vue textuelle compoundedDrawable mais je ne suis pas en mesure de définir une URL d'image. Mais il est important d'utiliser cette solution de contournement dans une disposition relative pour que les paramètres layout_align soient reconnus.
AntonSack

mettre l'id de contrôle à l'alignement a beaucoup résolu, merci
kal kokah

16

Vous voudrez peut-être prendre si d'un côté différent: Il semble plus facile d'avoir un TextView avec un dessinable en arrière-plan:

 <TextView
            android:id="@+id/text"
            android:background="@drawable/rounded_rectangle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
        </TextView>

10
le problème avec cette réponse est que vous ne pouvez pas contrôler les attributs d'arrière-plan comme imageView. échelle par exemple.
Jesus Dimrix

6

Vous pourriez peut-être

  • créer une nouvelle classe héritée de la classe ImageView et
  • remplacer la méthode onDraw. Appelez super.onDraw()d'abord cette méthode et
  • puis dessinez du texte que vous souhaitez afficher.

si vous procédez ainsi, vous pouvez l'utiliser comme un seul composant de mise en page, ce qui facilite la mise en page avec d'autres composants.



5

Il existe de nombreuses manières. Vous utilisez RelativeLayout ou AbsoluteLayout.

Avec relative, vous pouvez aligner l'image avec le parent sur le côté gauche par exemple et également aligner le texte sur le parent à gauche ... alors vous pouvez utiliser les marges, le remplissage et la gravité sur la vue du texte pour l'aligner là où vous veulent sur l'image.


1
Je suis tombé sur cette méthode par accident. Mais c'est très pratique lorsque vous souhaitez placer du texte sur un bouton d'image ou une vue d'image. Exemple - mettez la température actuelle sur l'image des conditions actuelles.
Phobos

2

Vous pouvez utiliser un TextView et changer son arrière-plan en l'image que vous souhaitez utiliser


le problème avec cette réponse est que vous ne pouvez pas contrôler les attributs d'arrière-plan comme imageView. échelle par exemple.
Jesus Dimrix

2

Pour cela, vous ne pouvez utiliser qu'un seul TextView avec android:drawableLeft/Right/Top/Bottompour positionner une image sur le TextView. De plus, vous pouvez utiliser un peu de remplissage entre le TextView et le dessinable avecandroid:drawablePadding=""

Utilisez-le comme ceci:

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

Avec cela, vous n'avez pas besoin d'un ImageView supplémentaire. Il est également possible d'utiliser deux dessinables sur plus d'un côté de TextView.

Le seul problème que vous rencontrerez en utilisant ceci, est que le dessinable ne peut pas être mis à l'échelle à la manière d'un ImageView.


2

Essayez le code ci-dessous, cela vous aidera`

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

0

Le code ci-dessous cela vous aidera

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();
                }
            }
        });
    }
}```
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.