提交 30708d78 编写于 作者: C chaychan

更新readme

上级 292bcf6b
# PowerfulViewLibrary
###PowerfulEditText(功能强大的EditText)介绍
### PowerfulEditText(功能强大的EditText)介绍
[https://github.com/chaychan/PowerfulViewLibrary/blob/master/readmes/PowerfulEditText.md](https://github.com/chaychan/PowerfulViewLibrary/blob/master/readmes/PowerfulEditText.md)
###NumberRunningTextView(仿支付宝数字滚动的TextView)介绍
### NumberRunningTextView(仿支付宝数字滚动的TextView)介绍
[https://github.com/chaychan/PowerfulViewLibrary/blob/master/readmes/NumRunningTextView.md](https://github.com/chaychan/PowerfulViewLibrary/blob/master/readmes/NumRunningTextView.md)
###ExpandableLinearLayout(可展开收起的LinearLayout)介绍
### ExpandableLinearLayout(可展开收起的LinearLayout)介绍
[https://github.com/chaychan/PowerfulViewLibrary/blob/master/readmes/ExpandableLinearLayout.md](https://github.com/chaychan/PowerfulViewLibrary/blob/master/readmes/ExpandableLinearLayout.md)
###BottomBarLayout(轻量级底部导航栏)介绍
### BottomBarLayout(轻量级底部导航栏)介绍
[https://github.com/chaychan/PowerfulViewLibrary/blob/master/readmes/BottomBarLayout.md](https://github.com/chaychan/PowerfulViewLibrary/blob/master/readmes/BottomBarLayout.md)
####**导入方式**####
#### **导入方式**
在项目根目录下的build.gradle中的allprojects{}中,添加jitpack仓库地址,如下:
allprojects {
......
###轻量级的底部导航栏
### 轻量级的底部导航栏
  目前市场上的App,几乎都有底部页签导航栏,所以我们在开发的时候经常需要用到这个,虽然github上有不少已经封装好的底部导航栏的工具,例如bottombar,alphaIndicator(仿微信滑动渐变底部控件)等,但是这些控件由于功能太多,而且也没有给予详细的介绍文档,所以用起来不是特别容易,有时候我们仅仅只是想要一个简简单单的底部导航,但是又不想去自己在布局中搞一个个LinearLayout或者RadioGroup,然后切换页签的时候更换图标,让ViewPager跳转到对应的页面等一系列繁琐的操作,这时候,你可以使用BottomBarLayout,简简单单就可以实现以下效果:
![](./introduce_img/bbl/display1.gif)
###BottomBarLayout的使用
### BottomBarLayout的使用
####布局文件中配置
#### 布局文件中配置
在xml文件中,配置BottomBarLayout,包裹子条目BottomBarItem
......@@ -94,7 +94,7 @@
</LinearLayout>
####BottomBarItem属性介绍
#### BottomBarItem属性介绍
<!--默认状态下的图标-->
<attr name="iconNormal" format="reference"/>
......@@ -111,7 +111,7 @@
<!--文字和图标的顶部距离-->
<attr name="itemMarginTop" format="dimension"/>
####java文件中设置
#### java文件中设置
找过对应的ViewPager和BottomBarLayout,为ViewPager设置Adapter,然后为BottomBarLayout设置ViewPager
......@@ -120,7 +120,7 @@
这样就实现底部导航栏功能了
####开启滑动效果
#### 开启滑动效果
页签之间的切换默认关闭了滑动效果,如果需要开启可以通过调用BottomBarLayout的setSmoothScroll()方法:
......@@ -130,7 +130,7 @@
![](./introduce_img/bbl/display2.gif)
####设置条目选中的监听
#### 设置条目选中的监听
mBottomBarLayout.setOnItemSelectedListener(new BottomBarLayout.OnItemSelectedListener() {
@Override
......@@ -139,7 +139,7 @@
}
});
####BottomBarItem的介绍
#### BottomBarItem的介绍
&emsp;&emsp;BottomBarItem继承于LinearLayout,其子View有显示图标的ImageView和展示文字的TextView,分别可以通过getImageView()和getTextView()方法获取到对应的子控件。github上不少底部导航栏的控件都没能获取到对应的子控件,所以在需要对子控件进行操作的时候极不方便,有一些的思路并不是用ImageView和TextView,而是用绘制的,所以也不能获取到对应的显示图标的控件或展示文字的控件,造成无法获取到该控件,无法进行一些业务上的操作,比如类似今日头条的底部的首页,点击首页的页签,会更换成加载中的图标,执行旋转动画,BottomBarLayout可以轻松地做到这个需求。
演示效果如下:
......@@ -201,7 +201,7 @@
}
}
####实现思路:
#### 实现思路:
1.当点击页签加载的时候,BottomBarItem通过调用setIconSelectedResourceId()设置成选中状态下的图标资源id为加载中图标的资源id,完成图标的更换操作;
......
##ExpandableLinearLayout介绍
###场景介绍
## ExpandableLinearLayout介绍
### 场景介绍
&emsp;&emsp;开发的过程中,有时我们需要使用到这样一个功能,在展示一些商品的时候,默认只显示前几个,例如先显示前三个,这样子不会一进入页面就被商品列表占据了大部分,可以先让用户可以看到页面的大概,当用户需要查看更多的商品时,点击“展开”,就可以看到被隐藏的商品,点击“收起”,则又回到一开始的状态,只显示前几个,其他的收起来了。就拿美团外卖的订单详情页的布局作为例子,请看以下图片:
![](./introduce_img/ell/meituan1.jpg)
......@@ -8,8 +8,8 @@
&emsp;&emsp;订单详情页面一开始只显示购买的前三样菜,当点击“点击展开”时,则将购买的所有外卖都展示出来,当点击“点击收起”时,则将除了前三样菜以外的都隐藏起来。其实要完成这样的功能并不难,为了方便自己和大家以后的开发,我将其封装成一个控件,取名为ExpandableLinearLayout,下面开始介绍它如何使用以及源码解析。
##使用方式
###一、使用默认展开和收起的底部
## 使用方式
### 一、使用默认展开和收起的底部
在布局文件中,使用ExpandableLinearLayout,代码如下:
<com.chaychan.viewlib.ExpandableLinearLayout
......@@ -83,14 +83,14 @@
![](./introduce_img/ell/ell_1.gif)
####1.支持修改默认显示的个数
#### 1.支持修改默认显示的个数
可以修改默认显示的个数,比如将其修改为3,即defaultItemCount="3"
效果如下:
![](./introduce_img/ell/ell_2.gif)
####2.支持修改待展开和待收起状态下的文字提示
#### 2.支持修改待展开和待收起状态下的文字提示
可以修改待展开状态和待收起状态下的文字提示,比如修改expandText="查看更多",hideText="收起更多"
效果如下:
......@@ -98,7 +98,7 @@
![](./introduce_img/ell/ell_3.gif)
####3.支持修改提示文字的大小、颜色
#### 3.支持修改提示文字的大小、颜色
可以修改提示文字的大小和颜色,对应的属性分别是tipTextSize,tipTextColor。比如修改tipTextSize="16sp",tipTextColor="#ff7300"
......@@ -107,14 +107,14 @@
![](./introduce_img/ell/ell_tip_text_demo.gif)
####4.支持更换箭头的图标
#### 4.支持更换箭头的图标
可以修改箭头的图标,只需配置arrowDownImg属性,引用对应的图标,这里的箭头图标需要是向下的箭头,这样当展开和收起时,箭头会做相应的旋转动画。设置arrowDownImg="@mipmap/arrow\_down\_grey",修改为灰色的向下图标。
效果如下:
![](./introduce_img/ell/ell_4.gif)
###二、使用自定义底部
### 二、使用自定义底部
布局文件中,ExpandableLinearLayout配置useDefaultBottom="false",声明不使用默认底部。自己定义底部的布局。
......
###NumberRunningTextView介绍
### NumberRunningTextView介绍
&emsp;&emsp;NumberRunningTextView是一个自带数字滚动动画的TextView,通过使用setContent(String str)方法,传入相应的金额数字字符串(如"1354.00"),或者数字的字符串(如200),当页面初始化完成的时候,就可以看到数字滚动的效果,和支付宝中进入余额宝界面,显示余额滚动的效果类似,具体的效果如下:
![](./introduce_img/running_tv_1.gif)
###使用
### 使用
在布局文件中,使用NumberRunningTextView,代码如下:
演示金额滚动的NumberRunningTextView
......@@ -40,12 +40,12 @@
tvNum.setContent("200");
####关闭金额的自动格式化(每三位数字添加一个逗号)
#### 关闭金额的自动格式化(每三位数字添加一个逗号)
&emsp;&emsp;上图所示,最后显示的金额数字经过了处理,每三位添加一个逗号,这使得数字看起来比较好看,金额默认是使用这种格式,如果不想要这种格式的数字,可以在布局文件中,NumberRunningTextView的配置中,将useCommaFormat设置为false,这样最终的数字就不会是带有逗号了,效果如下:
![](./introduce_img/running_tv_2.gif)
####关闭执行动画的时机
#### 关闭执行动画的时机
&emsp;&emsp;当一开始进入界面的时候,初始化数据完毕,NumberRunningTextView设置数据完毕,会自动执行数字滚动的动画,如果进行刷新操作,从服务器获取新的数据,重新设置数据,NumberRunningTextView会自动判断传入的内容是否有变化,如果没有变化,则不会再次滚动,这和支付宝的余额宝界面中的金额类似,当在余额宝界面下拉刷新时,金额没有变化,数字不会再次滚动,而当提现后重新回到该界面,金额发生变化后,就会再次滚动,效果如下:
![](./introduce_img/running_tv_3.gif)
......@@ -82,7 +82,7 @@ SwipeRefreshLayout的刷新回调中,只做了这样的处理,NumberRunningT
![](./introduce_img/running_tv_5.gif)
####可以修改数字滚动动画执行的时间
#### 可以修改数字滚动动画执行的时间
如果不设置动画执行的周期,则会使用默认的动画执行周期,如下所示都是使用默认动画执行时间
......@@ -149,7 +149,7 @@ SwipeRefreshLayout的刷新回调中,只做了这样的处理,NumberRunningT
&emsp;&emsp;在使用的过程中,就可以通过改变动画执行的周期来控制数字滚动的速度了,只需在布局文件中,配置duration属性,注意这里是以毫秒(ms)为单位。
####可以修改数字最少要达到的某个值才会滚动
#### 可以修改数字最少要达到的某个值才会滚动
&emsp;&emsp;这个功能弥补之前空间的一个缺陷,就是在数字很小的时候,比如金额的数字为0.01,整型数字为1,那么动画执行的结果让人感觉起来有点卡顿的感觉,如下所示:
......
###PowerfulEditText介绍###
####1.自带清除文本功能 ####
### PowerfulEditText介绍###
#### 1.自带清除文本功能 ####
&emsp;&emsp;PowerfulEditText自带清除文本功能,只需在布局文件该View属性中添加funcType,指定为canClear,就可以自带清除文本功能,使用如下:
<?xml version="1.0" encoding="utf-8"?>
......@@ -34,7 +34,7 @@
####2.自带密码输入框切换明文密文格式的功能 ####
#### 2.自带密码输入框切换明文密文格式的功能 ####
&emsp;&emsp;PowerfulEditText自带密码输入框切换明文密文格式的功能,目前大多数App密码输入栏一般支持密码明文、密文的显示,如果需要用到该功能,可以将funcType中指定为canWatchPwd,就可以轻松使用这种功能,使用如下:
......@@ -65,7 +65,7 @@
这样开启查看密码的图标就更换了,如果还需要更换关闭密码查看的图标,可以指定eyeClose,引用对应的图标。
####3.设置drawableLeft和drawableRight图片大小的功能 ####
#### 3.设置drawableLeft和drawableRight图片大小的功能 ####
&emsp;&emsp;原生的EditText并不能在属性中指定drawableLeft或drawableRight图片的大小,所以一般开发的过程中,一些程序员会采用简单粗暴的方法,直接引用一张宽高都很小的图片。但是在不同屏幕分辨率下,兼容性就不是很好,比如在一些屏幕分辨率较高的手机上运行,图标会显得模糊。PowerfulEditText可以指定drawableLeft和drawableRight图片的宽高大小,可以指定为多少个dp,这样在开发的时候,可以在各个分辨率图片文件夹中放入不同尺寸的图标,通过设定图片的宽高属性来限制显示的大小,下面演示一下:
<com.chaychan.viewlib.PowerfulEditText
......@@ -98,8 +98,8 @@
可以看到左侧的图标变小了,同样也可以设置右侧图片的宽高,对应的属性是rightDrawableWidth、rightDrawableHeight。
####右侧图标点击事件####
#### 右侧图标点击事件####
PowerfulEditText同样支持右侧图片的点击事件,如果funcType指定为canClear,则默认点击是清除文本。如果需要进行一些额外的操作,则可以设置回调,比如搜索输入框,右侧是一个搜索的按钮,需要为其设置点击事件的回调。
布局文件:
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册