Android学习（36） -- 自定义控件（1）实现组合按钮的菜单和隐藏

来源：互联网发布：360网络测速器 5.1.0 编辑：程序博客网时间：2024/06/05 18:50

自定义控件：
1.组合控件：将系统原生控件组合起来，加上动画效果，形成一种特殊的UI效果

2.纯粹自定义控件：继承自系统的View,自己去实现view效果

使用组合实现菜单

布局代码：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".MainActivity" >    <!-- 一级菜单 -->    <RelativeLayout        android:id="@+id/level1"        android:layout_width="100dp"        android:layout_height="50dp"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:background="@drawable/level1" >        <ImageView            android:id="@+id/iv_home"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerInParent="true"            android:background="@drawable/icon_home" />    </RelativeLayout>    <!-- 二级菜单 -->    <RelativeLayout        android:id="@+id/level2"        android:layout_width="180dp"        android:layout_height="90dp"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:background="@drawable/level2" >        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_marginBottom="10dp"            android:layout_marginLeft="10dp"            android:background="@drawable/icon_search" />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_alignParentRight="true"            android:layout_marginBottom="10dp"            android:layout_marginRight="10dp"            android:background="@drawable/icon_myyouku" />        <ImageView            android:id="@+id/iv_menu"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerHorizontal="true"            android:layout_marginTop="5dp"            android:background="@drawable/icon_menu" />    </RelativeLayout>    <RelativeLayout        android:id="@+id/level3"        android:layout_width="280dp"        android:layout_height="142dp"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:background="@drawable/level3" >        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_marginBottom="15dp"            android:layout_marginLeft="12dp"            android:background="@drawable/channel1" />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_alignParentRight="true"            android:layout_marginBottom="15dp"            android:layout_marginRight="12dp"            android:background="@drawable/channel5" />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_marginBottom="55dp"            android:layout_marginLeft="32dp"            android:background="@drawable/channel2" />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_alignParentRight="true"            android:layout_marginBottom="55dp"            android:layout_marginRight="32dp"            android:background="@drawable/channel6" />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_marginBottom="85dp"            android:layout_marginLeft="62dp"            android:background="@drawable/channel3" />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_alignParentRight="true"            android:layout_marginBottom="85dp"            android:layout_marginRight="62dp"            android:background="@drawable/channel7" />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerHorizontal="true"            android:layout_marginTop="5dp"            android:background="@drawable/channel4" />    </RelativeLayout></RelativeLayout>

实现二级菜单和三级菜单的显示和隐藏

public class MainActivity extends Activity implements OnClickListener {private String tag = MainActivity.class.getSimpleName();private ImageView iv_home, iv_menu;private RelativeLayout leve1, leve2, leve3;// 是否显示二级菜单private boolean isShowLeve2 = true;// 是否显示三级菜单private boolean isShowLeve3 = true;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);// 初始化ViewinitView();// 初始监听initListenter();}// 用于初始化Viewprivate void initView() {setContentView(R.layout.activity_main);iv_home = (ImageView) findViewById(R.id.iv_home);iv_menu = (ImageView) findViewById(R.id.iv_menu);leve1 = (RelativeLayout) findViewById(R.id.level1);leve2 = (RelativeLayout) findViewById(R.id.level2);leve3 = (RelativeLayout) findViewById(R.id.level3);}// 初始监听private void initListenter() {iv_home.setOnClickListener(this);iv_menu.setOnClickListener(this);}@Overridepublic void onClick(View v) {switch (v.getId()) {case R.id.iv_home:if (isShowLeve2) {// 需要隐藏// isShowLeve2 = false;// Log.e(tag, "执行隐藏");AnimUtil.closeMenu(leve2);} else {// 需要显示// isShowLeve2 = true;// Log.e(tag, "执行显示");AnimUtil.showMenu(leve2);}isShowLeve2 = !isShowLeve2;break;case R.id.iv_menu:if (isShowLeve3) {//关闭三级菜单AnimUtil.closeMenu(leve3);}else {//显示三级菜单AnimUtil.showMenu(leve3);}isShowLeve3 = !isShowLeve3;break;default:break;}}}

AnimUtil工具类

隐藏是从0到-18

显示是从-180 到0

public class AnimUtil {/** * 关闭按钮 * @param rl */public static void closeMenu(RelativeLayout rl  ) {// pivotXValue: 0-1RotateAnimation animation = new RotateAnimation(0, -180,RotateAnimation.RELATIVE_TO_SELF, 0.5f,RotateAnimation.RELATIVE_TO_SELF, 1);animation.setDuration(500);animation.setFillAfter(true);// 动画结束后保持当时的状态rl.startAnimation(animation);}/** * 显示按钮 * @param rl */public static void showMenu(RelativeLayout rl ) {RotateAnimation animation = new RotateAnimation(-180, 0,RotateAnimation.RELATIVE_TO_SELF, 0.5f,RotateAnimation.RELATIVE_TO_SELF, 1);animation.setDuration(500);animation.setFillAfter(true);// 动画结束后保持当时的状态rl.startAnimation(animation);}}

0 0