2.自定义控件：仿老版YouKu菜单

作者: BusyBunny | 来源:发表于2019-05-01 21:23 被阅读0次

效果展示：

仿YouKu.gif

布局：

<?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=".MainActivity">

    <RelativeLayout
        android:id="@+id/iv_level1"
        android:background="@drawable/level1"
        android:layout_width="80dp"
        android:layout_height="40dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true">
        <ImageButton
            android:id="@+id/ib_home"
            android:background="@null"
            android:src="@drawable/icon_home"
            android:layout_alignParentBottom="true"
            android:layout_centerInParent="true"
            android:layout_marginBottom="6dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/iv_level2"
        android:background="@drawable/level2"
        android:layout_width="140dp"
        android:layout_height="70dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true">
        <ImageButton
            android:id="@+id/ib_menu"
            android:background="@null"
            android:src="@drawable/icon_menu"
            android:layout_centerHorizontal="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <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="3dp" />

        <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="3dp" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/iv_level3"
        android:background="@drawable/level3"
        android:layout_width="220dp"
        android:layout_height="110dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true">

        <ImageButton
            android:background="@null"
            android:src="@drawable/channel4"
            android:layout_marginTop="3dp"
            android:layout_centerHorizontal="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />


        <ImageButton
            android:background="@null"
            android:src="@drawable/channel1"
            android:layout_marginTop="3dp"
            android:layout_centerHorizontal="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentBottom="true"
            android:layout_marginLeft="5dp"/>

        <ImageButton
            android:background="@null"
            android:src="@drawable/channel2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_marginTop="45dp"
            android:layout_marginLeft="22dp" />

        <ImageButton
            android:background="@null"
            android:src="@drawable/channel3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_marginTop="15dp"
            android:layout_marginLeft="50dp" />

        <ImageButton
            android:background="@null"
            android:src="@drawable/channel7"
            android:layout_marginTop="3dp"
            android:layout_centerHorizontal="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignParentBottom="true"
            android:layout_marginRight="5dp"/>


        <ImageButton
            android:background="@null"
            android:src="@drawable/channel6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginTop="45dp"
            android:layout_marginRight="22dp" />

        <ImageButton
            android:background="@null"
            android:src="@drawable/channel5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginTop="15dp"
            android:layout_marginRight="50dp" />

    </RelativeLayout>

</RelativeLayout>

Activity:

屏蔽快速点击导致动画闪烁问题：

 //在监听器设置动画数量的增减，在Activity判断动画数量，当动画数量大于0的时候，让点击事件失效，从而快速点击的时候可以屏蔽动画闪烁。
if (MyAnimationUtils.animationCount>0){
     return;
}


//在监听器中设置：
static class MyRotateAnimationListener implements Animation.AnimationListener{

        @Override
        public void onAnimationStart(Animation animation) {
            animationCount++;
        }

        @Override
        public void onAnimationEnd(Animation animation) {
            animationCount--;
        }

        @Override
        public void onAnimationRepeat(Animation animation) {

        }
    }

完整Activity代码：

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private RelativeLayout mIvLevel3,mIvLevel2;
    private boolean isLevel3Show=true;
    private boolean isLevel2Show=true;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initViews();
    }

    private void initViews() {
        findViewById(R.id.ib_home).setOnClickListener(this);
        findViewById(R.id.ib_menu).setOnClickListener(this);
        mIvLevel3=findViewById(R.id.iv_level3);
        mIvLevel2=findViewById(R.id.iv_level2);
    }

    @Override
    public void onClick(View v) {
        long delay=0;
        switch (v.getId()){
            case R.id.ib_menu:
                //利用监听器判断动画数量，当动画数量大于0的时候，让点击事件失效，从而快速点击的时候可以屏蔽动画闪烁。
                if (MyAnimationUtils.animationCount>0){
                    return;
                }
                if (isLevel3Show){
                    MyAnimationUtils.rotateOutAnimation(mIvLevel3,delay);
                }else {
                    MyAnimationUtils.rotateInAnimation(mIvLevel3);
                }
                isLevel3Show=!isLevel3Show;
                break;

            case R.id.ib_home:
                if (MyAnimationUtils.animationCount>0){
                    return;
                }
                //判断二级菜单是否显示：如果二级菜单显示，再判断三级菜单是否显示，如果显示先退出三级菜单，最后再退出二级菜单；
                //如果二级菜单不显示，点击按钮后则让二级菜单显示；
                if (isLevel2Show){
                    if (isLevel3Show){
                        MyAnimationUtils.rotateOutAnimation(mIvLevel3,delay);
                        delay+=200;
                        isLevel3Show=false;
                    }
                    MyAnimationUtils.rotateOutAnimation(mIvLevel2,delay);
                }else {
                    MyAnimationUtils.rotateInAnimation(mIvLevel2);
                }
                isLevel2Show=!isLevel2Show;
                break;
        }
    }
}

MyAnimationUtils

public class MyAnimationUtils {
    public static int animationCount=0;
    public static void rotateInAnimation(ViewGroup viewGroup){
        //屏蔽补间动画的仍存在原位置的弊端：
        int childCount = viewGroup.getChildCount();
        for (int i=0;i<childCount;i++){
            viewGroup.getChildAt(i).setEnabled(true);
        }

        RotateAnimation rotateAnimation=new RotateAnimation(
                -180f,0f,
                Animation.RELATIVE_TO_SELF,0.5f,
                Animation.RELATIVE_TO_SELF,1.0f
        );
        rotateAnimation.setDuration(500);
        rotateAnimation.setFillAfter(true);
        rotateAnimation.setAnimationListener(new MyRotateAnimationListener());
        viewGroup.startAnimation(rotateAnimation);
    }

    public static void rotateOutAnimation(ViewGroup viewGroup,long delay){
        int childCount = viewGroup.getChildCount();
        for (int i=0;i<childCount;i++){
            viewGroup.getChildAt(i).setEnabled(false);
        }

        RotateAnimation rotateAnimation=new RotateAnimation(
                0f,-180f,
                Animation.RELATIVE_TO_SELF,0.5f,
                Animation.RELATIVE_TO_SELF,1.0f
        );
        rotateAnimation.setDuration(500);
        rotateAnimation.setAnimationListener(new MyRotateAnimationListener());
        //设置动画延时：
        rotateAnimation.setStartOffset(delay);
        //让控件停留在动画最后的位置：
        rotateAnimation.setFillAfter(true);
        viewGroup.startAnimation(rotateAnimation);
    }

    static class MyRotateAnimationListener implements Animation.AnimationListener{

        @Override
        public void onAnimationStart(Animation animation) {
            animationCount++;
        }

        @Override
        public void onAnimationEnd(Animation animation) {
            animationCount--;
        }

        @Override
        public void onAnimationRepeat(Animation animation) {

        }
    }
}

总结：

在监听器中设置动画数量，然后在Activity中判断动画数量来屏蔽因快速点击按钮而造成动画闪烁；
屏蔽布局的所有子控件的点击效果，从而避免补间动画仍存留在原来位置的弊端；

2.自定义控件：仿老版YouKu菜单

效果展示：

布局：

Activity:

MyAnimationUtils

总结：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读