Question

我需要在移动设备中常见的通知风格中构建一个有点动态的图标/图像。我必须澄清，主要显示器将在桌面上。图像将位于某些文本之前例如

一些文字

这包括两个图像：望远镜和齿轮加上一个动态的数字。

我对css几乎全新，所以我正在努力如何相对于望远镜放置齿轮以及如何根据数量来缩放齿轮（例如，如果数量为10000，则齿轮需要大于如果是3）。

当然整个组合也需要适应屏幕大小。如何以一种优雅的方式解决这个问题？

我的HTML看起来像

<div class="sidebar-item active">
            <a href="#">
                <img class="lab-image"/>
                <span class="sidebar-item-title">Labs</span>
            </a>
</div>

但是现在我的实验室图像只是望远镜图像。

Answer 1

您要找的是带有自定义背景图片的徽章所以，基于this，我创造了这个小提琴

$(document).ready(function(){
var cw = $('.inner-badge').width();
$('.inner-badge').css({'height':cw+'px'});
})

body {
  margin: 25px
}
.outter-badge {
  position: relative;
  margin: 10px;
  background: #fff;
  width: 64px;
}
.inner-badge {
  display: table;
  position: absolute;
  top: -15px;
  right: -25px;
  background-image: url('https://openclipart.org/image/2400px/svg_to_png/174149/fancy-badge.png');
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}
.inner-badge p{
  display: table-cell;
    vertical-align: middle;
padding: 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outter-badge"> 
  <img src="http://www.iconarchive.com/download/i88396/icons8/ios7/Industry-Microscope.ico" alt="" height="64">
  <div class="inner-badge">
    <p>1000</p>
  </div>
</div>

Answer 2

NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder(intent);
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    notificationBuilder.setSmallIcon(intent.getResources().getIdentifier(appIcon + "_transparent", "drawable", intent.getPackageName()));
}else{
    notificationBuilder.setSmallIcon(intent.getResources().getIdentifier(appIcon, "drawable", intent.getPackageName()));
}
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    Bitmap icon = BitmapFactory.decodeResource(intent.getResources(), intent.getResources().getIdentifier(appIcon, "drawable", intent.getPackageName()));
    notificationBuilder.setLargeIcon(icon);
}
notificationBuilder.setContentTitle(title)
        .setStyle(new NotificationCompat.BigTextStyle().bigText(message))
        .setContentText(message)
        .setSound(defaultSoundUri)
        .setPriority(NotificationCompat.PRIORITY_HIGH)
        .setVisibility(NotificationCompat.VISIBILITY_PUBLIC)
        .setAutoCancel(true)
        .setContentIntent(pendingIntent);

如何实施图标/图片

2 个答案: