Android Text ทับรูปภาพ


97

ฉันมี imageView พร้อมรูปภาพบนรูปภาพนั้นฉันต้องการวางข้อความ ฉันจะบรรลุเป้าหมายนั้นได้อย่างไร?


1
วิธีง่ายๆคือใช้ textView และตั้งค่าพื้นหลังเหมือนที่คุณทำใน ImageView มันจะทำให้งานของคุณง่ายขึ้น ..
AndroidGeek

เพียงแค่ดูที่ลิงค์ด้านล่าง ฉันหวังว่ามันจะช่วยคุณ ... stackoverflow.com/questions/11100428/…
Ganesh Katikar

คำตอบ:


163

นั่นคือวิธีที่ฉันทำและมันทำงานได้ตรงตามที่คุณขอใน 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>

ขอบคุณมากสำหรับตัวอย่างนี้ ฉันพยายามใช้ textview compoundedDrawable แต่ฉันไม่สามารถตั้งค่า URL ของรูปภาพได้ แต่สิ่งสำคัญคือต้องใช้วิธีแก้ปัญหานี้ในรูปแบบสัมพัทธ์เพื่อให้รู้จักการตั้งค่า layout_align
AntonSack

การวาง id ของการควบคุมในการจัดตำแหน่งนั้นแก้ไขได้มากขอบคุณ
kal kokah

17

คุณอาจต้องการใช้ if จากด้านที่แตกต่างกัน: ดูเหมือนว่าจะง่ายกว่าที่จะมี TextView ที่มีพื้นหลังวาดได้:

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

10
ปัญหาของคำตอบนี้คือคุณไม่สามารถควบคุมแอตทริบิวต์พื้นหลังเช่น imageView ได้ มาตราส่วนเช่น
Jesus Dimrix

6

คุณสามารถทำได้

  • สร้างคลาสใหม่ที่สืบทอดมาจาก Class ImageView และ
  • onDrawแทนที่วิธี โทรsuper.onDraw()วิธีนั้นก่อนและ
  • จากนั้นวาดข้อความที่คุณต้องการแสดง

หากคุณทำเช่นนั้นคุณสามารถใช้สิ่งนี้เป็นส่วนประกอบของเค้าโครงเดียวซึ่งช่วยให้จัดวางร่วมกับส่วนประกอบอื่น ๆ ได้ง่ายขึ้น



5

มีมากมายหลายวิธี คุณใช้ RelativeLayout หรือ AbsoluteLayout

ด้วยความสัมพัทธ์คุณสามารถจัดตำแหน่งรูปภาพให้ตรงกับพาเรนต์ทางด้านซ้ายได้เช่นกันและยังมีการจัดแนวข้อความให้ชิดซ้ายด้วย ... จากนั้นคุณสามารถใช้ระยะขอบและช่องว่างภายในและแรงโน้มถ่วงในมุมมองข้อความเพื่อจัดเรียงในตำแหน่งที่คุณ ต้องการมากกว่าภาพ


1
ฉันใช้วิธีนี้โดยบังเอิญ แต่มีประโยชน์มากเมื่อคุณต้องการใส่ข้อความบางส่วนบนปุ่มรูปภาพหรือมุมมองภาพ ตัวอย่าง - ใส่อุณหภูมิปัจจุบันเหนือรูปภาพของเงื่อนไขปัจจุบัน
โฟบอส

2

คุณสามารถใช้ TextView และเปลี่ยนพื้นหลังเป็นรูปภาพที่คุณต้องการใช้


ปัญหาของคำตอบนี้คือคุณไม่สามารถควบคุมแอตทริบิวต์พื้นหลังเช่น imageView ได้ มาตราส่วนเช่น
Jesus Dimrix

2

สำหรับสิ่งนี้คุณสามารถใช้ TextView เดียวกับ android:drawableLeft/Right/Top/Bottomเพื่อวางตำแหน่งรูปภาพไปที่ TextView นอกจากนี้คุณสามารถใช้ช่องว่างระหว่าง TextView และ drawable ด้วยandroid:drawablePadding=""

ใช้แบบนี้:

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

ด้วยวิธีนี้คุณไม่จำเป็นต้องมี ImageView เพิ่มเติม นอกจากนี้ยังสามารถใช้สอง drawables ในมากกว่าหนึ่งด้านของ TextView

ปัญหาเดียวที่คุณจะต้องเผชิญเมื่อใช้สิ่งนี้คือไม่สามารถปรับขนาด drawable ได้เหมือน ImageView


2

ลองใช้รหัสด้านล่างนี้จะช่วยคุณได้

  <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

รหัสด้านล่างนี้จะช่วยคุณได้

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();
                }
            }
        });
    }
}```
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.