图片上的 Android 文本

我有一个带有图像的图像 View,在这个图像上我想放置一个文本。我怎么才能做到呢?

142191 次浏览

You want to use a FrameLayout or a Merge layout to achieve this. Android dev guide has a great example of this here: Android Layout Tricks #3: Optimize by merging.

There are many ways. You use RelativeLayout or AbsoluteLayout.

With relative, you can have the image align with parent on the left side for example and also have the text align to the parent left too... then you can use margins and padding and gravity on the text view to get it lined where you want over the image.

You could possibly

  • make a new class inherited from the Class ImageView and
  • override the Method onDraw. Call super.onDraw() in that method first and
  • then draw some Text you want to display.

if you do it that way, you can use this as a single Layout Component which makes it easier to layout together with other components.

You can use a TextView and change its background to the image you want to use

That is how I did it and it worked exactly as you asked for inside a 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>

You may want to take if from a diffrent side: It seems easier to have a TextView with a drawable on the background:

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

For this you can use only one TextView with android:drawableLeft/Right/Top/Bottom to position a Image to the TextView. Furthermore you can use some padding between the TextView and the drawable with android:drawablePadding=""

Use it like this:

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

With this you don't need an extra ImageView. It's also possible to use two drawables on more than one side of the TextView.

The only problem you will face by using this, is that the drawable can't be scaled the way of an ImageView.

Try the below code this will help you`

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

The below code this will help you

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();
}
}
});
}
}```