CircleView

Project Url: youngkaaa/CircleView
Introduction: 轻量级显示圆形,支持更多属性
More: Author   ReportBugs   
Tags:

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属性就是给该控件设置图片资源,然后显示出来就是下面这样:

你也可以通过 setImgSrc()方法在代码中来设置图片资源

该控件会自动把你的图片的宽度(或者高度,这个要看长度和宽度哪个小,就以那个为准,这个下面讲)缩小为控件的宽度(或者高度)一样,这样做是为了保证图片的最大化显示,而不会出现当控件变小时,显示的只是图片的很小一部分这种情况!上面的图应该可以看出来。

然后,我换了张图片来测试上面的图片最大化显示,然后就出现了下面这样的情况:

我去,这什么鬼呀?我伦正脸呢?我要看他帅气的正脸啊,唉呀好尴尬。。

然后,我加了两个属性,解决了,毕竟我还是想看我伦正脸的啊!!!

  • 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的高度和图片的高度一样。这样就是内部缩放图片的结果。所以leftPaddingtopPadding两者同时只能使用一个!

然后看一下我们给其中一个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 度(方向默认为顺时针),然后可以了,该属性可以搭配上面的leftPaddingtopPadding属性一起使用,即可以同时偏移并且旋转。 下面贴一张效果图:

然而在我调试完成这个属性后,我发现系统中原本就自带了该属性:android:rotation,哎呀丢死个人。。

Apps
About Me
GitHub: Trinea
Facebook: Dev Tools