自定义控件(一),自定义控件(
自定义控件是根据自己的需要自己来编写控件。安卓自带的控件有时候无法满足你的需求,这种时候,我们只能去自己去实现适合项目的控件。同时,安卓也允许你去继承已经存在的控件或者实现你自己的控件以便优化界面和创造更加丰富的用户体验。在平常的项目中,我们 人为的把自定义控件分为两种:一种是组合方式实现。一种是通过继承view或viewgroup及其子类实现。两者都可以实现我们想要的效果,因此,我们可以根据自己的需求,选择合适的方案。本文以案例的形式来显示几种较为常见的自定义控件。
案例一: 优酷菜单
功能介绍: 手机界面的底部中央有一个半圆,初始状态显示三级菜单,由外到内分别是第三级菜单,第二级菜单,第三级菜单。每个菜单中有一些按钮,可以用3个容器(RelativeLayout)来表示3个菜单,往里面添加按钮即可。当再次点击中心位置的图片式,隐藏外面两层的的条目。再次点击重心位置的图片时,旋转出二级菜单。点击二级菜单中心位置时,旋转出三级菜单,再次点击则隐藏三级菜单。以上就是优酷菜单要实现的功能。
实现步骤:
1. 完成布局文件。由于控件较多所以优酷菜单的布局较为复杂,但是可以在一个根布局设置三个子线性布局来包裹每一个小的控件。通过调整margin值来是使得界面更加的美观。注意3个菜单布局的顺序,先放men3,然后menu2,然后menu1,顺序不能反,因为越往后放的菜单越在界面的上方,这样面积最小的菜单1会在最上方,菜单1不会遮挡到下面的菜单2和菜单3。
2. 完成布局文件后,创建一个类,在该类中实现业务逻辑。首先要创建两个布尔类型的常量存储菜单的状态。通过swich语句判断被点击的控件是二级菜单还是一级菜单。如果是一级菜单的中心被点击,则判断三级菜单是否打开。如果三级菜单打开着,则隐藏一级菜单和二级菜单,并修改状态。如果三级菜单隐藏着则判断二级菜单是否隐藏。如果二级菜单打开着,则隐藏二级菜单。如果二级菜单隐藏则打开二级菜单。如果是二级菜单的中心被点击,则只需要判断三级菜单是否隐藏。如果三级菜单打开着,则隐藏三级菜单。如果三级菜单隐藏则打开三级菜单。同时还要修改菜单的状态。
3. 接下来可以在一个工具类中实现动画的效果。步骤2中的隐藏和显示均都是通过动画效果实现的。这里的动画效果用到的是补间动画,为RotateAnimation对象传入起始角度,结束的角度,参考对象和参考点坐标。一个小细节是将setFillAfter属性设为true,表示从结束位置开始动画,避免动画结束后又回到起始位置。隐藏和显示区别是旋转的起始角度和结束角度,这里显示设定的起始角度是-180,结束角度为0。隐藏设定的起始角度为0,结束角度为-180。当然也可以设定为其他值,取决于自己想要的效果。
4. 代码优化。快速点击按钮时会发现菜单还没隐藏完就开始显示了,或者还没显示完又隐藏了。解决方案:监听动画的开启次数来判断是否需要执行画,给动画类添加一个监听器。设置一个成员变量。当开始开始动画是执行加一操作,结束动画是执行减一操作。这样只有当常量为零时,才没有动画。因此swich语句中加入判断如果当前存在动画,等待动画执行完之后在进入下面的逻辑。
菜单选择界面的布局:
<?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"> <RelativeLayout android:id="@+id/rl_menu3" android:layout_width="280dp" android:layout_height="140dp" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:background="@drawable/level3"> <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginBottom="6dp" android:layout_marginLeft="12dp" android:background="@drawable/channel1" /> <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginBottom="46dp" android:layout_marginLeft="32dp" android:background="@drawable/channel2" /> <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginBottom="80dp" android:layout_marginLeft="60dp" android:background="@drawable/channel3" /> <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_marginTop="6dp" android:background="@drawable/channel4" /> <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_marginBottom="80dp" android:layout_marginRight="60dp" android:background="@drawable/channel5" /> <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_marginBottom="46dp" android:layout_marginRight="32dp" android:background="@drawable/channel6" /> <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_marginBottom="6dp" android:layout_marginRight="12dp" android:background="@drawable/channel7" /> </RelativeLayout> <RelativeLayout android:id="@+id/rl_menu2" android:layout_width="180dp" android:layout_height="90dp" android:layout_alignParentBottom="true" android:layout_centerHorizontal