Question

如何在工具栏中放置圆形图像？

我可以用本地方式

    toolbar = (Toolbar)findViewById(R.id.toolbarConversa);
    toolbar.setLogo(imageDrawable);
    toolbar.setTitle(title);
    setSupportActionBar(toolbar);

XML here

<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbarPrincipal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
<de.hdodenhof.circleimageview.CircleImageView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/imageListaConversaToolbar"
    android:padding="5dp"
    android:layout_width="10mm"
    android:layout_height="10mm"
    android:layout_gravity="left"
    app:srcCompat="@android:drawable/sym_def_app_icon" />

Answer 1

您可以在xml中使用特定库来执行此功能。

你的班级

toolbar = (Toolbar)findViewById(R.id.toolbarConversa);
//do not need this
//toolbar.setLogo(imageDrawable);
toolbar.setTitle(title);
setSupportActionBar(toolbar);

//Get the image from toolbar XML
View hView =  toolbar.getRootView();
ImageView imageCicle = hView.findViewById(R.id.myImageontoolbar);
imageUsuarioLateral.setImageDrawable(imageCicle);

您的XML

<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbarPrincipal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
<de.hdodenhof.circleimageview.CircleImageView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/myImageontoolbar"
    android:padding="5dp"
    android:layout_width="10mm"
    android:layout_height="10mm"
    android:layout_gravity="left"
    app:srcCompat="@android:drawable/sym_def_app_icon" />

你的Gradle

compile 'de.hdodenhof:circleimageview:2.1.0'

Answer 2

您只需使用Picasso库设置圆形图像视图：

CircleImageView imageView = (CircleImageView) findViewById(R.id.image);

Picasso.with(getApplicationContext()).load(imageUrl).into(imageView);

别忘了在build.gradle中添加依赖：

compile 'com.squareup.picasso:picasso:2.4.0'

Answer 3

我也在寻找答案，我想在像 whatsapp 这样的工具栏中显示圆形用户头像，但我想要一个非常优雅且可重用的解决方案，我不想在所有布局的工具栏中放置一个 CircularImageview我想要这个，并找到了更好的解决方案。

工具栏的作者可以提供一些像 logoCornderRadius 这样的属性，但他们没有，所以我们将通过创建一个不提供此答案中的属性的自定义工具栏来完成繁重的工作，但这真的很容易。

所以我查看了工具栏的源代码，找到了解决方案或破解了您所说的任何内容，但我认为这很好

Toolbar 是 Viewgroup 的子项，因此当您默认向其中添加内容时，它会将其放在标题的右侧，我们只需要更改该默认设置并将其放在标题之前。

并且您可能知道在视图组中放置视图是由 onLayout() 方法决定的，因此我们可以利用这一点，我们可以扩展到工具栏覆盖 onLayout() 方法并重新布局我们以编程方式添加的 CircularImageView，但有一个价格，因为第一次您的 CirularImageView 将处于默认位置，而您再次将其置于不同位置的看跌期权，但我们需要支付该价格如果我们想调用 super.layout() 以正确定位其他视图，但我们没有膨胀任何子视图并且没有将某些内容转换为位图（如下所述），因此这种交易是可以接受的。

我们根本无法触摸 logo 属性，因为它是私有的并且是方形的 ImageView，尽管您可以将图像文件或 png 等转换为圆形位图，然后将其变为圆形 {{1}然后你可以使用 here 中描述的 BitmapDrawble 方法（类似于工具栏）但它看起来更复杂，而且逻辑没有封装你可能会在活动或片段膨胀他们的代码中做它，你必须处理很多情况，例如您是从网络获取徽标，还是从文件或 png 然后相应地转换为位图，所以这是我的解决方案

完全可重复使用的解决方案

setLogo()

为这个自定义工具栏提供你自己的属性，比如 class AvatarToolbar(context: Context, attributeSet: AttributeSet) : Toolbar(context, attributeSet) { interface OnAvatarClickListener { fun onAvatarClick() // give listener to your rounded imageview } var avatarClickListener: OnAvatarClickListener? = null fun addAvatar(resId: Int) { //you can overload this to take string provide and can use glide to load images from the network , also you can give an attribute for that and use binding adapter to load from network if you use databinding val avatarImageView = RoundedImageView(context) avatarImageView.layoutParams = Toolbar.LayoutParams(80, 80) // hardcoding but you can provide an attribute that you can use in xml avatarImageView.cornerRadius = 150f // same for that avatarImageView.setImageResource(resId) avatarImageView.setOnClickListener { avatarClickListener?.onAvatarClick() } addView(avatarImageView, 0) } override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) { super.onLayout(changed, l, t, r, b) val titleView = getChildAt(1) // you can setup click listener on title also , nice right?, in that can provide an interface for that too like i provided for avatar click val avatarView = getChildAt(0) // your circular imageview avatarView.layout( titleView.left - avatarView.width, // put it before the title 0, // top of your imagview is top of toolbar titleView.left - 10, // left is start to title and some space , again you can give xml attribute for that height // bottom is also the bottom of toolbar ) } ，avatarCornerRadius 等，并且只在工具栏中封装了获取和设置图像，活动不需要知道工具栏是如何做到的，而不是在此处提供该代码，否则答案会很长，但欢迎您在评论中提问

工具栏上的圆形ImageView

3 个答案: