Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Carbs0126/AvatarImageView
an AvatarImageView on Android platform which can display circle text or circle image
https://github.com/Carbs0126/AvatarImageView
Last synced: about 24 hours ago
JSON representation
an AvatarImageView on Android platform which can display circle text or circle image
- Host: GitHub
- URL: https://github.com/Carbs0126/AvatarImageView
- Owner: Carbs0126
- Created: 2016-05-29T14:02:47.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-06-27T02:16:53.000Z (almost 6 years ago)
- Last Synced: 2024-02-29T02:33:44.470Z (4 months ago)
- Language: Java
- Size: 1.03 MB
- Stars: 473
- Watchers: 18
- Forks: 86
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Lists
- awesome-github-android-ui - AvatarImageView - 电话本联系人头像 (图片)
- awesome-github-android-ui - AvatarImageView - 电话本联系人头像 (图片)
README
# AvatarImageView
[](http://android-arsenal.com/details/1/3820)
* [English](#english)
# 前言：
在做电话本或者其他应用时，显示联系人头像的策略一般是这样的：先判断是否有头像图片，如果有，则直接显示图片；如果没有，则显示联系人的名字的第一个字，将这个文字作为头像，并添加背景颜色。如果设置的文字的长度大于1，则具有clip效果，即超出圆形的部分将被clip掉。
## 截图：
![hint2][2]
![hint3][3]
![hint5][5]
## 添加至工程
```groovy
compile 'cn.carbs.android:AvatarImageView:1.0.4'
```
## 主要功能：
1. 显示圆形图像；
2. 显示圆形文字；
3. 文字大小与圆形半径的比例可以调整；
4. 可以添加圆形边框；
5. 图片、文字的显示始终是居中的；其中图片的居中规则是：如果图片宽大于高，那么截取以高为正方形的中间部分。如果图片高大于宽，那么截取以宽为正方形的中间部分；
6. 由于是继承于ImageView，且在onDraw()时去掉了super.onDraw()，并覆写了设置drawable的函数，因此可以直接将此view赋值给类似Glide等第三方的库，使其直接加载图片，且图片为圆形（不需要做调整）;
7. 支持padding；
8. 多个文字显示具有clip效果
9. 可以自定义clip放大比例，使用maskratio来调节文字放大的比例
## 版本更新：
### 1.0.4
1. 去掉rx库
### 1.0.3
1. 添加显示圆角矩形的SquareAvatarImageView，可以设置圆角的半径
### 1.0.2
1. 添加多个文字的clip效果
## 注意事项：
暂时不支持wrap_content模式
## 圆形图像显示原理：
使用shader + matrix的方式显示圆形图片，其中圆形是有shader产生的，而居中的调整方式是由matrix设置的。
## 使用方法：
(1)设置图片或者文字的方法：
```java
AvatarImageView aiv = (AvatarImageView) this.findViewById(R.id.aiv);
//设置图像：
aiv.setImageResource(R.drawable.id_014);
//或者：
aiv.setDrawable(drawable);
//或者：
aiv.setBitmap(bitmap);
//或者：
aiv.setImageDrawable(drawable);
//设置文字：
aiv.setTextAndColor("安", AvatarImageView.COLORS[0]);//直接设置颜色，如果设置的文字为多个字符，则会具有clip效果，单个字符没有clip效果
//或者：
aiv.setTextAndColorSeed("安","安卓");//“安卓”字样作为产生backgroundcolor的seed
```
(2)与Glide的结合：
```java
Glide
.with(activity)
.load(picurl)
.centerCrop()
.crossFade()
.into(aiv);
```
## 添加至工程
1.添加依赖
```groovy
compile 'cn.carbs.android:AvatarImageView:1.0.3'
```
2.layout文件中添加此view
```xml
//文字大小与原型直径大小的比例
```
## 感谢
#### [CircleImageView][4]
---------------------
# English
## Abstract
AvatarImageView on Android platform can display circle text or circle image
## Screenshot
![load local image resources][2]
![load local image resources][3]
## Main features:
1. show circle image(including bitmap and drawable);
2. show circle text(can generate a colorful background for text);
3. the textsize can be modified according to the ratio of AvatarImageView's width;
4. can add a circle boarder for text or image, and the boarder can be adjusted in stroke width or color;
5. the image or text is aways in the center; the rule is : if the image's width is larger than height, then get the center square of the image, with the same length side of image's width. vice versa.
6. since AvatarImageView extends from ImageView, and remove super.onDraw(), and override setImageResoure() setImageDrawable(), then we can use Glide or other famouse Loading Image Libary to load image into AvatarImageView conveniently.
7. surpport padding;
8. have clip effect if the text's length > 1
9. can set the clip effect's amplify ratio by setting mask ratio
## Attention
not support wrap_content pattern temporarily
## How to use it:
(1)How to set image or text
```java
AvatarImageView aiv = (AvatarImageView) this.findViewById(R.id.aiv);
//set image：
aiv.setImageResource(R.drawable.id_014);
//or：
aiv.setDrawable(drawable);
//or：
aiv.setBitmap(bitmap);
//or：
aiv.setImageDrawable(drawable);
//set text:
aiv.setTextAndColor("Android", AvatarImageView.COLORS[0]);//set backgroundcolor directly, if the text's length > 1, will have clip effect
//or
aiv.setTextAndColorSeed("Android","Android platform");//"Android platform" as the backgroundcolor seed
```
(2)use with Glide:
```java
Glide
.with(activity)
.load(picurl)
.centerCrop()
.crossFade()
.into(aiv);
```
## add to your project
1.add dependence
```groovy
compile 'cn.carbs.android:AvatarImageView:1.0.4'
```
2.add into xml layout file
```xml
//equals textsize divides circle diameter
```
## Thanks
#### [CircleImageView][4]
## License
Copyright 2016 Carbs.Wang (AvatarImageView)
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
[2]: https://github.com/Carbs0126/Screenshot/blob/master/avatar_image_view_3_in_1.jpg
[3]: https://github.com/Carbs0126/Screenshot/blob/master/avatar_image_view_2_in_1.jpg
[4]: https://github.com/hdodenhof/CircleImageView
[5]: https://github.com/Carbs0126/Screenshot/blob/master/SquareAvatarImageView.png