Android自定义控件三部曲文章索引

Android自定义控件三部曲文章索引

    <div class="article_manage clearfix">
    <div class="article_l">
        <span class="link_categories">
        标签：
          <a href="http://www.csdn.net/tag/%e8%87%aa%e5%ae%9a%e4%b9%89%e6%8e%a7%e4%bb%b6" target="_blank" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_tag']);">自定义控件</a>
        </span>
    </div>
    <div class="article_r">
        <span class="link_postdate">2017-04-20 11:27</span>
        <span class="link_view" title="阅读次数">249人阅读</span>
        <span class="link_comments" title="评论次数"> <a href="#comments" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_pinglun'])">评论</a>(0)</span>
        <span class="link_collect tracking-ad" data-mod="popu_171"> <a href="javascript:void(0);" onclick="javascript:collectArticle('Android%e8%87%aa%e5%ae%9a%e4%b9%89%e6%8e%a7%e4%bb%b6%e4%b8%89%e9%83%a8%e6%9b%b2%e6%96%87%e7%ab%a0%e7%b4%a2%e5%bc%95','70256085');return false;" title="收藏" target="_blank">收藏</a></span>
         <span class="link_report"> <a href="#report" onclick="javascript:report(70256085,2);return false;" title="举报">举报</a></span>

    </div>
</div>    <style type="text/css">        
        .embody{
            padding:10px 10px 10px;
            margin:0 -20px;
            border-bottom:solid 1px #ededed;                
        }
        .embody_b{
            margin:0 ;
            padding:10px 0;
        }
        .embody .embody_t,.embody .embody_c{
            display: inline-block;
            margin-right:10px;
        }
        .embody_t{
            font-size: 12px;
            color:#999;
        }
        .embody_c{
            font-size: 12px;
        }
        .embody_c img,.embody_c em{
            display: inline-block;
            vertical-align: middle;               
        }
         .embody_c img{               
            width:30px;
            height:30px;
        }
        .embody_c em{
            margin: 0 20px 0 10px;
            color:#333;
            font-style: normal;
        }
</style>
<script type="text/javascript">
    $(function () {
        try
        {
            var lib = eval("("+$("#lib").attr("value")+")");
            var html = "";
            if (lib.err == 0) {
                $.each(lib.data, function (i) {
                    var obj = lib.data[i];
                    //html += '<img src="' + obj.logo + '"/>' + obj.name + "&nbsp;&nbsp;";
                    html += ' <a href="' + obj.url + '" target="_blank">';
                    html += ' <img src="' + obj.logo + '">';
                    html += ' <em><b>' + obj.name + '</b></em>';
                    html += ' </a>';
                });
                if (html != "") {
                    setTimeout(function () {
                        $("#lib").html(html);                      
                        $("#embody").show();
                    }, 100);
                }
            }      
        } catch (err)
        { }

    });
</script>
  <div class="category clearfix">
    <div class="category_l">
       <img src="http://static.blog.csdn.net/images/category_icon.jpg">
        <span>分类：</span>
    </div>
    <div class="category_r">
                <label onclick="GetCategoryArticles('1411703','wk843620202','top','70256085');">
                    <span onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_fenlei']);">android<em>（39）</em></span>
                  <img class="arrow-down" src="http://static.blog.csdn.net/images/arrow_triangle _down.jpg" style="display:inline;">
                  <img class="arrow-up" src="http://static.blog.csdn.net/images/arrow_triangle_up.jpg" style="display:none;">
                    <div class="subItem">
                        <div class="subItem_t"><a href="http://blog.csdn.net/wk843620202/article/category/1411703" target="_blank">作者同类文章</a><i class="J_close">X</i></div>
                        <ul class="subItem_l" id="top_1411703">                            
                        </ul>
                    </div>
                </label>                    
    </div>
</div>

目录(?)[+]

1. 一自定义控件三部曲之动画篇
2. 二自定义控件三部曲之绘图篇
3. 三自定义控件三部曲之视图篇

转载：http://blog.csdn.net/harvic880925/article/details/50995268

前言：在我从C++转到Android时，就被Android里炫彩斑斓的自定义控件深深折服，想知道如果想利用C++实现这些功能，那是相当困难的。从那时候起，我就想，等我学会了自定义控件，一定要写一篇系列出来，方便后来者能更系统完善地掌握它。今天，这个系列就这样默默地诞生了，希望它能够完成它的使命，在你读完这系列博客时，发现定自义控件也不过如此！如果，顺便能给个评论，加个关注，我将不胜感激——启舰

一、自定义控件三部曲之动画篇

1、《自定义控件三部曲之动画篇（一）——alpha、scale、translate、rotate、set的xml属性及用法》
2、《自定义控件三部曲之动画篇（二）——Interpolator插值器》
3、《自定义控件三部曲之动画篇（三）—— 代码生成alpha、scale、translate、rotate、set及插值器动画》
4、《自定义控件三部曲之动画篇(四)——ValueAnimator基本使用》

• 初识ValueAnimator:ofInt,ofFloat以及监听器用法
  

5、《自定义控件三部曲之动画篇(五)——ValueAnimator高级进阶（一）》

• 这一节非常重要，讲解了插值器与Evaluator的使用与如何自定义知识
• 这节中有如何做到背景色渐变的特效

6、《自定义控件三部曲之动画篇(六)——ValueAnimator高级进阶（二）》

• 这节着重讲解了ValueAnimator的ofObject函数用法
• 可以看到自定义弹性圆的伸缩特效
• 如何给A-Z字母变化添加上插值器效果

7、《自定义控件三部曲之动画篇(七)——ObjectAnimator基本使用》

• 这节讲了ObjectAnimator的用法及如何利用ObjectAnimator来实现前几节的效果

8、《自定义控件三部曲之动画篇(八)——PropertyValuesHolder与Keyframe》

• 这节主要讲了如何自定义关键帧的知识
• 使用关键帧实现电话振铃效果

9、《自定义控件三部曲之动画篇(九)——联合动画的代码实现》

• 这节讲解了如何实现组合动画的知识包括顺序播放、同时播放和自由定义顺序播放以及动画监听器相关的知识

10、《自定义控件三部曲之动画篇(十)——联合动画的XML实现与使用示例》

• 利用XML来实现组合动画的知识
• 实现了路径菜单动画

11、《 自定义控件三部曲之动画篇(十一)——layoutAnimation与gridLayoutAnimation》

• 讲解了容器类中控件的进入动画的实现方式

12、《自定义控件三部曲之动画篇(十二)——animateLayoutChanges与LayoutTransition》

• 自定义容器类中控件进入、退出等相关动画的实现方式

13、《自定义控件三部曲之动画篇(十三)——实现ListView Item进入动画》

• 讲解了一个实例：如何实现listview中各个item进场时的动画

在动画篇中，从一到十篇是必须要掌握的，11-13篇不是必须掌握的，有个印象就行

二、自定义控件三部曲之绘图篇

1、《自定义控件三部曲之绘图篇（一）：概述及基本几何图形绘制》
2、《自定义控件三部曲之绘图篇（二）：路径及文字》
3、《自定义控件三部曲之绘图篇（三）：区域（Range）》
4、《自定义控件三部曲之绘图篇（四）：canvas变换与操作》
5、《自定义控件三部曲之绘图篇（ 五）：drawText()详解》
6、《 自定义控件三部曲之绘图篇（六）——Path之贝赛尔曲线和手势轨迹、水波纹效果》

• 本篇将讲述手势轨迹捕捉、波浪纹效果实现的几种方法

7、《 自定义控件三部曲之绘图篇(七)——Paint之函数大汇总》

• 本篇将讲述路径的各种效果，比如铁锈路径、自定义图形路径、虚线路径等

8、《自定义控件三部曲之绘图篇（八）——Paint之ColorMatrix与滤镜效果》

• 本篇将讲述各种滤镜效果的实现方法：包括黑白滤镜、反古滤镜、色彩增强滤镜、色彩替换等

9、《自定义控件三部曲之绘图篇（九）——Paint之setColorFilter》

• 按钮点击时，动态加深图片色彩（简易方法）
• 可以学到针对不同主题动态设置不同色彩图片的方法(setTint())

10、《自定义控件三部曲之绘图篇（十）——Paint之setXfermode(一)》

• 硬件加速的原理与禁用方法
• 选区颜色替换、溶合图片、反向选区颜色替换

11、《自定义控件三部曲之绘图篇（十一）——Paint之setXfermode(二)》

• 书架中书本选中灯光效果
• Twiter标识中空效果实现
• 图片圆角实现
• 图片倒影实现
• 橡皮擦效果实现
• 刮刮卡效果实现

12、《自定义控件三部曲之绘图篇（十二）——Paint之setXfermode(三)》

• 区域波纹动画效果
• 心电图动画
• 不规则波纹
• 刷刷卡、图片倒影等另种实现方式

13、《自定义控件三部曲之绘图篇（十三）——Canvas与图层(一)》

• 这篇文章中没有任何特效，但这是绘图篇中非常重要的一篇，对于理解Canvas绘图起着重要作用

14、《自定义控件三部曲之绘图篇（十四）——Canvas与图层（二）》

• 上一篇的续篇，讲解了save、saveLayer、saveLayerAlpha中所使用的FLAG的具体意义

15、《自定义控件三部曲之绘图篇（十五）——QQ红点拖动删除效果实现（基本原理篇）》

• 对以往知识点进行总结复习，涉及有Canvas绘图、SaveLayer图层、贝赛尔曲线、手势监听和逐帧动画等
• 初步实现了QQ红点拖动效果

16、《自定义控件三部曲之绘图篇（十六）——给控件添加阴影效果与发光效果》

• 传统地给按钮添加阴影的方法
• 如何给已有控件添加阴影
• 如何给控件添加发光效果

17、《自定义控件三部曲之绘图篇（十七）——为Bitmap添加阴影并封装控件》

• 如何给图片添加阴影
• 如何自定义控件属性
• 控件如何自测量
• 如何最终封装成控件

18、《自定义控件三部曲之绘图篇（十八）——BitmapShader与望远镜效果》

• 实现望远镜效果
• 封装不规则头像控件

19、《自定义控件三部曲之绘图篇(十九)——LinearGradient与闪动文字效果》

• 讲解了LinearGradient的意义
• 实现了闪动文字效果控件

20、《自定义控件三部曲之绘图篇(二十)——RadialGradient与水波纹按钮效果》

• 讲解了RradialGradient知识
• 实现了按钮水波纹效果

三、自定义控件三部曲之视图篇

1、《自定义控件三部曲视图篇（一）——测量与布局》

• 讲解onMeasure、onLayout的区别与用法
• 讲解margin的计算方法

2、《自定义控件三部曲视图篇（二）——FlowLayout自适应容器实现》

• 实现了自适应的派生自ViewGroup的容器FlowLayout

3、《自定义控件三部曲视图篇（三）——瀑布流容器WaterFallLayout实现》

• 讲解了自定义LayoutParams并使用的方法
• 能够了解派生自ViewGroup的控件如何定义与使用的方法

这个系列还在继续，记得持续关注哦

document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)

    <div id="digg" articleid="70256085">
        <dl id="btnDigg" class="digg digg_enable" onclick="btndigga();">

             <dt>顶</dt>
            <dd>1</dd>
        </dl>


        <dl id="btnBury" class="digg digg_enable" onclick="btnburya();">

              <dt>踩</dt>
            <dd>0</dd>               
        </dl>

    </div>
 <div class="tracking-ad" data-mod="popu_222"><a href="javascript:void(0);" target="_blank">&nbsp;</a>   </div>
<div class="tracking-ad" data-mod="popu_223"> <a href="javascript:void(0);" target="_blank">&nbsp;</a></div>
<script type="text/javascript">
    function btndigga() {
        $(".tracking-ad[data-mod='popu_222'] a").click();
    }
    function btnburya() {
        $(".tracking-ad[data-mod='popu_223'] a").click();
    }
        </script>

•