1.普通带旋转回弹的菜单
image.png
image.png
1.导入素材
2.activity_main.xml配置
<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="MainActivity">
<ImageButton
android:id="@+id/b"
style="@style/MenuBtnStyle"
android:src="@drawable/b"/>
<ImageButton
android:id="@+id/c"
style="@style/MenuBtnStyle"
android:src="@drawable/c"/>
<ImageButton
android:id="@+id/d"
style="@style/MenuBtnStyle"
android:src="@drawable/d"/>
<ImageButton
android:id="@+id/e"
style="@style/MenuBtnStyle"
android:src="@drawable/e"/>
<ImageButton
android:id="@+id/f"
style="@style/MenuBtnStyle"
android:src="@drawable/f"/>
<ImageButton
android:id="@+id/g"
style="@style/MenuBtnStyle"
android:src="@drawable/g"/>
<ImageButton
android:id="@+id/h"
style="@style/MenuBtnStyle"
android:src="@drawable/h"/>
<ImageButton
android:id="@+id/a"
style="@style/MenuBtnStyle"
android:src="@drawable/a"/>
</RelativeLayout>
3.btn_style.xml
<resources>
<style name="MenuBtnStyle">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:background">@null</item>
<item name="android:layout_alignParentBottom">true</item>
<item name="android:layout_centerHorizontal">true</item>
</style>
</resources>
4.MainActivity
public class MainActivity extends AppCompatActivity {
private int[] resId = {R.id.b, R.id.c, R.id.d, R.id.e};
private boolean isOpen = false;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
//给菜单按钮添加点击事件
ImageButton menu = findViewById(R.id.a);
menu.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//遍历数组 取出每一个按钮
for (int i = 0; i < resId.length; i++) {
//判断是打开 还是关闭
if (isOpen == true) {
//之前是打开 现在需要关闭
close(i);
} else {
//之前是关闭的 现在需要打开
open(i);
}
}
isOpen = !isOpen;
}
});
}
public void open(int i) {
animate(i, true);
}
public void close(int i) {
animate(i, false);
}
public void animate(int i, boolean state) {
//计算平分之后的两个之间的角度
double angle = (Math.PI / (resId.length + 1));
//获取id对应控件
ImageButton ib = findViewById(resId[i]);
//计算当前控件对应的角度
double mAngle = (i + 1) * angle;
//计算x距离
float x = (float) (Math.cos(mAngle) * 400);
//计算y距离
float y = (float) (Math.sin(mAngle) * 400);
float startx;
float tox;
float starty;
float toy;
Interpolator interpolator;
if (state == true) {
startx = 0;
starty = 0;
tox = x;
toy = -y;
interpolator = new BounceInterpolator();
} else {
startx = x;
starty = -y;
tox = 0;
toy = 0;
interpolator = new AnticipateInterpolator();
}
//移动的动画
TranslateAnimation tAnim = new TranslateAnimation(
startx, tox, starty, toy);
tAnim.setDuration(500);
tAnim.setInterpolator(interpolator);
//旋转动画
RotateAnimation rAnim = new RotateAnimation(0, 360 * 3,
Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);
rAnim.setDuration(500);
//创建一个AnimationSet集合 包裹多个动画
AnimationSet set = new AnimationSet(false);
set.setFillAfter(true);
set.addAnimation(rAnim);
set.addAnimation(tAnim);
//开始动画
ib.startAnimation(set);
}
}
2.有层级的菜单
image.png
image.png
image.png
1.导入素材
2.activity_main.xml配置
<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=".MainActivity">
<RelativeLayout
android:layout_width="100dp"
android:layout_height="50dp"
android:background="@drawable/level1"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
>
<ImageButton
android:id="@+id/ib_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/icon_home"
android:background="@null"
android:layout_centerInParent="true"
/>
</RelativeLayout>
<RelativeLayout
android:id="@+id/rl_level2"
android:layout_width="200dp"
android:layout_height="100dp"
android:background="@drawable/level2"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
>
<ImageButton
android:id="@+id/ib_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/icon_menu"
android:background="@null"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/icon_search"
android:background="@null"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:layout_marginLeft="5dp"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/icon_myyouku"
android:background="@null"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_marginRight="5dp"/>
</RelativeLayout>
<RelativeLayout
android:id="@+id/rl_level3"
android:layout_width="300dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_height="150dp"
android:background="@drawable/level3"
>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/channel1"
android:background="@null"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:layout_marginLeft="5dp"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/channel7"
android:background="@null"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_marginRight="5dp"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/channel2"
android:background="@null"
android:layout_marginLeft="25dp"
android:layout_marginTop="60dp"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/channel6"
android:background="@null"
android:layout_alignParentRight="true"
android:layout_marginRight="25dp"
android:layout_marginTop="60dp"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/channel3"
android:background="@null"
android:layout_marginLeft="60dp"
android:layout_marginTop="20dp"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/channel5"
android:background="@null"
android:layout_alignParentRight="true"
android:layout_marginRight="60dp"
android:layout_marginTop="20dp"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/channel4"
android:background="@null"
android:layout_centerHorizontal="true"
android:layout_marginTop="2dp"/>
</RelativeLayout>
</RelativeLayout>
3.管理旋转的xml文件
rotate_in_anim.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:duration="700">
<rotate android:fromDegrees="180"
android:toDegrees="0"
android:pivotX="50%"
android:pivotY="100%"
/>
</set>
rotate_out_anim.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:duration="700">
<rotate android:fromDegrees="0"
android:toDegrees="-180"
android:pivotX="50%"
android:pivotY="100%"
/>
</set>
4.MainActivity
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
//记录第三层菜单的状态
private boolean islevel3Open = true;
private boolean islevel2Open=true;
private RelativeLayout level3;
private RelativeLayout level2;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//加载容器
level3 = findViewById(R.id.rl_level3);
level2=findViewById(R.id.rl_level2);
//menu按钮
ImageButton menu = findViewById(R.id.ib_menu);
ImageButton home=findViewById(R.id.ib_home);
//添加点击事件
menu.setOnClickListener(this);
home.setOnClickListener(this);
}
@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.ib_menu:
if (islevel3Open) {
//关闭
close(level3,0);
} else {
open(level3);
}
islevel3Open = !islevel3Open;
break;
case R.id.ib_home:
if(islevel3Open){
//关闭第三层菜单
close(level3,0);
islevel3Open=false;
}if(islevel2Open){
close(level2,100);
}else{
open(level2);
}
islevel2Open=!islevel2Open;
break;
default:
break;
}
}
public void open(RelativeLayout rl) {
Animation in = AnimationUtils.loadAnimation(this, R.anim.rotate_in_anim);
rl.startAnimation(in);
//子控件可点击
changeState(rl,true);
}
public void close(RelativeLayout rl,long delay ) {
Animation out=AnimationUtils.loadAnimation(this,R.anim.rotate_out_anim);
out.setStartOffset(delay);
rl.startAnimation(out);
//子控件不可点击
changeState(rl,false);
}
public void changeState(RelativeLayout rl,boolean enable){
//1.获取容器子控件的个数
int childCount=rl.getChildCount();
//2.遍历容器的子控件
for (int i = 0; i <childCount ; i++) {
//取出对应的子控件
View v=rl.getChildAt(i);
//设置子控件的状态
v.setEnabled(enable);
}
}
}
心得
更加熟悉了补间动画，对控件相关属性的控制也变得更加了解
