自定义控件-优酷环形菜单
优酷菜单是一个典型的组合控件,这里我们要进一步学习组合控件的使用。优酷菜单效果图如下:
图中由中间往外,分别是一级菜单、二级菜单、三级菜单。其基本用法是,点击一级菜单后加载二级菜单,再点击二级菜单加载三级菜单,再点击一级菜单分别隐藏三级、二级菜单。
activity_main.xml
<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/rl_level3" android:layout_width="280dp" android:layout_height="140dp" android:background="@drawable/level3" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" > <ImageView android:id="@+id/iv_channel1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/channel1" android:layout_alignParentBottom="true" android:layout_margin="8dp" /> <ImageView android:id="@+id/iv_channel2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/channel2" android:layout_alignLeft="@id/iv_channel1" android:layout_above="@id/iv_channel1" android:layout_marginLeft="23dp" android:layout_marginBottom="8dp" /> <ImageView android:id="@+id/iv_channel3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/channel3" android:layout_alignLeft="@id/iv_channel2" android:layout_above="@id/iv_channel2" android:layout_marginLeft="33dp" android:layout_marginBottom="8dp" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/channel4" android:layout_centerHorizontal="true" android:layout_margin="8dp" /> <ImageView android:id="@+id/iv_channel7" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/channel7" android:layout_alignParentBottom="true" android:layout_margin="8dp" android:layout_alignParentRight="true" /> <ImageView android:id="@+id/iv_channel6" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/channel6" android:layout_alignRight="@id/iv_channel7" android:layout_above="@id/iv_channel7" android:layout_marginRight="23dp" android:layout_marginBottom="8dp" /> <ImageView android:id="@+id/iv_channel5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/channel5" android:layout_alignRight="@id/iv_channel6" android:layout_above="@id/iv_channel6" android:layout_marginRight="33dp" android:layout_marginBottom="8dp" /> </RelativeLayout> <RelativeLayout android:id="@+id/rl_level2" android:layout_width="180dp" android:layout_height="90dp" android:background="@drawable/level2" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/icon_search" android:layout_alignParentBottom="true" android:layout_margin="8dp" /> <ImageView android:id="@+id/iv_icon_menu" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/icon_menu" android:layout_centerHorizontal="true" android:layout_margin="8dp" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/icon_myyouku" android:layout_margin="8dp" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" /> </RelativeLayout> <RelativeLayout android:id="@+id/rl_level1" android:layout_width="100dp" android:layout_height="50dp" android:background="@drawable/level1" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" > <ImageView android:id="@+id/iv_icon_home" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/icon_home" android:layout_centerInParent="true" /> </RelativeLayout> </RelativeLayout>
MainActivity.java
package com.yzx.youkuhuanxingcaidan; import android.os.Bundle; import android.app.Activity; import android.view.KeyEvent; import android.view.Menu; import android.view.View; import android.view.View.OnClickListener; import android.widget.ImageView; import android.widget.RelativeLayout; public class MainActivity extends Activity implements OnClickListener{ private RelativeLayout rl_level1; private RelativeLayout rl_level2; private RelativeLayout rl_level3; boolean isShowLevel1 = true; boolean isShowLevel2 = true; boolean isShowLevel3 = true; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); } private void initView() { rl_level1 = (RelativeLayout) findViewById(R.id.rl_level1); rl_level2 = (RelativeLayout) findViewById(R.id.rl_level2); rl_level3 = (RelativeLayout) findViewById(R.id.rl_level3); ImageView iv_icon_menu = (ImageView) findViewById(R.id.iv_icon_menu); ImageView iv_icon_home = (ImageView) findViewById(R.id.iv_icon_home); iv_icon_menu.setOnClickListener(this); iv_icon_home.setOnClickListener(this); } @Override public void onClick(View v) { switch (v.getId()) { case R.id.iv_icon_menu: if(isShowLevel3){ //菜单消失 Tools.hideView(rl_level3); } else{ //菜单出现 Tools.showView(rl_level3); } isShowLevel3 = !isShowLevel3; break; case R.id.iv_icon_home: if(isShowLevel2){ if(isShowLevel3){ Tools.hideView(rl_level3); isShowLevel3 = false; Tools.hideView(rl_level2, 120); //控件gone了,但是它的空间没有被占用,所以可以被点击到 // rl_level2.setVisibility(View.GONE); //把父节点设置为不可用,对子节点没有影响 // rl_level2.setEnabled(false); // for (int i = 0; i < rl_level2.getChildCount(); i++) { // View view = rl_level2.getChildAt(i); // view.setEnabled(false); // } } else{ Tools.hideView(rl_level2); } } else{ Tools.showView(rl_level2); } isShowLevel2 = !isShowLevel2; break; } } //实体按键按下时调用 @Override public boolean onKeyDown(int keyCode, KeyEvent event) { // 通过keyCode判断用户点击了哪个按钮 if(keyCode == KeyEvent.KEYCODE_MENU){ if(isShowLevel1){ Tools.hideView(rl_level1); if(isShowLevel2){ Tools.hideView(rl_level2, 120); isShowLevel2 = false; if(isShowLevel3){ Tools.hideView(rl_level3, 240); isShowLevel3 = false; } } } else{ Tools.showView(rl_level1); Tools.showView(rl_level2, 120); isShowLevel2 = true; } isShowLevel1 = !isShowLevel1; } return super.onKeyDown(keyCode, event); } }
Tools.java
package com.yzx.youkuhuanxingcaidan; import android.view.View; import android.view.animation.RotateAnimation; import android.widget.RelativeLayout; public class Tools { //代码的复用 public static void hideView(RelativeLayout rl){ hideView(rl, 0); } //代码的复用 public static void showView(RelativeLayout rl){ showView(rl, 0); } public static void hideView(RelativeLayout rl, long delay){ RotateAnimation ra = new RotateAnimation(0, 180, rl.getWidth() / 2, rl.getHeight()); ra.setDuration(500); ra.setFillAfter(true); //设置动画延时播放 ra.setStartOffset(delay); rl.startAnimation(ra); //把rl的所有子节点设置为不可用 for (int i = 0; i < rl.getChildCount(); i++) { View view = rl.getChildAt(i); view.setEnabled(false); } } public static void showView(RelativeLayout rl, long delay){ RotateAnimation ra = new RotateAnimation(180, 0, rl.getWidth() / 2, rl.getHeight()); ra.setDuration(500); ra.setStartOffset(delay); ra.setFillAfter(true); rl.startAnimation(ra); //把rl的所有子节点设置为可用 for (int i = 0; i < rl.getChildCount(); i++) { View view = rl.getChildAt(i); view.setEnabled(true); } } }
3键——控制大圆;
2键
退出:
——若大圆存在,中圆和大圆先后退出
——若大圆没有,则只有中圆退出
出现:
——只出现中圆
1键
退出:
——若大圆中圆小圆同时存在,小圆、中圆和大圆先后退出
——若大圆没有,中圆小圆存在,小圆和中圆先后退出
——只有小圆存在,则只有小圆退出
出现:
——先后出现小圆和中圆