自定义控件基础01_菜单轮__viewPager_下拉框_自定义开关

1,自定义控件分类:

1.1组合控件:由安卓中原生的控件组合起来,配合动画达成的效果

1.2自定义控件

1.3组合控件案例演示:

案例:优酷菜单demo

三层圆环,按下menu键会通过动画效果消失在界面,点击小房子和中层圆环,最外层圆环消失

①布局实现:

三层相对布局相互叠加(因为图片背景是透明的,所以可以叠加显示)

由于三个布局是叠加显示的,所以这个菜单选项要使用一个占据焦点比较强的(不然有可能点击不到)ImageButton控件

控件上background=”@android:color/transparent”//透明色

②动画效果,三级菜单的隐藏和显示

动画效果,点击二级菜单,三级菜单旋转消失,再次点击旋转回来显示

每一层实际上是一个正方形(圆环在一个背景透明的正方形上),那么只要它做自身的的旋转,就能起到圆环旋转动画的实现,从界面消失,即以底部居中为中心左旋转180度,从界面出现,即以底部居中为中心右旋转180度,就能实现这个效果.

am.setFillAfter()//设置控件保持在动画结束的状态

am.setStartOffset()//设置延迟执行动画

一级菜单的主要是控制二级菜单,如果三级菜单也存在就一起控制,三级菜单先消失,二级菜单延迟消失.但是再次点击一级菜单并不会返回三级菜单

点击menu按钮,三个菜单全部消失,延迟有序

③额外:动画播放完了,圆环隐藏了,但是还可以被点击,在执行隐藏的时候设置按钮不可用

setEnable()//设置是否可用

动画没播放完就再次点击会终止未执行完的动画,所以,在执行隐藏或显示的动画时,设置一个监听器,如果动画播放完了,才能运行执行下一个动画(定义一个变量控制播放动画的数量)

1.4 ViewPager android3.0版本就已经含有此控件(实现图片轮播效果)

Support-v4.jar包包含了ViewPager控件,低版本就可以使用这个控件了

低版本开发的时候,导入viewPager,拷贝全类名使用该控件(类似自定义控件)

在布局文件中的颜色#66(透明度)66(R)66(G)66(B)

viewPager用法

①根据需求创建imageView的数量,并填充数据,设置图片

②viewPager.setAdapter(PagerAdapter)//设置对应的适配器就行了

如果适配器类参数名异常(argxx)需要导入源码(如果点入类之后找不到导入源码的按钮,就卸载v4包重新add一下,就能导入源码了)

源码路径sdk/extras/android/support/v4/src/java

适配器类中的几个重要方法

getCount()//返回的条目数

isViewFromObject(xx,xx) //判断是否使用缓存,如果返回的是true,使用缓存,不去调用instantiXX方法创建一个新对象,

简单来说:如果用户未滑动出界,该图片对象不改变,是否需要重新初始化一个对象来显示.

返回值推荐写法view==object//如果是一个对象就使用缓存,如果不是就创建一个新的

instantiateItem()//初始化一个条目

预加载功能:会预加载左右两张图片,即初始化左右两张图片

//初始化一个条目,把position对应的imageView添加到ViewPager中

viewPager.addView(imageViewList.get(position));

返回这个view;

destoryItem()//销毁一个条目,position当前被销毁的索引

//移除掉ViewPager中的ImageView

viewPager.removeView(imageViewList.get(position));

额外:如果出现找不到方法,但工程内又确实有jar包,去查配置build path,打钩即可

1.4.2 图片轮播的进度点和图片描述数组的实现

①在循环添加图片的时候,也给进度点对应的父控件添加一个小点,开发中有美工做,这里通过xml.

小圆点的创建

创建shape节点的xml文件

shape属性:shape=”oval” //圆形

子节点corners //弧度5dp即可

Solid  //固定颜色

//记得要创建两个,一个带焦点,一个不带焦点的

②添加的时候,记得设置对应参数 设置宽高

View v = new (this)

v.setBacKGxxxxx(id);

LayoutParams params = new xxxx(w,h)//设置宽高

Params.xxxx//可以设置对应的参数,控件间的距离,设置是否被选中(设置一个状态选择器可以实现切换进度小圆点的效果)

v.setLayoutParams(params);//设置参数,必须要设置参数,否则无法显示

//最后添加进Linerlayout中

③图片描述信息的数据索引要匹配上适配器的图片数据

额外:设置默认的选中点,注意代码的顺序,要在设置完数据之后设置.

④根据viewPager切换状态来更改进度点状态和信息显示

viewPager.setOnPageChangeListener(this)//设置页面切换监听器

两个方法

onPageSelected()//当页面被选中(完全显示)的时候,触发此方法

更改进度点父节点的子节点集合中子孩子(进度点的状态)

更改文描述文本的显示

别忘了修改前一个节点的状态(拿个引用记录它,如果position直接+-的话,容易逻辑混乱)

onPageScrolled()//当页面卷曲的时候调用

1.4.3 伪无限循环和动态切换

①viewPager移动到第一个(0)或者最后一个的时候(最大索引),

就不会预加载上一个(-1)或 下一个(最大索引+1)了

所以,让返回的count很大就行(比如2g-1(Integer.Max_Value))(数学小技巧)

那么对应的索引就是count%集合长度//相当于倍数取余,可以对应到指定的索引

额外:初始化的时候,把默认选中的点为返回的count中间的值(这样↔滑动都不会出现停滞阻塞的情况了),要让选中的点在第一个位置,就让中间值再减去倍数取余

pageView.setCurrentItem()//设置默认选中的坐标

额外:设置默认选中点,实际上是调用了onPageSelected()方法,记得调换前一个点和当前点设置的位置,因为一开始这样两个都是0,所以要在后面要设置为选中.在前面的设置为未选中.

②动态切换

开启一个子线程,定期切换viewPager的图片(这是一个修改ui的操作).

但要注意的是,子线程在activity中不会被直接销毁,activity的ondestory()方法中设置一个变量去控制这个无限循环

额外:休眠的操作放到循环最后,就不会多输出一次(因为变量控制的时候,它如果已经睡眠了,还会多输出一次,所以这也算一个小优化)

2 组合控件:下拉选择框(ListView填充),参考效果:

2.1参考布局:

点击向下的箭头,出现下拉框,点击下拉框选项会把对应的号码填充到输入框中

下拉框实际上是popupWindow,内容是一个ListView

设置一个适配器,填充数据

把listView添加到popupWindow上面

PopupWindow pw = new PopupWindow(listview,w,h);

W:宽度:输入框的宽度,et.getWidth();

H;高度:整个屏幕都可以,设死也可以

//显示在界面上,显示在某个控件下

pw.showAsDropDown(输入框,偏移量x,偏移量y)

2.2 细节问题

①外形边框是listView的背景图片

②listView.setVerticalScrollBarEnable()//设置是否显示右侧垂直滑动条

如果全部条目都被删除了,就应该关闭popup.

③Button,imagebutton,checkbox这一类控件抢焦点能力都很强.

PopupWindow本身是不可以使用焦点的,设置可以使用焦点,不生效

原因:子条目的button或imageButton把焦点抢走了

//设置子控件不可以抢占父元素的事件,但是可以以块去分配事件

解决:给子条目LinearLayout布局:descendantFocusablity=”blocksDescXXX”

④popupWindow跟输入框之间有细微的空白

因为输入框本身是有边框宽度的,而获取的输入框宽度不包含它,所以稍微减少一点就行.

⑤点击其它地方也要让它会被关闭

popupWindow.setOutsideTouchable()//点击外部可以被关闭,单独设置不生效

popupWindow.setBackground(xxxx)//设置一个背景,才能让上面的设置生效

3.自定义控件(前面都是组合控件)

3.1 滑动开关,参考效果图,拖动方块可以实现开关切换

①安卓中每一个控件或者布局都是继承自View类(控件的爸爸),创建一个类去继承View

需要重写的构造方法

如果要在java中new出来,就重写只有Context 的构造

如果要在 布局文件中引用自定义控件时,使用有Context和atts的构造

一般两个都写.

②拷贝对应的图片

创建方法(都是公开,调用者可自定义,从这一角度考虑自定义控件功能的实现),

设置背景图片setSwitchBackgorundResource()//这个名字更容易理解,

设置滑动块的图片

设置当前开关的默认状态.

用对应的成员变量去记录下来,方便在绘制的时候处理.

③自定义控件的绘制

android中View的绘制流程

不要直接去覆盖,使用谷歌提供的回调接口

Measure(测量宽高信息) >>>Layout(排版/布局,包含子控件) >>>draw(绘制)

onMeasure(当测量时调用)>>>onLayout(布局时回调) >>>onDraw(当绘制时)

3.2 绘制控件

①在onMeasure方法中测量并设置自己的宽和高

重写onMeasure(xxx)方法

设置宽高和背景图片的宽和高一致

setMeasureDimension(w,h);//设置测量后的宽高

super.xxx要在最前面,不然不能生效

②没有子控件,不需要onLayout回调,在onDraw()方法中,把开关绘制出来

重写onDraw(Canvas)方法,super.onDraw()//可以删除掉

Canvas 画板,使用canvas所画出来的东西,都是作为当前控件,在屏幕上显示

//把背景图片平铺在当前控件上

Canvas.drawBitMap(图片,左,上,画笔)//0,0(左上角),null(绘制图片不需要画笔)

//根据当前状态currentState(成员变量)来绘制滑动块状态

如果为true,绘制在背景图片右边(左边距为背景宽减去开关宽,上边距为顶部0即可)

如果为false,绘制在背景图片的左边(左边距为0,上边距起点0即可)

3.3触摸移动改变状态

①重写onTouchEvent()//返回值为true消耗当前事件,自己处理,返回为false交给别人处理.

②判断事件类型

观察可知,移动的时候只改变X 轴值

记录按下的点,移动时候的点,两者的x轴值相减就是位移范围(正数向左,负数向右).

如果采用这种办法,需要记录下初始的位置,再对其进行修改

实际上,直接用移动的点数值给左边距设置数值即可.

当移动的点发生改变的时候,手动触发onDraw方法的重绘.

invaliadte()//刷新当前控件,会引起onDraw方法的调用.

③在onDraw()方法里,根据X轴的值来动态的修改滑动块的位置

Canvas.drawBitMap(滑动块图片,左边距,0上边距不变,null不需要画笔);

3.3.2用户体验问题

①会移出边界

限定宽度,滑动块的左边距不能小于0,如果小于0,绘制的时候就一直设置为0

左边距(滑动块的左边距)同样也不能大于(背景图片的宽度-滑动块的宽度),

如果大于,就一直为两者之差.

②移动的时候,如果在中间松开,不会自动归位

先判断是否在滑动中(不然滑动的时候就会直接跳位,体验不好)

松开的时候(设置为不在滑动中),根据左边距的值判断状态

如果不在滑动中,两种方法

(判断滑动块的左边距是否大于整个背景图片的四分之一,

如果大于就代表用户想要关闭它,如果小于就代表用户想要开启它.根据结果跳位)

(或者滑动块的中心点和背景图片的中心点值的比较,

如果滑动块中心点>背景图片中心点值,当前状态重置为true,打开的状态

如果小于,就重置为 false,关闭的状态

)

③手指按下位置与用户预期不一样(用户希望的是移动的点是中间的点,而实际上是按下的点)

重新绘制的时候,左边距的数值>>调整>>左边距减去滑动块宽度的一半.

最后再对这个数据进行判断.

时间: 2024-11-08 20:08:27

自定义控件基础01_菜单轮__viewPager_下拉框_自定义开关的相关文章

html年月日下拉联动菜单 年月日三下拉框联动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head><title>年月日三下拉框联动</title>

Android基础——高级UI组件:下拉框,列表,滚动条视图

布局文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.andr

.net mvc DropDownList 下拉框_无限级分类

1.数据库设计: id:int name:string pid:int  //父级id(顶级菜单默认为0) 2.Controller: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using MvcTest.Models; namespace MvcTest.Controllers { [ValidateInput(false)

下拉框联动方法封装

业务中经常需要对数据进行下拉框的联动选择操作,可以假设成省份城市 省份城市县这样的多级联动 客户那边提供的数据大多为excel,格式都属于标准一行列的 假设需要对省份城市进行联动 实现如下 1 var pcd = []; 2 pcd[0] = ['北京', '北京']; 3 pcd[1] = ['天津', '天津']; 4 pcd[2] = ['河北', '石家庄']; 5 pcd[3] = ['河北', '唐山']; 6 pcd[4] = ['山西', '太原']; 7 pcd[5] = ['

自定义控件基础02_下拉刷新_侧拉菜单_自定义属性

自定义控件02 自定义控件 ①,纯粹自定义绘制 ②,在原生的基础上追加功能. 1,下拉刷新功能(继承ListView追加功能)(下拉刷新,加载更多,两个功能) 1.1 下拉刷新 ①创建一个类,继承ListView 创建自定义适配器,设置数据 额外:自定义控件会放到view包下 ②自定义控件的头(即下拉的时候显示的view) 推荐名称initHeaderView();在构造方法中初始化这个头 this.addHeaderView()//添加一个头布局的控件,在listView顶部添加一个头 头部u

Web前端开发实战6:CSS实现导航菜单结合二级下拉式菜单的简单变换

前面几篇博文都在讲导航菜单和二级下拉式菜单,其实有很多方法都可以实现的,具体的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果,由于在学习Ajax和jQuery的初步阶段,对于很多的复杂的导 航菜单和二级下拉式菜单没法做,但是学习了CSS和JS还是能实现一些简单的变换的.这篇博文就来说说用CSS实现 导航菜单结合二级下拉式菜单的两个简单变换吧. 首先还是在前面博文的基础上加以实现,其实只用HTML和CSS还是可以做出不错的效果,但是相较于JS和 jQuery来说就有很

响应式WEB设计:将导航菜单转换成下拉菜单以适应小屏幕设备

移动互联网时代的到来,使得我们在进行页面设计与开发时,应当根据用户行为以及设备环境(系统平台.屏幕尺寸)进行相应的响应和调整,这个理念也叫响应式WEB设计.今天我将给大家讲解当屏幕尺寸变小时,将横向菜单转换成下拉菜单的效果. 本文使用了HTML5标签以及CSS3技术,您在查看demo时需要您的浏览器支持HTML5和CSS3,建议使用Chrome,Firefox或者IE9等现代浏览器. HTML <nav> <ul> <li><a href="/"

Select级联菜单,用Ajax获取Json绑定下拉框(jQuery)

需求类似这样  ↓ ↓ ↓   -->    菜单A发生变化,动态取数据填充下拉菜单B. JS代码如下: <script type="text/javascript"> $(function () { $("#TeamSelect").change(function () { var tid = $("#TeamSelect option:selected").val(); $.ajax({ url: "/ajax/a

地址联动下拉框实现

<head> <meta charset="UTF-8"> <title>地址联动下拉框实现</title> <link rel="stylesheet" type="text/css" href="reset.css"> <link rel="stylesheet" type="text/css" href="