programar - poner imagen en toolbar android
Agregar nuevo conteo de elementos al ícono en el botón-Android (5)
Soy desarrollador. Necesito implementar el diseño que se muestra a continuación. Ya tengo una aplicación funcional, pero me pregunto cómo abordar esto. Particularmente, estoy interesado en cómo mostrar el número de elementos "nuevos" debajo de las pestañas. Lo que sé hacer es crear iconos nuevos con puntos rojos y simplemente mostrarlos cuando haya nuevos elementos disponibles.
Pero no tengo idea de cómo hacer que esos círculos redondos floten sobre el título Y mostrar el número dentro. ¿Alguien tiene alguna sugerencia sobre qué buscar? Muestras? ¿Direcciones?
Segunda pregunta sobre las actividades de separación. ¿Debo hacer el control para combinar botones como este y solo inflarlo en actividades? De lo contrario, puedo crear una actividad con pestañas, pero no estoy seguro de si es posible darle un estilo para que se vea así.
En lugar de usar un óvalo, puede usar la forma del anillo para dibujar un círculo completo perfecto.
Por favor mira mi respuesta here .
Simplifica el truco dando estilo a TextView solamente.
<TextView
android:id="@+id/fabCounter"
style="@style/Widget.Design.FloatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_marginEnd="10dp"
android:padding="5dp"
android:text="10"
android:textColor="@android:color/black"
android:textSize="14sp" />
para las personas que están buscando Android Xamarin pueden usar este código
public class CountDrawable : Drawable
{
private float mTextSize;
private Paint mBadgePaint;
private Paint mTextPaint;
private Rect mTxtRect = new Rect();
private String mCount = "";
private bool mWillDraw = false;
public CountDrawable(Context context)
{
float mTextSize = context.Resources.GetDimension(Resource.Dimension.badge_count_textsize);
mBadgePaint = new Paint();
// mBadgePaint.SetCol(ContextCompat.GetColor(context.ApplicationContext, Resource.Color.background_color));
mBadgePaint.Color = new Color(Color.Red);
mBadgePaint.AntiAlias = true;
mBadgePaint.SetStyle(Paint.Style.Fill);
mTextPaint = new Paint();
mTextPaint.Color = new Color(Color.White);
mTextPaint.SetTypeface(Typeface.DefaultBold);
mTextPaint.TextSize = mTextSize;
mTextPaint.AntiAlias = true;
mTextPaint.TextAlign = Paint.Align.Center;
}
public override void Draw(Canvas canvas)
{
if(!mWillDraw)
{
return;
}
Rect bounds = GetBounds;
float width = bounds.Right - bounds.Left;
float height = bounds.Bottom - bounds.Top;
float radius = ((Math.Max(width, height) / 2)) / 2;
float centerX = (width - radius - 1) + 5;
float centerY = radius - 5;
if (mCount.Length <= 2)
{
// Draw badge circle.
canvas.DrawCircle(centerX, centerY, (int)(radius + 5.5), mBadgePaint);
}
else
{
canvas.DrawCircle(centerX, centerY, (int)(radius + 6.5), mBadgePaint);
}
mTextPaint.GetTextBounds(mCount, 0, mCount.Length, mTxtRect);
float textHeight = mTxtRect.Bottom - mTxtRect.Top;
float textY = centerY + (textHeight / 2f);
if (mCount.Length > 2)
canvas.DrawText("99+", centerX, textY, mTextPaint);
else
canvas.DrawText(mCount, centerX, textY, mTextPaint);
}
public Rect GetBounds { get; set; }
public void setCount(String count)
{
mCount = count;
// Only draw a badge if there are notifications.
// mWillDraw = !count.equalsIgnoreCase("0");
mWillDraw = !string.Equals(count, "0", StringComparison.OrdinalIgnoreCase);
// invalidateSelf();
}
public override void SetAlpha(int alpha)
{
}
public override void SetColorFilter(ColorFilter colorFilter)
{
}
public override int Opacity
{
get;
}
}
Y en MainActivity
public override bool OnCreateOptionsMenu(IMenu menu)
{
// return base.OnCreateOptionsMenu(menu);
MenuInflater.Inflate(Resource.Menu.actionmenu, menu);
// var dd = menu.FindItem(Resource.Id.icon_group);
IMenuItem item = menu.FindItem(Resource.Id.ic_group);
LayerDrawable icon = item.Icon as LayerDrawable;
// LayerDrawable icon = (LayerDrawable)item.Icon;
CountDrawable badge;
Drawable reuse = icon.FindDrawableByLayerId(Resource.Id.ic_group_count);
if (reuse != null && reuse is CountDrawable)
{
badge = (CountDrawable)reuse;
}
else
{
badge = new CountDrawable(this);
}
badge.setCount("8");
badge.GetBounds=icon.Bounds;
icon.Mutate();
icon.SetDrawableByLayerId(Resource.Id.ic_group_count, badge);
return true;
}
Android ViewBadger
Una forma sencilla de "identificar" cualquier vista de Android en tiempo de ejecución sin tener que adaptarla en el diseño.
Agregue el archivo .jar en su carpeta libs
Haga clic para descargar el ejemplo
ver Example en github
Ejemplo simple:
View target = findViewById(R.id.target_view);
BadgeView badge = new BadgeView(this, target);
badge.setText("1");
badge.show();
Convierte tu insignia en TextView , lo que te permite establecer el valor numérico a cualquier cosa que desees al llamar a setText() . Establezca el fondo de TextView como un XML <shape> drawable, con el que puede crear un círculo sólido o degradado con un borde. Un XML dibujable se escalará para ajustarse a la vista a medida que cambia de tamaño con más o menos texto.
res / drawable / badge_circle.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#F00" />
<stroke
android:width="2dip"
android:color="#FFF" />
<padding
android:left="5dip"
android:right="5dip"
android:top="5dip"
android:bottom="5dip" />
</shape>
Sin embargo, tendrá que observar cómo las escalas ovales / circulares con números grandes de 3-4 dígitos. Si este efecto no es deseable, pruebe con un enfoque de rectángulo redondeado como se muestra a continuación. Con números pequeños, el rectángulo todavía se verá como un círculo cuando los radios converjan entre sí.
res / drawable / badge_circle.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="10dip"/>
<solid
android:color="#F00" />
<stroke
android:width="2dip"
android:color="#FFF" />
<padding
android:left="5dip"
android:right="5dip"
android:top="5dip"
android:bottom="5dip" />
</shape>
Con el fondo escalable creado, simplemente lo agrega al fondo de una TextView , de esta manera:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="10"
android:textColor="#FFF"
android:textSize="16sp"
android:textStyle="bold"
android:background="@drawable/badge_circle"/>
Finalmente, estas insignias de TextView se pueden colocar en su diseño sobre los botones / pestañas correspondientes. Probablemente haga esto agrupando cada botón con su insignia en un contenedor RelativeLayout , así:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="@+id/myButton"
android:layout_width="65dip"
android:layout_height="65dip"/>
<TextView
android:id="@+id/textOne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@id/myButton"
android:layout_alignRight="@id/myButton"
android:text="10"
android:textColor="#FFF"
android:textSize="16sp"
android:textStyle="bold"
android:background="@drawable/badge_circle"/>
</RelativeLayout>
¡Con suerte, eso es suficiente información para, al menos, apuntarlo en la dirección correcta!