android - lado - Cómo distribuir texto para que fluya alrededor de una imagen

como escribir al lado de una imagen en word 2013 (7)

Ahora es posible, pero solo para teléfonos con una versión superior o igual a 2.2 utilizando la interfaz android.text.style.LeadingMarginSpan.LeadingMarginSpan2 que está disponible en API 8.

Aquí está el article , no en inglés, pero puedes descargar el código fuente del ejemplo directamente desde here .

Si desea que su aplicación sea compatible con dispositivos más antiguos, puede mostrar un diseño diferente sin texto flotante. Aquí hay un ejemplo:

Diseño (predeterminado para versiones anteriores, se cambiará programáticamente para versiones más nuevas)

La clase de ayuda

class FlowTextHelper { private static boolean mNewClassAvailable; static { if (Integer.parseInt(Build.VERSION.SDK) >= 8) { // Froyo 2.2, API level 8 mNewClassAvailable = true; } } public static void tryFlowText(String text, View thumbnailView, TextView messageView, Display display){ // There is nothing I can do for older versions, so just return if(!mNewClassAvailable) return; // Get height and width of the image and height of the text line thumbnailView.measure(display.getWidth(), display.getHeight()); int height = thumbnailView.getMeasuredHeight(); int width = thumbnailView.getMeasuredWidth(); float textLineHeight = messageView.getPaint().getTextSize(); // Set the span according to the number of lines and width of the image int lines = (int)FloatMath.ceil(height / textLineHeight); //For an html text you can use this line: SpannableStringBuilder ss = (SpannableStringBuilder)Html.fromHtml(text); SpannableString ss = new SpannableString(text); ss.setSpan(new MyLeadingMarginSpan2(lines, width), 0, ss.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); messageView.setText(ss); // Align the text with the image by removing the rule that the text is to the right of the image RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams)messageView.getLayoutParams(); int[]rules = params.getRules(); rules[RelativeLayout.RIGHT_OF] = 0; } }

La clase MyLeadingMarginSpan2 (actualizada para admitir API 21)

public class MyLeadingMarginSpan2 implements LeadingMarginSpan2 { private int margin; private int lines; private boolean wasDrawCalled = false; private int drawLineCount = 0; public MyLeadingMarginSpan2(int lines, int margin) { this.margin = margin; this.lines = lines; } @Override public int getLeadingMargin(boolean first) { boolean isFirstMargin = first; // a different algorithm for api 21+ if (Build.VERSION.SDK_INT >= 21) { this.drawLineCount = this.wasDrawCalled ? this.drawLineCount + 1 : 0; this.wasDrawCalled = false; isFirstMargin = this.drawLineCount <= this.lines; } return isFirstMargin ? this.margin : 0; } @Override public void drawLeadingMargin(Canvas c, Paint p, int x, int dir, int top, int baseline, int bottom, CharSequence text, int start, int end, boolean first, Layout layout) { this.wasDrawCalled = true; } @Override public int getLeadingMarginLineCount() { return this.lines; } }

Ejemplo del uso

ImageView thumbnailView = (ImageView) findViewById(R.id.thumbnail_view); TextView messageView = (TextView) findViewById(R.id.message_view); String text = getString(R.string.text); Display display = getWindowManager().getDefaultDisplay(); FlowTextHelper.tryFlowText(text, thumbnailView, messageView, display);

Así es como se ve la aplicación en el dispositivo Android 2.2:

Y esto es para el dispositivo Android 2.1:

¿Puedes decirme si hay una forma de distribuir texto alrededor de una imagen? Me gusta esto:

------ text text text | | text text text ----- text text text text text text text text text text text

Recibí una respuesta de un desarrollador de Android sobre esta pregunta. Pero no estoy seguro de a qué se refiere al hacer mi propia versión de TextView. Gracias por cualquier consejo.

El lunes 8 de febrero de 2010 a las 11:05 PM, Romain Guy escribió:

Hola,
Esto no es posible usando únicamente los widgets y diseños suministrados. Podrías escribir tu propia versión de TextView para hacer esto, no debería ser difícil.

Aquí hay una mejora para FlowTextHelper (de la respuesta de vorrtex). Agregué la posibilidad de agregar relleno extra entre el texto y la imagen y mejoré el cálculo de la línea para tener también en cuenta el relleno. ¡Disfrutar!

public class FlowTextHelper { private static boolean mNewClassAvailable; /* class initialization fails when this throws an exception */ static { try { Class.forName("android.text.style.LeadingMarginSpan$LeadingMarginSpan2"); mNewClassAvailable = true; } catch (Exception ex) { mNewClassAvailable = false; } } public static void tryFlowText(String text, View thumbnailView, TextView messageView, Display display, int addPadding){ // There is nothing I can do for older versions, so just return if(!mNewClassAvailable) return; // Get height and width of the image and height of the text line thumbnailView.measure(display.getWidth(), display.getHeight()); int height = thumbnailView.getMeasuredHeight(); int width = thumbnailView.getMeasuredWidth() + addPadding; messageView.measure(width, height); //to allow getTotalPaddingTop int padding = messageView.getTotalPaddingTop(); float textLineHeight = messageView.getPaint().getTextSize(); // Set the span according to the number of lines and width of the image int lines = (int)Math.round((height - padding) / textLineHeight); SpannableString ss = new SpannableString(text); //For an html text you can use this line: SpannableStringBuilder ss = (SpannableStringBuilder)Html.fromHtml(text); ss.setSpan(new MyLeadingMarginSpan2(lines, width), 0, ss.length(), 0); messageView.setText(ss); // Align the text with the image by removing the rule that the text is to the right of the image RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams)messageView.getLayoutParams(); int[]rules = params.getRules(); rules[RelativeLayout.RIGHT_OF] = 0; } }

Esta pregunta parece igual que mi pregunta Cómo llenar los espacios vacíos con contenido debajo de la Imagen en Android

Encontré la solución usando la librería flowtext. Encuentre la primera respuesta que podría ayudarlo hasta ahora

Hoy en día puedes usar la biblioteca: github.com/deano2390/FlowTextView . Me gusta esto:

<uk.co.deanwild.flowtextview.FlowTextView android:id="@+id/ftv" android:layout_width="fill_parent" android:layout_height="wrap_content" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:padding="10dip" android:src="@drawable/android"/> </uk.co.deanwild.flowtextview.FlowTextView>

Las respuestas de Vorrtex y Ronen me funcionan a excepción de un detalle: después de envolver el texto alrededor de la imagen, había un extraño margen "negativo" debajo de la imagen y en el lado opuesto. Descubrí que al configurar el lapso en SpannableString cambié

ss.setSpan(new MyLeadingMarginSpan2(lines, width), 0, ss.length(), 0);

ss.setSpan(new MyLeadingMarginSpan2(lines, width), 0, lines, 0);

que detuvo el lapso después de la imagen. Puede que no sea necesario en todos los casos, pero pensé que lo compartiría.

Puedo ofrecer un constructor más cómodo para la clase MyLeadingMarginSpan2

MyLeadingMarginSpan2(Context cc,int textSize,int height,int width) { int pixelsInLine=(int) (textSize*cc.getResources().getDisplayMetrics().scaledDensity); if (pixelsInLine>0 && height>0) { this.lines=height/pixelsInLine; } else { this.lines=0; } this.margin=width; }

"¿Pero no estoy seguro de a qué se refiere al hacer mi propia versión de TextView?"

Quiere decir que puede extender la clase android.widget.TextView (o Canvas o alguna otra superficie renderizable) e implementar su propia versión de reemplazo que permite imágenes incrustadas con texto que fluye a su alrededor.

Esto podría ser bastante trabajo dependiendo de qué tan general lo hagas.