那些年实现的炫酷自定义控件库

2018-05-01 本文已影响394人文淑

前言

写过了很多自定义控件的文章，但一直没时间整合。正好趁着五一好好梳理了一下，舍弃了三天假期，给大家开源了一个 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控件库会一直更新下去，同时也希望大家有好的控件，炫酷动画推荐。

非常感谢

鸿洋

郭霖

启航

以及其他富有创造力，开源的大牛。