CircleView
![收藏,GitHub 同步 Star](https://i-blog.csdnimg.cn/blog_migrate/7d0234f6040bfebfea82f8d6092495f1.png)
Circle Demo for me
可以将图片圆形显示的 View,实现方式很简单,做这个控件就是为了可以直接方便的显示圆形图片,在显示的时候,提供了更多的选择,比如下面讲到的偏移显示。
使用方法
在build.gradle
文件中加上这句:
compile 'com.github.youngkaaa:circleview:0.1.0'
使用方法很简单就是在布局文件中声明它就行了,比如这样:
<com.example.youngkaaa.ycircleview.CircleView
android:layout_width="230dp"
android:layout_height="230dp"
app:imgSrc="@drawable/jay_jay"/>
其中imgSrc
属性就是给该控件设置图片资源,然后显示出来就是下面这样:
该控件会自动把你的图片的宽度(或者高度,这个要看长度和宽度哪个小,就以那个为准,这个下面讲)缩小为控件的宽度(或者高度)一样,这样做是为了保证图片的最大化显示,而不会出现当控件变小时,显示的只是图片的很小一部分这种情况!上面的图应该可以看出来。
然后,我换了张图片来测试上面的图片最大化显示,然后就出现了下面这样的情况:
我去,这什么鬼呀?我伦正脸呢?我要看他帅气的正脸啊,唉呀好尴尬。。
然后,我加了两个属性,解决了,毕竟我还是想看我伦正脸的啊!!!
- leftPadding : 类似于 Android 中的
paddingLeft
属性(为了区别开),该属性含义下面讲 - topPadding: 类比上面的
然后上面那两个属性的含义看下面这张图:
上面图画出了两种常见的情况,第一种就是图片宽度大于高度,此时你可以设置leftPadding
来将Circle
往右移动,注意此时你不能设置topPadding
的,因为此时图片的高度已经缩放为和Circle
的高度一样了,没办法往下padding
了,此时如果你失误设置了topPadding
,这时就会抛出一个IllegalArgumentException
,内容为you can't set topPadding when img's width>height
而当你设置leftPadding
过大时,以至于显示的Circle
边缘超过了图片右边缘,此时同样会抛出一个IllegalArgumentException
,内容为:leftPadding is too large
。 而上面图中第二种情况就是高度大于宽度,和上面的同理可以类比。 由上图我们也可以看出来,Circle
的宽度(因为是正圆,所以高度宽度一样大)要不就是和图片的宽度一样,或者Circle
的高度和图片的高度一样。这样就是内部缩放图片的结果。所以leftPadding
和topPadding
两者同时只能使用一个!
然后看一下我们给其中一个CircleView
设置leftPadding
属性,让我伦的正脸显示出来,部分布局代码如下:
<com.example.youngkaaa.ycircleview.CircleView
android:layout_width="230dp"
android:layout_height="230dp"
app:leftPadding="160dp"
app:imgSrc="@drawable/jay_jay"/>
然后运行图如下:
看吧,我伦的正脸可以看到了吧。
继续更新
这次加入旋转功能,即有时候你会遇到当你使用圆形显示了图片后由于原图片中有些场景是倾斜的,导致显示出来的圆形中的图案不是很端正的,你就想着可不可以旋转一下显示。这次加入rotation
属性。 使用方法很简单,就像下面这样:
<com.example.youngkaaa.ycircleview.CircleView
android:layout_width="230dp"
android:layout_height="230dp"
app:rotation="180"
app:imgSrc="@drawable/jay_back"/>
即旋转 180 度(方向默认为顺时针),然后可以了,该属性可以搭配上面的leftPadding
和topPadding
属性一起使用,即可以同时偏移并且旋转。 下面贴一张效果图:
然而在我调试完成这个属性后,我发现系统中原本就自带了该属性:android:rotation
,哎呀丢死个人。。
下一步
- 压缩图片,避免多个大图时 OOM
- 会加入通过 url 来加载网络图片
- 支持 gif 播放