前言
写过了很多自定义控件的文章，但一直没时间整合。正好趁着五一好好梳理了一下，舍弃了三天假期，给大家开源了一个 Mei控件库，希望大家能够喜欢。
引入
Step 1. Add the JitPack repository to your build file
root gradle
allprojects {
repositories {
...
maven { url "https://jitpack.io" }
}
}
Step 2. Add the dependency
app gradle
dependencies {
implementation 'com.github.HpWens:MeiWidgetView:v0.0.7'
}
Preview
mei_main
文字路径
<com.meis.widget.MeiTextPathView
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
属性
<declare-styleable name="MeiTextPathView">
<!-- 路径文字 -->
<attr name="text" format="string"/>
<!-- 路径文字大小 -->
<attr name="textSize" format="dimension"/>
<!-- 路径文字颜色 -->
<attr name="textColor" format="color"/>
<!-- 路径绘制时长 -->
<attr name="duration" format="integer"/>
<!-- 文字的描边宽度 -->
<attr name="strokeWidth" format="dimension"/>
<!-- 是否循环绘制 -->
<attr name="cycle" format="boolean"/>
<!-- 是否自动开始播放 -->
<attr name="autoStart" format="boolean"/>
</declare-styleable>
1、弹跳小球
bounce
<com.meis.widget.ball.BounceBallView
android:layout_width="match_parent"
android:layout_height="wrap_content">
属性
- bounce_count :小球弹跳次数
- ball_color:小球颜色
- ball_count:小球数量
- ball_radius:小球半径
- ball_delay:小球出现时间间隔（当小球数大于1时）
- anim_duration:小球一次动画时长
- physic_mode : 开启物理效果（下落加速上升减速）
- random_color: 开启小球颜色随机
- random_radius: 开启小球大小随机（在基础大小上下浮动）
- random_path: 开启小球路径随机（在基础路径坐标上下浮动）
2、扩散圆（主题切换）
ripple
<com.meis.widget.MeiRippleView
android:layout_width="match_parent"
android:layout_height="wrap_content" />
方法
/**
* @param startX 被点击view相对屏幕的 view中心点x坐标
* @param startY 被点击view相对屏幕的 view中心点y坐标
* @param startRadius 开始扩散的半径
*/
public void startRipple(int startX, int startY, int startRadius)
3、酷炫的路径
line_path
<com.meis.widget.MeiLinePathView
android:layout_width="match_parent"
android:layout_height="wrap_content" />
4、滚动视差
parallax
<com.meis.widget.MeiScrollParallaxView
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
属性
<declare-styleable name="MeiScrollParallaxView">
<!-- 滚动速率 （0~1） 值越大滚动视差越明显 -->
<attr name="parallaxRate" format="float"/>
<!-- 滑动是否显示视差 默认 true -->
<attr name="enableParallax" format="boolean"/>
<!-- 圆角宽度 默认 0 若通过修改父类来实现 则不需要设置此值-->
<attr name="roundWidth" format="dimension"/>
<!-- 是否显示圆形 默认 0 若通过修改父类来实现 则不需要设置此值-->
<attr name="enableCircle" format="boolean"></attr>
<!--圆角外的颜色 默认白色 若通过修改父类来实现 则不需要设置此值-->
<attr name="outRoundColor" format="color"/>
</declare-styleable>
5、直播间送爱心
heart
<com.meis.widget.heart.MeiHeartView
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
属性
<declare-styleable name="MeiHeartView">
<!--爱心动画时长-->
<attr name="heartDuration" format="integer"/>
<!--是否显示透明度动画-->
<attr name="heartEnableAlpha" format="boolean"/>
<!--是否显示缩放动画-->
<attr name="heartEnableScale" format="boolean"/>
</declare-styleable>
6、selector 控件集
效果图：
selector.gif
通过 xml 布局的方式替换掉 selector 文件。这么做的优势在于，减少 apk 体积，避免后期维护大量的 selector 文件，扩展性更强，功能更加强大。
1、特性
- 支持圆角（四个角度，圆角半径是高度的一半）
- 支持背景Pressed，Disabled，Selected，Checked四种状态
- 支持描边（虚线，四种状态）
- 支持文本（四种状态）
- 支持涟漪（水波纹）
- leftDrawable，topDrawable，rightDrawable，bottomDrawable（四种状态）
2、支持原生控件
- RadiusTextView
- RadiusCheckBox
- RadiusEditText
- RadiusFrameLayout
- RadiusLinearLayout
- RadiusRelativeLayout
3、扩展
委托的扩展方式（Delegate），参考的是（AppCompatActivity实现方式），具体请参考（RadiusTextView）
图片加载过慢请点击 Mei控件库
7、仿百度浏览器图片拖拽控件
效果图
drag
参考代码 xml布局文件
//PhotoDragRelativeLayout 委托的方式 易扩展
<com.meis.widget.photodrag.PhotoDragRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/pdr_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
app:navigationIcon="@mipmap/ic_arrow_back_white_24dp"
app:title="仿百度浏览器图片拖拽控件"
app:titleTextColor="#FFF" />
<me.relex.photodraweeview.PhotoDraweeView
android:id="@+id/pdv_photo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/toolbar"
android:src="@mipmap/ic_mei_ripple" />
</com.meis.widget.photodrag.PhotoDragRelativeLayout>
代码
mPdrLayout.setDragListener(new PhotoDragHelper().setOnDragListener(new PhotoDragHelper.OnDragListener() {
@Override
public void onAlpha(float alpha) {
mPdrLayout.setAlpha(alpha);
}
@Override
public View getDragView() {
return mPdvView;
}
@Override
public void onAnimationEnd(boolean mSlop) {
if (mSlop) {
finish();
overridePendingTransition(0, 0);
}
}
}));
8、MEI-仿头条小视频拖拽控件
video_drag
1、xml布局
<com.meis.widget.photodrag.VideoDragRelativeLayout
...
android:layout_width="match_parent"
android:layout_height="match_parent"/>
2、属性
<declare-styleable name="VideoDragRelativeLayout">
<!--默认的动画时长-->
<attr name="video_drag_duration" format="integer" />
<!-- true 执行转场动画 false执行自带动画-->
<attr name="video_drag_transition" format="boolean" />
</declare-styleable>
VideoDragRelativeLayout 继承 RelativeLayout 默认拦截并消费事件 , 若子控件想消费事件请在 xml 布局文件中设置子控件 android:tag="dispatch"
3、相关方法
mDragVideoLayout.setOnVideoDragListener(new VideoDragRelativeLayout.OnVideoDragListener() {
@Override
public void onStartDrag() {
//开始拖拽 隐藏非拖拽控件
}
@Override
public void onRelease(boolean dismiss) {
//释放 注意这里以触摸移动高度 / 父控件高度 的比例 小于 0.1 dismiss=false 则恢复动画 大于 0.1 dismiss=true
//dismiss=false 显示隐藏的控件
if (dismiss) {
//可以直接 finish 掉，但也可以通过转场动画返回上一个页面
finish();
}
}
});
Contact
QQ群：478720016
Mei控件库会一直更新下去，同时也希望大家有好的控件，炫酷动画推荐。
非常感谢
以及其他富有创造力，开源的大牛。
网友评论