avatar-view

项目地址: avatar-view
简介:Avatar ImageView with user's name first letter Drawable placeholder

Download Build Status

Avatar View library was implemented based on Matt Precious's Don’t Fear the Canvas lecture. I decided to create this library in order to achieve an ImageView which can smoothly display user's profile image or his username/name initial letter (in the case when the image was not provided).

Please take a look at the examples below:

Simple library presentationExampleActivity & BindingsExample
FirstExampleSecondExample

Usage

This library can be used in two ways: using standard Android methods and using Android Data Binding.

Standard:

Step 1

Add gradle dependency:

dependencies {
    compile 'agency.tango.android:avatar-view:{latest_release}'

    //if you want to use Picasso for loading images
    compile 'agency.tango.android:avatar-view-picasso:{latest_release}'
}
Step 2

Add to your xml layout file:

<agency.tango.android.avatarview.views.AvatarView
    android:layout_width="100dp"
    android:layout_height="100dp"
    app:av_border_color="@android:color/white"
    app:av_border_width="4dp"
    app:av_text_size_percentage="35" />
Step 3

Add to your activity:

    AvatarView avatarView;
    IImageLoader imageLoader;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        avatarView = (AvatarView) findViewById(R.id.avatar_view_example);

        imageLoader = new PicassoLoader();
        imageLoader.loadImage(avatarView, "http:/example.com/user/someUserAvatar.png", "User Name");
    }

If you want to use a different library than Picasso for loading images you have to create a loader which extendsImageLoaderBase class. Basically, you have to override one method. Take a look how I have done it inPicassoLoader available in the avatar-view-picasso module.

ImageLoaderBase has two constructors: one with no parameters and second one where you can pass Stringplaceholder in order to change the default "-". You can also set it directly in AvatarPlaceholder constructor. More info about AvatarPlaceholder here.

Data Binding:

Step 1

Add gradle dependency:

dependencies {
    compile 'agency.tango.android:avatar-view:{latest_release}'
    compile 'agency.tango.android:avatar-view-bindings:{latest_release}'

    //if you want to use Picasso for loading images
    compile 'agency.tango.android:avatar-view-picasso:{latest_release}'
}
Step 2

I will show how to edit your xml file based on User class. Let's see:

<data>
    <variable
        name="user"
        type="User" />
</data>

<agency.tango.android.avatarview.views.AvatarView
    android:layout_width="100dp"
    android:layout_height="100dp"
    bind:av_border_color="@android:color/white"
    bind:av_border_width="6dp"
    bind:av_text_size_percentage="40"
    bind:avatarUrl="@{user.avatarUrl}"
    bind:name="@{user.name}" />
Step 3

Add to your activity:

private ExampleActivityBinding binding;

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    binding = DataBindingUtil.setContentView(this, R.layout.example_activity, new ExampleDataComponent());
    binding.setUser(new User("User Name", "http:/example.com/user/someUserAvatar.png"));
}

private static class ExampleDataComponent implements DataBindingComponent {
    public AvatarViewBindings getAvatarViewBindings() {
        return new AvatarViewBindings(new PicassoLoader());
    }
}

Take a look at AvatarViewBindings class where BindingsAdapter is configured (bind:avatarUrl andbind:name for usage in XML). In order to correctly use AvatarViewBindings you have to create class extendingDataBindingComponent and pass it as a third parameter in DataBindingUtil.setContentView() method. This is obligatory because AvatarViewBindings takes an IImageLoader parameter in it's constructor. You can find more information about this topic in Deep dive into Android Data Binding talk.

I have explained PicassoLoader issue in step 3 in Standard Method part.

AvatarPlaceholder

AvatarPlaceholder is a Drawable which is set as a AvatarView background when the image hasn't been loaded yet. It is a letter on a one-color background (just like in ex. Google, Youtube avatars). Default placeholder String(displayed when the username is null or empty) is "-". TextSizePercentage value sets how big part of the view is taken by the text. Default textSizePercentage is 33. You can change those values by passing another ones inAvatarPlaceholder constructor or not directly by using IImageLoader class methods/constructors.

Additional information
  • Avatar background color is calculated using hashCode() method called on a given name String.
  • Default border width is 2dp and default border color is white.
  • Placeholder letters are currently always white (in future user will be able to choose a different color).
  • It is recommended to set your default placeholder String as short as possible (the best would be one letter).
Feel free to create issues and pull requests!
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值