效果图如下:点击主页后,上面2个圆环旋转消失与出现,点击中间圆环的中间那个菜单按钮,最外围的圆环旋转消失于出现
利用了自定义控件技术,以及图片的旋转和布局时各个控件的相对关系。
1、acitivity_main.xml的布局文件
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.yuanlp.youkudemo.MainActivity"> <RelativeLayout android:id="@+id/level3" android:layout_width="280dp" android:layout_height="140dp" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:background="@drawable/level3"> <ImageView android:id="@+id/channel1" android:layout_marginLeft="8dp" android:layout_marginBottom="8dp" android:layout_alignParentBottom="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/channel1"/> <ImageView android:id="@+id/channel2" android:layout_above="@+id/channel1" android:layout_marginLeft="34dp" android:layout_marginBottom="8dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/channel2"/> <ImageView android:id="@+id/channel3" android:layout_above="@+id/channel2" android:layout_marginLeft="66dp" android:layout_marginBottom="8dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/channel3"/> <ImageView android:id="@+id/channel4" android:layout_marginTop="8dp" android:layout_centerHorizontal="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/channel4"/> <ImageView android:id="@+id/channel5" android:layout_above="@+id/channel6" android:layout_marginRight="67dp" android:layout_marginBottom="8dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:src="@drawable/channel5"/> <ImageView android:id="@+id/channel6" android:layout_above="@+id/channel7" android:layout_marginRight="27dp" android:layout_marginBottom="8dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:src="@drawable/channel6"/> <ImageView android:id="@+id/channel7" android:layout_marginRight="9dp" android:layout_marginBottom="8dp" android:layout_alignParentBottom="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:src="@drawable/channel7"/> </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_marginLeft="8dp" android:layout_marginBottom="8dp" android:layout_alignParentBottom="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/icon_search"/> <ImageView android:id="@+id/icon_menu" android:layout_centerHorizontal="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="8dp" android:src="@drawable/icon_menu"/> <ImageView android:layout_marginLeft="8dp" android:layout_marginBottom="8dp" android:layout_alignParentBottom="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:src="@drawable/icon_myyouku"/> </RelativeLayout> <RelativeLayout android:id="@+id/level1" android:layout_centerHorizontal="true" android:layout_alignParentBottom="true" android:layout_width="100dp" android:layout_height="50dp" android:background="@drawable/level1"> <ImageView android:id="@+id/icon_home" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:src="@drawable/icon_home"/> </RelativeLayout> </RelativeLayout>
2、Tools.java 工具类,具体实现了消失与出现的方法,利用了图片的旋转消失
package com.yuanlp.youkudemo; import android.view.View; import android.view.animation.RotateAnimation; /** * Created by 原立鹏 on 2017/7/3. * 控制level的指定的看控件 */ class Tools { public static void hideView(View view){ //参数解释:第一个蚕食是从多少开始,第二个是旋转多少度,第三个以及第四个是相对于控件来说,旋转中心的位置,即控件宽度的一半以及高度 RotateAnimation ra=new RotateAnimation(0,180,view.getWidth()/2,view.getHeight()); ra.setDuration(500); //设置动画的时间,不然的话直接就没了,没有视觉效果 ra.setFillAfter(true); //动画停留在完成的状态 view.startAnimation(ra); //启动动画 } public static void showView(View view) { //参数解释:第一个蚕食是从多少开始,第二个是旋转多少度,第三个以及第四个是相对于控件来说,旋转中心的位置,即控件宽度的一半以及高度 RotateAnimation ra=new RotateAnimation(180,360,view.getWidth()/2,view.getHeight()); ra.setDuration(500); //设置动画的时间,不然的话直接就没了,没有视觉效果 ra.setFillAfter(true); //动画停留在完成的状态 view.startAnimation(ra); //启动动画 } }
3、MainActivity.java
package com.yuanlp.youkudemo; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.widget.ImageView; import android.widget.RelativeLayout; public class MainActivity extends AppCompatActivity { private ImageView icon_home; private ImageView icon_menu; private RelativeLayout level1; private RelativeLayout level2; private RelativeLayout level3; //定义一个状态,来控制level3是否显示 private boolean isShowLevel3=true; //定义一个状态,来控制level2是否显示 private boolean isShowLevel2=true; //定义一个状态,来控制level1是否显示 private boolean isShowLevel1=true; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); level1= (RelativeLayout) findViewById(R.id.level1); level2= (RelativeLayout) findViewById(R.id.level2); level3= (RelativeLayout) findViewById(R.id.level3); icon_home= (ImageView) findViewById(R.id.icon_home); icon_menu= (ImageView) findViewById(R.id.icon_menu); MyOnClickListener myOnClickListener=new MyOnClickListener(); icon_home.setOnClickListener(myOnClickListener); icon_menu.setOnClickListener(myOnClickListener); } class MyOnClickListener implements View.OnClickListener { @Override public void onClick(View v) { switch (v.getId()){ case R.id.icon_home: //如果三级菜单和二级菜单都是现实的,那么把2个都设置隐藏 if (isShowLevel2){ isShowLevel2=false; Tools.hideView(level2); if (isShowLevel3){ isShowLevel3=false; Tools.hideView(level3); } }else{ isShowLevel2=true; Tools.showView(level2); } //如果三级菜单和二级菜单都是隐藏的,就显示二级菜单 break; case R.id.icon_menu: if (isShowLevel3){ //隐藏 isShowLevel3=false; Tools.hideView(level3); }else{ isShowLevel3=true; Tools.showView(level3); } break; } } } }
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。