如何在布局的角落有徽章图标
Posted
技术标签:
【中文标题】如何在布局的角落有徽章图标【英文标题】：How to have badge icon at corner of a layout 【发布时间】：2016-10-11 08:28:31 【问题描述】：我想在布局的角落有一个徽章。我设法在布局内获得徽章，但无法在它的角落实现。
目前我的代码给了我：
我想要什么：我想把这个徽章放在布局的右上角。
我想要这样的东西：
Toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_
android:layout_
android:background="@color/toolbar_color"
android:contentInsetLeft="0dp"
android:contentInsetStart="0dp"
android:elevation="4dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp">
<LinearLayout
android:layout_
android:layout_
android:weightSum="1"
android:orientation="horizontal">
<TextView
android:layout_
android:layout_
android:id="@+id/textview"
android:text="My Assignments"
android:layout_gravity="center"
android:gravity="center"
android:layout_marginLeft="90dp"
android:layout_weight="0.5"
android:textSize="20sp"
/>
<RelativeLayout
android:id="@+id/bell_linearlayout1"
android:layout_
android:layout_
android:layout_gravity="center"
android:layout_marginLeft="15dp">
<RelativeLayout
android:id="@+id/bell_linearlayout"
android:layout_
android:layout_
android:layout_gravity="center"
android:background="#75aadb">
<ImageView
android:layout_
android:layout_
android:layout_marginTop="2dp"
android:layout_centerInParent="true"
android:id="@+id/cartIconImageView"
android:src="@drawable/notification"/>
</RelativeLayout>
<RelativeLayout
android:layout_
android:layout_
android:gravity="end|top|right"
android:layout_alignParentTop="true"
android:layout_marginBottom="100dp"
android:layout_marginLeft="20dp">
<TextView
android:id="@+id/textView1"
android:layout_
android:layout_
android:layout_alignParentTop="true"
android:background="@drawable/badge" />
</RelativeLayout>
</RelativeLayout>
<LinearLayout
android:layout_
android:layout_
android:background="#75aadb"
android:id="@+id/accountinfo_layout"
android:layout_gravity="center"
android:layout_marginLeft="10dp">
<ImageView
android:layout_
android:layout_
android:layout_marginTop="1dp"
android:src="@drawable/profile"/>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.Toolbar>
可绘制的徽章.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="8dp" />
<solid android:color="#f20000" />
<stroke
android:
android:color="#FFF" />
<padding
android:bottom="6dp"
android:left="6dp"
android:right="6dp"
android:top="6dp" />
</shape>
请帮忙。
【问题讨论】：
试试这个：github.com/jgilfelt/android-viewbadger 你需要添加一些边距或内边距来制作它。 【参考方案1】：使用 FrameLayout（而不是 RelativeLayout）并将按钮和图像放入其中。
定位图像（带数字的圆圈）和按钮通过
android:layout_gravity="top|left"
android:layout_marginTop="Xdp"
android:layout_marginLeft="Xdp"
希望对你有帮助
【讨论】：
你设置了左上边距吗？【参考方案2】：也许有点老了，但如果有人读过这篇文章，现在你有了“新”ConstraintLayout 的解决方案。
所以首先我更喜欢在新的布局文件（文件名：user_cart_with_badge.xml）中执行此操作，我会将其包含在工具栏中。
所以在这个文件中，我将定义我想要使用它的图标，以及将用作徽章的文本。
这个文件的内容：
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/layoutforprofileimage"
android:layout_
android:layout_>
<ImageButton
android:id="@+id/btnOpenCart"
android:layout_
android:layout_
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="?android:attr/selectableItemBackground"
android:gravity="end"
app:srcCompat="@drawable/ic_menu_shooping_cart"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/text"
android:layout_
android:layout_
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="16dp"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="8dp"
android:adjustViewBounds="true"
android:gravity="center"
android:minHeight="17sp"
android:minWidth="17sp"
android:padding="3dp"
android:paddingBottom="1dp"
android:paddingLeft="4dp"
android:paddingRight="4dp"
android:scaleType="fitStart"
android:text="3"
android:textColor="#ffffff"
android:textSize="12sp"
android:visibility="visible"
android:background="@drawable/badge_background"
app:layout_constraintBottom_toBottomOf="@+id/btnOpenCart"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="@+id/btnOpenCart"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
现在，我们还应该为 TextView 徽章定义背景。在您的可绘制文件夹中创建新文件，我将其命名为“badge_background.xml”。我认为在这个link 上你可以看到更多关于这个背景的形状，如果你不喜欢我的。
这个文件的内容：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<corners android:radius="2dp" />
<solid
android:color="#ff4848"/>
<padding
android:bottom="6dp"
android:left="6dp"
android:right="6dp"
android:top="6dp" />
</shape>
最后，您现在需要的只是将 user_cart_with_badge.xml 布局的内容包含到您需要带有徽章的自定义图像的文件/布局中。假设您在工具栏中需要它。
<android.support.v7.widget.Toolbar
android:id="@+id/toolbarMeat"
android:layout_
android:layout_
android:background="?attr/colorPrimary"
app:theme="@style/AppTheme.Toolbar"
android:gravity="end">
<include
android:id="@+id/cardContainerForSettingsData"
layout="@layout/user_cart_with_badge"
android:layout_
android:layout_
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/user_info_section" />
</android.support.v7.widget.Toolbar>
希望，这将有助于多年后阅读本文的人。
【讨论】：
【参考方案3】：可以这样操作
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/layoutforprofileimage"
android:layout_
android:layout_>
<ImageView
android:id="@+id/image"
android:layout_
android:padding="2dp"
android:src="@drawable/image"
android:layout_
android:layout_margin="6dp"/>
<TextView
android:id="@+id/text"
android:layout_
android:layout_
android:scaleType="fitStart"
android:layout_marginRight="0dp"
android:padding="2dp"
android:background="@drawable/button_pressed"
android:gravity="center"
android:minWidth="17sp"
android:adjustViewBounds="true"
android:minHeight="17sp"
android:paddingBottom="1dp"
android:paddingLeft="4dp"
android:paddingRight="4dp"
android:text="0"
android:textColor="#ffffffff"
android:textSize="12sp"
android:visibility="visible"
android:layout_gravity="center_horizontal"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
/>
</RelativeLayout>
【讨论】：
这是什么？您能简要介绍一下吗？我必须在哪里进行更改？ 我所做的是将文本视图与相对布局的顶部边缘对齐，并添加了一个带边距的图像视图，因此文本视图看起来像一个徽章视图。 是的，这可以实现。但这会导致图像视图尺寸变小。我想要它在相对布局的角落。【参考方案4】：试试这个方法获取BadgeCounter
public class BadgeDrawable extends Drawable
private float mTextSize;
private Paint mBadgePaint;
private Paint mBadgePaint1;
private Paint mTextPaint;
private Rect mTxtRect = new Rect();
private String mCount = "";
private boolean mWillDraw = false;
public BadgeDrawable(Context context)
mTextSize = context.getResources().getDimension(R.dimen.badge_text_size);
mBadgePaint = new Paint();
mBadgePaint.setColor(Color.RED);
mBadgePaint.setAntiAlias(true);
mBadgePaint.setStyle(Paint.Style.FILL);
mBadgePaint1 = new Paint();
mBadgePaint1.setColor(Color.parseColor("#EEEEEE"));
mBadgePaint1.setAntiAlias(true);
mBadgePaint1.setStyle(Paint.Style.FILL);
mTextPaint = new Paint();
mTextPaint.setColor(Color.WHITE);
mTextPaint.setTypeface(Typeface.DEFAULT);
mTextPaint.setTextSize(mTextSize);
mTextPaint.setAntiAlias(true);
mTextPaint.setTextAlign(Paint.Align.CENTER);
@Override
public void draw(Canvas canvas)
if (!mWillDraw)
return;
Rect bounds = getBounds();
float width = bounds.right - bounds.left;
float height = bounds.bottom - bounds.top;
// Position the badge in the top-right quadrant of the icon.
/*Using Math.max rather than Math.min */
float radius = ((Math.max(width, height) / 2)) / 2;
float centerX = (width - radius - 1) +10;
float centerY = radius -5;
if(mCount.length() <= 2)
// Draw badge circle.
canvas.drawCircle(centerX, centerY, radius+9, mBadgePaint1);
canvas.drawCircle(centerX, centerY, radius+7, mBadgePaint);
else
canvas.drawCircle(centerX, centerY, radius+10, mBadgePaint1);
canvas.drawCircle(centerX, centerY, radius+8, mBadgePaint);
// Draw badge count text inside the circle.
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);
/*
Sets the count (i.e notifications) to display.
*/
public void setCount(String count)
mCount = count;
// Only draw a badge if there are notifications.
mWillDraw = !count.equalsIgnoreCase("0");
invalidateSelf();
@Override
public void setAlpha(int alpha)
// do nothing
@Override
public void setColorFilter(ColorFilter cf)
// do nothing
@Override
public int getOpacity()
return PixelFormat.UNKNOWN;
或者，如果您想在应用图标上添加徽章，请尝试使用 ShortcutBadger
【讨论】：
这是用于操作栏中的图标。我不确定我可以在布局上使用它。 你能告诉我怎么做吗？我无法得到它。小sn-por的东西 我想要类似我在问题中附加的松弛屏幕截图。 ShortcutBadger 用于主屏幕应用程序图标上的通知。我猜！ Snippet 不是用勺子喂的，伙计【参考方案5】：我可能很晚才发布这个，但我被困在这个问题上并找到了一个非常简单的解决方案，但是使用右对齐和上对齐是我发现的最简单的方法。希望这对某些人有所帮助。
<RelativeLayout
android:layout_
android:layout_>
<ImageView
android:id="@+id/opened"
android:layout_
android:layout_
android:background="@drawable/opened"
android:layout_centerInParent="true"
android:layout_marginTop="@dimen/_10sdp"
/>
<TextView
android:id="@+id/notsopened"
android:layout_alignRight="@+id/opened"
android:layout_alignTop="@+id/opened"
android:background="@drawable/notification_iconmain"
android:layout_
android:layout_ />
</RelativeLayout>
【讨论】：
【参考方案6】：有库可用于设置徽章github.com/jgilfelt/android-viewbadger 下载并添加到您的应用程序中。
并使用以下代码。
BadgeView homeimageviewbadge = new BadgeView(this,here add your layout);
homeimageviewbadge.setTextSize(12);
homeimageviewbadge.setTextColor(Color.parseColor("#ffffff"));
homeimageviewbadge.setBadgeBackgroundColor(Color.parseColor("#ff0000"));
homeimageviewbadge.setBadgePosition(BadgeView.POSITION_TOP_RIGHT);
homeimageviewbadge.settext("10");
homeimageviewbadge.show();
【讨论】：
这也会在右上角给我徽章。 @young_08 请像 homeimageviewbadge.setBadgeMargin(5, 0); 一样设置边距； 并设置布局的填充，如 imageview.setPadding(0, 0, 10, 0); 但我必须为此在徽章内添加一个数字或文本。正确的 ？但我想要简单的红点。 不要设置文本添加徽章背景颜色，如 setBadgeBackgroundColor(Color.RED);以上是关于如何在布局的角落有徽章图标的主要内容，如果未能解决你的问题，请参考以下文章