精华内容
下载资源
问答
  • Android自定义控件三部曲文章索引

    万次阅读 多人点赞 2016-11-25 17:39:06
    前言:在我从C++转到Android时,就被Android里炫彩斑斓的自定义控件深深折服,想知道如果想利用C++实现这些功能,那是相当困难的。从那时候起,我就想,等我学会了自定义控件,一定要写一篇系列出来,方便后来者能更...

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

     

    我的新书《Android自定义控件入门与实战》出版啦:https://blog.csdn.net/harvic880925/article/details/81455073

     

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

    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的控件如何定义与使用的方法

    4、《自定义控件三部曲视图篇(四)——RecyclerView系列之一简单使用》

    • 讲解了RecyclerView的基本使用方法,为下篇深入讲解做准备

    5、《自定义控件三部曲视图篇(五)——RecyclerView系列之二ItemDecoration》

    • 讲解了ItemDecoration与Item的关系
    • ItemDecoration的用法
    • 自定义ItemDecoration与蒙版效果

    6、《自定义控件三部曲视图篇(六)——RecyclerView系列之三自定义LayoutManager》

    • 讲解了自定义LayoutManager的方法
    • 讲解了如何初始化Item布局,如何实现Item的滚动

    7、《自定义控件三部曲视图篇(七)——RecyclerView系列之四实现回收复用》

    • 讲解了RecyclerView的回收复用原理
    • 讲解了为自定义LayoutManager添加回收复用的实现方法

    8、《自定义控件三部曲视图篇(八)——RecyclerView系统之五回收复用实现方式二》

    • 讲解了另一种实现回收复用的方法
    • 实现了针对每个Item布局,同时在布局后更改每个Item的属性的方法

    9、《自定义控件三部曲视图篇(九)——RecycerView系列之六实现滚动画廊控件》

    • 实现2D画廊
    • 实现fling校正的方法
    • 实现3D画廊的方法

     

    如果你喜欢我的文章,你可能更喜欢我的公众号

    启舰杂谈

     

     

     

    展开全文
  • layui-laydate时间日历控件详细示例

    万次阅读 多人点赞 2018-05-23 17:18:53
    控件可使用layui或者独立版的layDate,两者初始化有些不同 在 layui 模块中使用layui.code <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>la...

    layui下载地址:http://www.layui.com/

    此控件可使用layui或者独立版的layDate,两者初始化有些不同

     

    
     

    在 layui 模块中使用layui.code

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>layDate快速使用</title>
    6. <link rel="stylesheet" href="/static/build/layui.css" media="all">
    7. </head>
    8. <body>
    9.  
    10. <div class="layui-inline"> <!-- 注意:这一层元素并不是必须的 -->
    11. <input type="text" class="layui-input" id="test1">
    12. </div>
    13.  
    14. <script src="/static/build/layui.js"></script>
    15. <script>
    16. layui.use('laydate', function(){
    17. var laydate = layui.laydate;
    18.  
    19. //执行一个laydate实例
    20. laydate.render({
    21. elem: '#test1' //指定元素
    22. });
    23. });
    24. </script>
    25. </body>
    26. </html>
    27.  
    
     

    作为独立组件使用layui.code

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>使用 layDate 独立版</title>
    6. </head>
    7. <body>
    8.  
    9. <input type="text" id="test1">
    10.  
    11. <script src="laydate.js"></script>
    12. <script>
    13. //执行一个laydate实例
    14. laydate.render({
    15. elem: '#test1' //指定元素
    16. });
    17. </script>
    18. </body>
    19. </html>

     

    详细配置和事件触发,注释写的很清楚了

    laydate.render({ 
      elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等(类型:String/DOM,默认值:无必填项,用于绑定执行日期渲染的元素,值一般为选择器,或DOM对象)
      ,type: 'year'//year-只提供年列表选择||month-只提供年、月选择||date-可选择:年、月、日。type默认值,一般可不填||time-只提供时、分、秒选择||datetime-可选择:年、月、日、时、分、秒
      ,range: true //或 range: '~' 来自定义分割字符
      ,format: 'yyyy年MM月dd日' //可任意组合 yyyy年MM月dd日 HH时mm分ss秒===2017年08月18日 20时08分08秒,'yyyy/mm/dd'
      ,value: '2018-08-18' //必须遵循format参数设定的格式String,默认值:new Date()
      ,min: '2017-1-1'//min/max - 最小/大范围内的日期时间值 类型:string,默认值:min: '1900-1-1'、max: '2099-12-31'
      ,max: '2017-12-31'
      ,trigger: 'click' // 自定义弹出控件的事件(类型:String,默认值:focus,如果绑定的元素非输入框,则默认事件为:click)-采用click弹出
      ,show: true //默认显示-类型:Boolean,默认值:false;;;;如果设置: true,则控件默认显示在绑定元素的区域。通常用于外部事件调用控件
      ,position: 'static'//类型:String,默认值:absolute  (fixed,absolute,static)
      ,zIndex: 99999999//层叠顺序-类型:Number,默认值:66666666一般用于解决与其它元素的互相被遮掩的问题。如果 position 参数设为 static 时,该参数无效
      ,showBottom: false//是否显示底部栏--类型:Boolean,默认值:true如果设置 false,将不会显示控件的底部栏区域
      ,btns: ['clear', 'now', 'confirm']//类型:Array,默认值:['clear', 'now', 'confirm'](显示清空,今天,确认)
      ,lang: 'en'//语言类型:String,默认值:cn--内置了两种语言版本:cn(中文版)、en(国际版,即英文版)
      ,theme: 'grid'//主题-类型:String,默认值:default,theme的可选值有:default(默认简约)、molv(墨绿背景)、#颜色值(自定义颜色背景)、grid(格子主题)
      ,calendar: true//是否显示公历节日--类型:Boolean,默认值:false
      ,mark: {//标注重要日子--类型:Object,默认值:无
        '0-10-14': '生日'
        ,'0-12-31': '跨年' //每年12月31日
        ,'0-0-10': '工资' //每个月10号
        ,'2017-8-15': '' //具体日期
        ,'2017-8-20': '预发' //如果为空字符,则默认显示数字+徽章
        ,'2017-8-21': '发布'
      }
      ,ready: function(date){//控件在打开时触发,回调返回一个参数
        console.log(date); //得到初始的日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
      }
      ,change: function(value, date, endDate){//日期时间被切换后的回调
        console.log(value); //得到日期生成的值,如:2017-08-18
        console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
        console.log(endDate); //得结束的日期时间对象,开启范围选择(range: true)才会返回。对象成员同上。
      }
      ,done: function(value, date, endDate){//控件选择完毕后的回调---点击日期、清空、现在、确定均会触发。
        console.log(value); //得到日期生成的值,如:2017-08-18
        console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
        console.log(endDate); //得结束的日期时间对象,开启范围选择(range: true)才会返回。对象成员同上。
      }
    });

    ---------------------------------------------分割线---------------------------------------------------------

    ps:评论有人问range问题,是这样用的:

    layui.use('laydate', function(){
    				var laydate = layui.laydate;
    			//执行一个laydate实例
    				laydate.render({
    					elem: '#test1', //指定元素
    					range:'~',
    					value: '2019-04-16 ~ 2019-04-19'
    				});
    			});

    设置默认值时value 的值不是用数组,是要用跟input中展示的格式一样,这样点击input会自动显示默认区间范围

    range也可以写成 range:true ,这样分隔符默认为 ‘-’ ,也就是2019-04-16 - 2019-04-19

     

    展开全文
  • C#自定义控件

    千次下载 热门讨论 2013-01-22 23:17:46
    C#自定义控件
  • C#控件大全

    千次下载 热门讨论 2014-01-14 15:47:56
    1、数据显示控件 2、数据绑定和数据定位控件 3、文本编辑控件 4、信息显示控件 5、网页显示控件 6、从列表中选择控件 7、图形显示控件 8、图形存储控件 9、值的设置控件 10、数据的设置控件 11、对话框控件 12、菜单...
  • Android 获取控件的宽和高

    万次阅读 多人点赞 2012-08-07 16:24:22
    我们都知道在 onCreate() 里面获取控件的高度是 0,这是为什么呢?我们来看一下示例: 首先我们自己写一个控件,这个控件非常简单: public class MyImageView extends ImageView { public MyImageView(Context...


    我们都知道在 onCreate() 里面获取控件的高度是 0,这是为什么呢?我们来看一下示例:

    首先我们自己写一个控件,这个控件非常简单:

    public class MyImageView extends ImageView {
    
        public MyImageView(Context context, AttributeSet attrs) {
            super(context, attrs);
        }
        public MyImageView(Context context) {
            super(context);
        }
        
        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
            System.out.println("onMeasure 我被调用了"+System.currentTimeMillis());
        }
        
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            System.out.println("onDraw 我被调用了"+System.currentTimeMillis());
        }
    
    }

    布局文件:

    <com.test.MyImageView
        android:id="@+id/imageview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/test" />

    测试的 Activity 的 onCreate():

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);        
        System.out.println("执行完毕.."+System.currentTimeMillis());
    }

    现在我们现在来看一下结果:

     

    说明等 onCreate 方法执行完了,我们定义的控件才会被度量 (measure),所以我们在 onCreate 方法里面通过 view.getHeight() 获取控件的高度或者宽度肯定是 0,因为它自己还没有被度量,也就是说他自己都不知道自己有多高,而你这时候去获取它的尺寸,肯定是不行的。

     

    现在碰到这个问题我们不能不解决,我们可以通过下面三种方式来获取宽高:

    //------------------------------------------------方法一
    int w = View.MeasureSpec.makeMeasureSpec(0,View.MeasureSpec.UNSPECIFIED);
    int h = View.MeasureSpec.makeMeasureSpec(0,View.MeasureSpec.UNSPECIFIED);
    imageView.measure(w, h);
    int height =imageView.getMeasuredHeight();
    int width =imageView.getMeasuredWidth();
    textView.append("\n"+height+","+width);
    
    
    //-----------------------------------------------方法二
    ViewTreeObserver vto = imageView.getViewTreeObserver();
    vto.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
        public boolean onPreDraw() {
            int height = imageView.getMeasuredHeight();
            int width = imageView.getMeasuredWidth();
            textView.append("\n"+height+","+width);
            return true;
        }
    });
    
    
    //-----------------------------------------------方法三   
    ViewTreeObserver vto2 = imageView.getViewTreeObserver();  
    vto2.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
        @Override  
        public void onGlobalLayout() {
            imageView.getViewTreeObserver().removeGlobalOnLayoutListener(this);  
            textView.append("\n\n"+imageView.getHeight()+","+imageView.getWidth());
        }  
    });  
    
    


    现在要讨论的是当我们需要时候使用哪个方法呢?

    现在把测试的 Activity 改成如下:

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        final ImageView imageView = (ImageView) findViewById(R.id.imageview);      
        
        //------------------------------------------------方法一
        int w = View.MeasureSpec.makeMeasureSpec(0,View.MeasureSpec.UNSPECIFIED);
        int h = View.MeasureSpec.makeMeasureSpec(0,View.MeasureSpec.UNSPECIFIED);
        imageView.measure(w, h);
        int height =imageView.getMeasuredHeight();
        int width =imageView.getMeasuredWidth();
        textView.append("\n"+height+","+width);
        
        System.out.println("执行完毕.."+System.currentTimeMillis());
    }

    程序控制台输出的结果:


     

    接着来看上面几种方式输出结果,把测试 Activity 改成如下:

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        final ImageView imageView = (ImageView) findViewById(R.id.imageview);
        //-----------------------------------------------方法二
        ViewTreeObserver vto = imageView.getViewTreeObserver();
        vto.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
            public boolean onPreDraw() {
                int height = imageView.getMeasuredHeight();
                int width = imageView.getMeasuredWidth();
                textView.append("\n"+height+","+width);
                return true;
            }
        });
    }


    控制台输出结果如下:


    方法三就不再测试了同方法二。那么方法而和方法三在执行上有什么区别呢?

    我们在布局文件中加入一个 TextView 来记录这个控件的宽高。

    <ScrollView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
    
        <TextView
            android:id="@+id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </ScrollView>

     

    先来测试方法二:

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        final ImageView imageView = (ImageView) findViewById(R.id.imageview);
        //-----------------------------------------------方法二
        ViewTreeObserver vto = imageView.getViewTreeObserver();
        vto.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
            public boolean onPreDraw() {
                int height = imageView.getMeasuredHeight();
                int width = imageView.getMeasuredWidth();
                textView.append("\n"+height+","+width);
                return true;
            }
        });
    }

    程序控制台输出结果如下:

     


    我们再来测试方法三:

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        final ImageView imageView = (ImageView) findViewById(R.id.imageview);
        //-----------------------------------------------方法三   
        ViewTreeObserver vto2 = imageView.getViewTreeObserver();  
        vto2.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
            @Override  
            public void onGlobalLayout() {
                imageView.getViewTreeObserver().removeGlobalOnLayoutListener(this);  
                textView.append("\n\n"+imageView.getHeight()+","+imageView.getWidth());
            }  
        });  
    }


    控制台输出结果如下:


    我想这 方法二 和 方法三 之间的区别就不用说了吧。

    总结:那么需要获取控件的宽高该用那个方法呢?

    方法一:比其他的两个方法多了一次计算,也就是多调用了一次 onMeasure() 方法,该方法虽然看上去简单,但是如果要目标控件计算耗时比较大的话(如ListView等),不建议使用。

    方法二:它的回调方法会调用很多次,并且滑动 TextView 的时候任然会调用,所以不建议使用。

    方法三:比较合适。

    当然,实际应用的时候需要根据实际情况而定。

    展开全文
  • Android自定义的下拉列表框控件

    万次阅读 2017-10-20 13:49:40
    Android中的有个原生的下拉列表控件Spinner,但是这个控件有时候不符合我们自己的要求, 比如有时候我们需要类似windows 或者web网页中常见的那种下拉列表控件,类似下图这样的: 这个时候只有自己动手...

    一、概述

    Android中的有个原生的下拉列表控件Spinner,但是这个控件有时候不符合我们自己的要求,

    比如有时候我们需要类似windows 或者web网页中常见的那种下拉列表控件,类似下图这样的:

     

     

     

    这个时候只有自己动手写一个了。其实实现起来不算很难,

    本文实现的方案是采用TextView +ImageView+PopupWindow的组合方案。

    先来看看我们的自己写的控件效果图吧:(源码在文章下面最后给出哈!)

     

    二、自定义下拉列表框控件的实现

    1. 自定义控件用到的布局文件和资源:

    结果框的布局页面:dropdownlist_view.xml:


     

    复制代码
    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:id="@+id/compound"
        android:background="@drawable/dropdown_bg_selector" >
        
        <TextView
            android:id="@+id/text"
            android:layout_width="250dp"
            android:layout_height="40dp"
            android:paddingLeft="10dp"
            android:text="文本文字"
            android:gravity="center_vertical"
            android:textSize="14sp"
            android:padding="5dp"
            android:singleLine="true" />
        <ImageView 
            android:id="@+id/btn"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_toRightOf="@+id/text"
            android:src="@drawable/dropdown"
            android:padding="5dp"
            android:layout_centerVertical="true"
            android:gravity="center"/>
    </RelativeLayout>
    复制代码

     

    下拉弹窗列表布局页面:dropdownlist_popupwindow.xml:

    复制代码
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >
        
        <ListView
            android:id="@+id/listView"
            android:layout_width="280dp"
            android:layout_height="wrap_content"
            android:divider="#666666"
            android:dividerHeight="1dp"
             ></ListView>
    
    </LinearLayout>
    复制代码

    selector资源文件:

    dropdown_list_selector.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_pressed="true" android:drawable="@color/dropdownlist_item_press"/>
        <item android:drawable="@color/dropdownlist_item"/>
    </selector>

    dropdown_bg_selector.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_pressed="true" android:drawable="@color/dropdownlist_press"/>
        <item android:drawable="@color/dropdownlist_bg"/>
    </selector>

     

    复制代码
    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:id="@+id/compound"
        android:background="@drawable/dropdown_bg_selector" >
        
        <TextView
            android:id="@+id/text"
            android:layout_width="250dp"
            android:layout_height="40dp"
            android:paddingLeft="10dp"
            android:text="文本文字"
            android:gravity="center_vertical"
            android:textSize="14sp"
            android:padding="5dp"
            android:singleLine="true" />
        <ImageView 
            android:id="@+id/btn"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_toRightOf="@+id/text"
            android:src="@drawable/dropdown"
            android:padding="5dp"
            android:layout_centerVertical="true"
            android:gravity="center"/>
    </RelativeLayout>
    复制代码

     

    下拉弹窗列表布局页面:dropdownlist_popupwindow.xml:

    复制代码
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >
        
        <ListView
            android:id="@+id/listView"
            android:layout_width="280dp"
            android:layout_height="wrap_content"
            android:divider="#666666"
            android:dividerHeight="1dp"
             ></ListView>
    
    </LinearLayout>
    复制代码

    selector资源文件:

    dropdown_list_selector.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_pressed="true" android:drawable="@color/dropdownlist_item_press"/>
        <item android:drawable="@color/dropdownlist_item"/>
    </selector>

    dropdown_bg_selector.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_pressed="true" android:drawable="@color/dropdownlist_press"/>
        <item android:drawable="@color/dropdownlist_bg"/>
    </selector>

     

     

    2. 自定义下拉列表框控件类的实现:

     

    我们采用了TextView+ImageView+PopupWindow的组合方案,所以我的自定义控件需要重写ViewGroup,由于我们已经知道了,布局方向为竖直方向,所以这里,

    我直接继承LinearLayout来写这个控件。具体实现代码如下:

    复制代码
    package com.czm.xcdropdownlistview;
    
    import java.util.ArrayList;
    
    
    import android.annotation.SuppressLint;
    import android.content.Context;
    import android.util.AttributeSet;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.BaseAdapter;
    import android.widget.ImageView;
    import android.widget.LinearLayout;
    import android.widget.ListView;
    import android.widget.PopupWindow;
    import android.widget.TextView;
    
    @SuppressLint("NewApi")
    /**
     * 下拉列表框控件
     * @author caizhiming
     *
     */
    public class XCDropDownListView extends LinearLayout{
    
        private TextView editText;
        private ImageView imageView;
        private PopupWindow popupWindow = null;
        private ArrayList<String> dataList =  new ArrayList<String>();
        private View mView;
        public XCDropDownListView(Context context) {
            this(context,null);
            // TODO Auto-generated constructor stub
        }
        public XCDropDownListView(Context context, AttributeSet attrs) {
            this(context, attrs,0);
            // TODO Auto-generated constructor stub
        }
        public XCDropDownListView(Context context, AttributeSet attrs, int defStyle) {
            super(context, attrs, defStyle);
            // TODO Auto-generated constructor stub
            initView();
        }
    
        public void initView(){
            String infServie = Context.LAYOUT_INFLATER_SERVICE;
            LayoutInflater layoutInflater;
            layoutInflater =  (LayoutInflater) getContext().getSystemService(infServie);
            View view  = layoutInflater.inflate(R.layout.dropdownlist_view, this,true);
            editText= (TextView)findViewById(R.id.text);
            imageView = (ImageView)findViewById(R.id.btn);
            this.setOnClickListener(new OnClickListener() {
                
                @Override
                public void onClick(View v) {
                    // TODO Auto-generated method stub
                    if(popupWindow == null ){
                        showPopWindow();
                    }else{
                        closePopWindow();
                    }
                }
            });
        }
        /**
         * 打开下拉列表弹窗
         */
        private void showPopWindow() {  
            // 加载popupWindow的布局文件  
            String infServie = Context.LAYOUT_INFLATER_SERVICE;
            LayoutInflater layoutInflater;
            layoutInflater =  (LayoutInflater) getContext().getSystemService(infServie);
            View contentView  = layoutInflater.inflate(R.layout.dropdownlist_popupwindow, null,false);
            ListView listView = (ListView)contentView.findViewById(R.id.listView);
            
            listView.setAdapter(new XCDropDownListAdapter(getContext(), dataList));
            popupWindow = new PopupWindow(contentView,LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
            popupWindow.setBackgroundDrawable(getResources().getDrawable(R.color.transparent));
            popupWindow.setOutsideTouchable(true);
            popupWindow.showAsDropDown(this);
        }
        /**
         * 关闭下拉列表弹窗
         */
        private void closePopWindow(){
            popupWindow.dismiss();
            popupWindow = null;
        }
        /**
         * 设置数据
         * @param list
         */
        public void setItemsData(ArrayList<String> list){
            dataList = list;
            editText.setText(list.get(0).toString());
        }
        /**
         * 数据适配器
         * @author caizhiming
         *
         */
        class XCDropDownListAdapter extends BaseAdapter{
    
            Context mContext;
            ArrayList<String> mData;
            LayoutInflater inflater;
            public XCDropDownListAdapter(Context ctx,ArrayList<String> data){
                mContext  = ctx;
                mData = data;
                inflater = LayoutInflater.from(mContext);
            }
            @Override
            public int getCount() {
                // TODO Auto-generated method stub
                return mData.size();
            }
    
            @Override
            public Object getItem(int position) {
                // TODO Auto-generated method stub
                return null;
            }
    
            @Override
            public long getItemId(int position) {
                // TODO Auto-generated method stub
                return position;
            }
    
            @Override
            public View getView(int position, View convertView, ViewGroup parent) {
                // TODO Auto-generated method stub
                // 自定义视图
                ListItemView listItemView = null;
                if (convertView == null) {
                    // 获取list_item布局文件的视图
                    convertView = inflater.inflate(R.layout.dropdown_list_item, null);
                    
                    listItemView = new ListItemView();
                    // 获取控件对象
                    listItemView.tv = (TextView) convertView
                            .findViewById(R.id.tv);
    
                    listItemView.layout = (LinearLayout) convertView.findViewById(R.id.layout_container);
                    // 设置控件集到convertView
                    convertView.setTag(listItemView);
                } else {
                    listItemView = (ListItemView) convertView.getTag();
                }
                
                // 设置数据
                listItemView.tv.setText(mData.get(position).toString());
                final String text = mData.get(position).toString();
                listItemView.layout.setOnClickListener(new OnClickListener() {
                    
                    @Override
                    public void onClick(View v) {
                        // TODO Auto-generated method stub
                        editText.setText(text);
                        closePopWindow();
                    }
                });
                return convertView;
            }
        
        }
        private static class ListItemView{
            TextView tv;
            LinearLayout layout;
        }
    
    }
    复制代码

     

    三、如何使用该自定义下拉列表框控件

    使用该控件和使用普通的自带的控件一样,首先需要在布局文件中引用该控件:

    复制代码
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.czm.xcdropdownlistview.MainActivity"
        tools:ignore="MergeRootFrame" >
        
        
        <com.czm.xcdropdownlistview.XCDropDownListView
            android:id="@+id/drop_down_list_view"
            android:layout_marginTop="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true" />
        
        </RelativeLayout>
    复制代码

    其次,就是在代码中使用该控件:

    复制代码
    package com.czm.xcdropdownlistview;
    
    import java.util.ArrayList;
    
    import android.app.Activity;
    import android.os.Bundle;
    /**
     * 使用下拉列表框控件 示例
     * @author caizhiming
     *
     */
    public class MainActivity extends Activity {
    
        XCDropDownListView dropDownListView;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            dropDownListView = (XCDropDownListView)findViewById(R.id.drop_down_list_view);
            ArrayList<String> list = new ArrayList<String>();
            for(int i = 0;i< 6;i++){
                list.add("下拉列表项"+(i+1));
            }
            dropDownListView.setItemsData(list);
    
        }
    
    }
    复制代码

    对了,这个控件中,我没有实现点击item项回调接口,这个可能对有些写惯了回调的可能觉得少了写什么的感觉,有兴趣的你可以自己添加相关回调操作哈,这个大家应该都会把。

    四、源码下载

    最后给出源码的下载:
    http://download.csdn.net/download/u013068887/10031736

    本文参考:
    http://www.cnblogs.com/JczmDeveloper/p/4425010.html

     

    复制代码
    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:id="@+id/compound"
        android:background="@drawable/dropdown_bg_selector" >
        
        <TextView
            android:id="@+id/text"
            android:layout_width="250dp"
            android:layout_height="40dp"
            android:paddingLeft="10dp"
            android:text="文本文字"
            android:gravity="center_vertical"
            android:textSize="14sp"
            android:padding="5dp"
            android:singleLine="true" />
        <ImageView 
            android:id="@+id/btn"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_toRightOf="@+id/text"
            android:src="@drawable/dropdown"
            android:padding="5dp"
            android:layout_centerVertical="true"
            android:gravity="center"/>
    </RelativeLayout>
    复制代码

    下拉弹窗列表布局页面:dropdownlist_popupwindow.xml:

    复制代码
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >
        
        <ListView
            android:id="@+id/listView"
            android:layout_width="280dp"
            android:layout_height="wrap_content"
            android:divider="#666666"
            android:dividerHeight="1dp"
             ></ListView>
    
    </LinearLayout>
    复制代码

    selector资源文件:

    dropdown_list_selector.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_pressed="true" android:drawable="@color/dropdownlist_item_press"/>
        <item android:drawable="@color/dropdownlist_item"/>
    </selector>

    dropdown_bg_selector.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_pressed="true" android:drawable="@color/dropdownlist_press"/>
        <item android:drawable="@color/dropdownlist_bg"/>
    </selector>

     

     

    展开全文
  • GroupBox 控件 RadioButton控件

    千次阅读 2017-04-04 20:55:03
    7、GroupBox 控件 GroupBox控件又称为分组框,它在工具箱中的图标是 。该控件常用于为其他控件提供可识别的分组,其典型的用法之一就是给RadioButton控件分组。可以通过分组框的Text属性为分组框中的控件向用户提供...
  • 菜单是用户获取应用程序中主要功能和实用程序的主要途径,如新建文件,打开文件等,这就需要用到菜单控件(MenuStrip)。工具栏另一种获取应用程序主要功能的常用方法,比起菜单要直观,这就需要用到工具栏控件...
  • VS2010/2008/2005 MSCOMM串口控件

    千次下载 热门讨论 2011-04-29 19:00:11
    VS2010MFC没有串口控件,此压缩包里包含了串口控件相关的3个文件。mscomm32.ocx MSCOMM32.oca MSCOMM32.DEP MSCOMM.SRG 将这几个文件拷贝到一个固定的目录下然后注册就可以在MFC里正常使用串口控件了。 注册:开始->...
  • TeeChart绘图控件破解版(vc6,vs2010都可用) TeeChart.Pro.v5 里边包含控件安装包和序列号,安装后有说明文档和例子
  • WPF控件之自定义TextBox控件

    千次阅读 2019-06-25 09:08:10
    首先我们要知道用户控件与自定义用户控件的确保 用户控件 1将多个现有的控件组合成一个可重用的“组”。 2不能使用样式和模板。 3继承自UserControl类。 自定义控件 1在现有的控件上进行扩展,增加一些新的属性方法...
  • HTML5新控件 - 日期和时间选择输入

    万次阅读 2018-05-23 17:02:42
    支持日期控件的浏览器会提供一个方便的下拉式日历,供用户选择。注意:我测试了Chrome和Opera,火狐提供下拉式日历支持,其它浏览器可能仍是一个普通文本框。1,日期控件 - date&lt;input type="date"...
  • Winform控件之选择类控件

    千次阅读 2015-05-26 18:38:33
    选择类控件主要包含复选框控件(CheckBox),单选框控件(RadioButton),下拉组合框控件(ComboBox),列表控件(ListBox),复选组控件(CheckListBox)和数值选择控件(NumericUpDown)等。  一,CheckBox控件和RadioButton...
  • Winform控件之分组类控件

    千次阅读 2015-05-27 12:54:40
    分组类控件主要包括容器控件(Panel),分组框控件(groupBox)和选项卡控件(TabControl)等控件。  一,Panel控件  Panel控件是由System.Windows.Forms.Panel类提供的,主要作用就是将其他控件组合一起放在一个面板...
  • C# IP地址输入控件

    千次下载 热门讨论 2014-08-06 01:45:36
    C# IP地址输入控件,一个IP控件,由C#语言编写,该IP控件很好的解决了关于MaskedTextBox显示IP的不足 ,你可以像调用一般控件那样来使用它,不用另外编写其它代码,非常方便。
  • AngularJS实现根据不同条件显示不同控件 由于项目需求,需要实现根据不同条件显示不同控件的功能。具体要求如下图所示: 即当选择“每单固定减”时,下方只显示“减免金额”一栏; 当选择“每单固定折扣”时,下方只...
  • Winform控件之文本类控件

    千次阅读 2015-05-10 18:44:35
    对于一个应用程序而言,控件是搭建用户界面的积木。它们具备交互式的特征。VS 2012中的控件都放在工具箱中,添加一个控件到窗体,只需在工具箱中选择好要添加的控件,并按住鼠标左键,拖动到窗体上即可。向窗体上...
  • android日历控件

    千次下载 热门讨论 2015-09-25 15:24:06
    这是一个日历控件,里面提供能的功能很完善了,可以设置字体颜色,选中的背景色,设置事务。点击左右翻页等
  • 控件分类

    千次阅读 2018-06-01 14:51:13
    控件可以有自己的属性和方法,其中属性是控件数据的简单访问者,方法则是控件的一些简单而可见的功能,控件创建过程包括设计、开发、调试(就是所谓的3Ds开发流程,即Design、Develop、Debug)工作,然后是控件的...
  • Android子控件超出父控件方法

    千次阅读 2019-05-11 15:59:04
    通过子控件 android:layout_marginTop="-15dp" 方式来超父控件 若是没有超出继续在包含这个父控件的父控件里添加android:clipChildren=“false” 知道超出为止 <RelativeLayout android:layout_...
  • HTML input控件

    万次阅读 多人点赞 2018-04-12 21:41:48
    input控件input 控件是单行输入型控件,用来接受用户输入的信息。可以在 form 元素的开始标签和结束标签之间,添加 input 元素来创建 input 控件。input 元素是一个带有属性的空元素,格式为:&lt;input type=&...
  • ValidationSummary 控件

    千次阅读 2018-05-06 21:28:19
    ValidationSummary控件是用于显示验证所有验证错误摘要的控件,当我们将验证控件的 Display属性设置 None 的时候,验证错误信息就在这里显示。ValidationSummary控件有三个常见属性:属性名 说明 DisplayMode 指定...
  • flutter控件之填充padding控件

    千次阅读 2018-09-07 07:06:26
    Padding控件即填充控件,能给子控件插入给定的填充。 事例代码: import 'package:flutter/material.dart'; class PaddingDemo extends StatelessWidget{ @override Widget build(BuildContext context) { ...
  • C#实现自定义控件、在项目工具箱中加入控件、调用控件
  • FlowLayoutPanel控件

    万次阅读 2015-09-09 15:22:03
    最近用到了FlowLayoutPanel控件。感觉功能很强大~FlowLayoutPanel 是流式布局面板。可以实现动态的添加控件,实现响应式的布局排版。FlowLayoutPanel控件沿着水平或垂直流方向排列其内容。其内容可以从一行换到下一...
  • Android 自定义控件之组合控件

    万次阅读 2018-04-17 23:29:19
    一、前言 最近做一个项目又一次用到类似像微信... 这回使用的Android的自定义控件中的组合控件。二、自定义组合控件原理 项目中经常会遇见很多相似或者相同的布局,比如APP的标题栏,通过将这些布局抽取出来,放...
  • NumericUpDown 控件

    千次阅读 2017-08-18 12:27:13
    在vb.net中,还有一个控件在外观上和它十分相似的控件,就是NumericUpDown 控件。NumericUpDown 控件主要功能是让用户通过单击Up-Down按钮或者使用键盘上的上下箭头来按设置好的增量改变数值。NumericUpDown 控件...
  • c# 通过控件名称获取控件

    千次阅读 2016-12-05 15:17:58
    控件通过Controls.Find获取lable子控件://在父控件中查找子控件名称返回结果集objec obj = Panel1.Controls.Find("控件名称",fale).First();//将结果集中控件提取切转换类型Label lab = obj as Label;string ...
  • C# 用户控件与自定义控件的区别

    千次阅读 2019-03-29 00:53:44
    用户控件(User Control):继承自 UserControl,主要用于开发 Container 控件,Container控件可以添加其他Controls控件。 自定义控件(Custom Control):继承自 Control,主要用于开发windows控件的最基本的类,...
  • PanelControl控件和LayoutControl控件介绍

    千次阅读 2018-07-10 18:50:16
    PanelControl是一个控件容器; 通常将LayoutControl结合使用,LayoutControl可以在窗体变大或者变小时,使得LayoutControl的控件能同比变化; 例如: LayoutControl中的Group可以将控件分组; 右键点击group...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 507,351
精华内容 202,940
关键字:

控件