Android仿印象笔记的自定义菜单控件

Android仿印象笔记的自定义菜单控件
- 导读
- 效果图
- 准备图片资源
- 自定义控件attr属性
- 在XML文件中使用自定义控件
- 编写MyMenu类
  - MyMenu类的构造方法
  - onMeasure方法
  - onLayout方法
  - toggleMenu方法
  - menuItemAnim方法
- 在MainActivity中调用自定义菜单
  - mymenu_right_bottom
  - activity_main的代码如下
  - MainActivity
- 后记

导读

今天在慕课网上看到一篇视频教程，Android实现卫星菜单，感觉效果非常炫酷，想到印象笔记添加笔记的菜单也可以通过这种方式来实现，点击添加笔记菜单按钮，便会弹出一系列的按钮用于添加不同的笔记。于是自己试着仿照印象笔记的菜单按钮，写出一个自定义的菜单控件。

效果图

先上一下效果图，看看完成后的效果如何

准备图片资源

我们先准备一下自定义菜单所需要的资源。Google发布了Material Design Icons，正好可以被我们拿来用，下载地址Material Design icon合集，选出我们需要的图标拷贝到Android Studio里。

自定义控件attr属性

首先，我们需要编写自定义控件的属性。在values文件夹下添加attr.xml文件，代码如下：

<declare-styleable name="MyMenu">        <attr name="position">            <enum name="left_top" value="0"/>            <enum name="right_top" value="1"/>            <enum name="left_bottom" value="2"/>            <enum name="right_bottom" value="3"/>        </attr>        <attr name="interval" format="dimension"/></declare-styleable>

自定义属性中包含两个属性，第一个是position，记录菜单在屏幕中所处的位置，第二个是interval，记录菜单展开后，每个按钮之间的间隔。

在XML文件中使用自定义控件

在XML文件中使用自定义菜单之前，需要新建MyMenu类，让它继承ViewGroup。实现MyMenu类的构造方法和onLayout方法，确保不报错即可。具体代码请看下一节内容。

新建一个布局文件，Android Studio会自动引用命名空间，所以可以直接写我们的自定义控件。我在自定义控件中增加了一个主按钮ImageView，四个子按钮LinearLayout，具体代码如下所示：

<RelativeLayout  xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent">    <com.phoenix.myapplication.MyMenu  android:layout_width="match_parent" android:layout_height="match_parent" app:interval="100dp" app:position="right_bottom">        <ImageView  android:id="@+id/id_mainButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/ic_add_circle_black_48dp"/>        <LinearLayout  android:id="@+id/id_item1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:tag="item1">            <TextView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="item1"/>            <ImageView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/ic_archive_grey600_48dp"/>        </LinearLayout>        <LinearLayout  android:id="@+id/id_item2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:tag="item2">            <TextView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="item2"/>            <ImageView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/ic_backspace_grey600_48dp"/>        </LinearLayout>        <LinearLayout  android:id="@+id/id_item3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:tag="item3">            <TextView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="item3"/>            <ImageView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/ic_block_grey600_48dp"/>        </LinearLayout>        <LinearLayout  android:id="@+id/id_item4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:tag="item4">            <TextView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="item4"/>            <ImageView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/ic_content_copy_grey600_48dp"/>        </LinearLayout>    </com.phoenix.myapplication.MyMenu></RelativeLayout>

编写MyMenu类

还记得上一节我们写的MyMenu类吗？现在我们来完善它。

MyMenu类的构造方法

需要设置每个菜单按钮的间隔，需要设置菜单的位置，这些都可以通过自定义属性的值获得。别忘了设置默认值，最后要recycle。

onMeasure方法

对每个子控件调用measureChild方法。

onLayout方法

在onLayout方法里，首先需要定位主按钮的位置。定义layoutMainButton方法，判断主按钮在屏幕的哪个角落。
之后，根据主按钮的位置计算子按钮的位置。如果主按钮在顶部，则子按钮的y轴坐标逐渐增加；如果主按钮在顶部，则子按钮的y轴坐标逐渐减少。
在这里可以设置子按钮的Tag，方便日后进行判断操作。

toggleMenu方法

主按钮点击事件，如果菜单处于打开状态，则关闭菜单；如果菜单处于关闭状态，则打开菜单。里面对子按钮增加了动画和动画监听器，在动画结束后设置子按钮是否可见。点击后，需要通过changeStatus方法改变菜单的状态。
在此方法里，通过定义的OnMenuItemClickListener接口，实现子按钮的点击事件。同时，如果回调接口不为0的话，需要实现回调接口里的方法（也可以不实现）。

menuItemAnim方法

子菜单的点击动画，我们点击的Item会有scaleBigAnim（变大，变透明）的动画，而其他Items会有scaleSmallAnim（变小，变透明）的动画。

MyMenu的完整代码如下所示

public class MyMenu extends ViewGroup implements OnClickListener {    //自定义菜单位置    private static final int POS_LEFT_TOP = 0;    private static final int POS_RIGHT_TOP = 1;    private static final int POS_LEFT_BOTTOM = 2;    private static final int POS_RIGHT_BOTTOM = 3;    private Position mPosition = Position.RIGHT_BOTTOM;//菜单位置    private int mInterval;//菜单间隔    private Status mCurrentStatus = Status.CLOSE;//菜单状态    private View mMainButton;//主按钮    private OnMenuItemClickListener mOnMenuItemClickListener;    /** * 菜单状态 */    public enum Status {        OPEN, CLOSE    }    /** * 菜单的位置枚举类 */    public enum Position {        LEFT_TOP, LEFT_BOTTOM, RIGHT_TOP, RIGHT_BOTTOM    }    /** * 点击子菜单项的回调接口 */    public interface OnMenuItemClickListener {        void onClick(View view, int position);    }    public void setOnMenuItemClickListener(OnMenuItemClickListener mOnMenuItemClickListener) {        this.mOnMenuItemClickListener = mOnMenuItemClickListener;    }    public MyMenu(Context context) {        this(context, null);    }    public MyMenu(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public MyMenu(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        //菜单间隔的默认值，转换为标准尺寸        mInterval = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 100, getResources().getDisplayMetrics());        Log.i("test", "mInterval = " + mInterval);        //获取自定义属性        TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.MyMenu, defStyleAttr, 0);        int position = a.getInt(R.styleable.MyMenu_position, POS_RIGHT_BOTTOM);        switch (position) {            case POS_LEFT_TOP:                mPosition = Position.LEFT_TOP;                break;            case POS_LEFT_BOTTOM:                mPosition = Position.LEFT_BOTTOM;                break;            case POS_RIGHT_TOP:                mPosition = Position.RIGHT_TOP;                break;            case POS_RIGHT_BOTTOM:                mPosition = Position.RIGHT_BOTTOM;                break;        }        mInterval = (int) a.getDimension(R.styleable.MyMenu_interval, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 100, getResources().getDisplayMetrics()));        Log.i("test", "mInterval = " + mInterval);        a.recycle();    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        int count = getChildCount();        for (int i = 0; i < count; i++) {            //测量child            measureChild(getChildAt(i), widthMeasureSpec, heightMeasureSpec);        }        super.onMeasure(widthMeasureSpec, heightMeasureSpec);    }    @Override    protected void onLayout(boolean changed, int l, int t, int r, int b) {        if (changed) {            layoutMainButton();            int count = getChildCount();            for (int i = 0; i < count - 1; i++) {                View child = getChildAt(i + 1);//getChildAt(0)是主按钮                child.setVisibility(View.GONE);                child.setTag("Item"+(i+1));                //子菜单顶点坐标间隔                int cl = l;                int ct = mInterval * (i + 1);                int cwidth = child.getMeasuredWidth();                int cheight = child.getMeasuredHeight();                //计算子菜单的坐标                if (mPosition == Position.LEFT_BOTTOM || mPosition == Position.RIGHT_BOTTOM) {                    ct = getMeasuredHeight() - cheight - ct;                }                if (mPosition == Position.RIGHT_TOP || mPosition == Position.RIGHT_BOTTOM) {                    cl = getMeasuredWidth() - cwidth;                }                child.layout(cl, ct, cl + cwidth, ct + cheight);            }        }    }    //主按钮定位函数    private void layoutMainButton() {        mMainButton = getChildAt(0);//获取主按钮        mMainButton.setOnClickListener(this);        int l = 0;//left        int t = 0;//top        int width = mMainButton.getMeasuredWidth();        int height = mMainButton.getMeasuredHeight();        //根据位置，计算左上角的坐标        switch (mPosition) {            case LEFT_TOP:                l = 0;                t = 0;                break;            case LEFT_BOTTOM:                l = 0;                t = getMeasuredHeight() - height;                break;            case RIGHT_TOP:                l = getMeasuredWidth() - width;                t = 0;                break;            case RIGHT_BOTTOM:                l = getMeasuredWidth() - width;                t = getMeasuredHeight() - height;                break;        }        mMainButton.layout(l, t, l + width, t + height);    }    //菜单触发事件    private void toggleMenu(int duration) {        int count = getChildCount();        for (int i = 0; i < count - 1; i++) {            final View childView = getChildAt(i + 1);            childView.setVisibility(View.VISIBLE);            //子菜单结束位置是0，按钮已经在那里了，只需要计算开始的位置            int ct = mInterval * (i + 1);            int yflag = -1;//菜单展开的模式，向上或者向下            if (mPosition == Position.LEFT_BOTTOM || mPosition == Position.RIGHT_BOTTOM) {                yflag = 1;            }            Animation tranAnim = null;            if (mCurrentStatus == Status.OPEN) {                tranAnim = new TranslateAnimation(0, 0, 0, ct * yflag);                childView.setClickable(false);                childView.setFocusable(false);            } else {                tranAnim = new TranslateAnimation(0, 0, ct * yflag, 0);                childView.setClickable(true);                childView.setFocusable(true);            }            tranAnim.setFillAfter(true);            tranAnim.setDuration(duration);            tranAnim.setStartOffset((i * 100) / count);//设置延时            childView.startAnimation(tranAnim);            //动画监听器，动画结束时按钮消失            tranAnim.setAnimationListener(new Animation.AnimationListener() {                @Override                public void onAnimationStart(Animation animation) {                }                @Override                public void onAnimationEnd(Animation animation) {                    if (mCurrentStatus == Status.CLOSE) {                        //参考http://www.cnblogs.com/albert1017/p/4724435.html                        childView.clearAnimation();                        childView.setVisibility(View.GONE);                    }                }                @Override                public void onAnimationRepeat(Animation animation) {                }            });            final int position = i;            childView.setOnClickListener(new OnClickListener() {                @Override                public void onClick(View v) {                    if (mOnMenuItemClickListener!=null) {                        mOnMenuItemClickListener.onClick(childView, position);//回调方法                    }                    menuItemAnim(position);//点击子菜单的动画效果                    changeStatus();                }            });        }        findViewById(R.id.id_mymenu).setAnimation(new AlphaAnimation(0.0f, 1.0f));        changeStatus();    }    //子按钮点击事件    private void menuItemAnim(int position) {        for (int i=0;i<getChildCount()-1;i++) {            View child = getChildAt(i+1);            if (i == position) {                child.startAnimation(scaleBigAnim(300));    // Toast.makeText(getContext(), child.getTag() + "被点击", Toast.LENGTH_SHORT).show();            } else {                child.startAnimation(scaleSmallAnim(300));            }            child.setClickable(false);            child.setFocusable(false);        }    }    //放大动画    private Animation scaleBigAnim(int duration) {        AnimationSet animationSet = new AnimationSet(true);        ScaleAnimation scaleAnim = new ScaleAnimation(1.0f,4.0f,1.0f,4.0f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);        AlphaAnimation alphaAnim = new AlphaAnimation(1.0f,0.0f);        animationSet.addAnimation(scaleAnim);        animationSet.addAnimation(alphaAnim);        animationSet.setDuration(duration);        animationSet.setFillAfter(true);        return animationSet;    }    //缩小动画    private Animation scaleSmallAnim(int duration) {        AnimationSet animationSet = new AnimationSet(true);        ScaleAnimation scaleAnim = new ScaleAnimation(1.0f,0.0f,1.0f,0.0f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);        AlphaAnimation alphaAnim = new AlphaAnimation(1.0f,0.0f);        animationSet.addAnimation(scaleAnim);        animationSet.addAnimation(alphaAnim);        animationSet.setDuration(duration);        animationSet.setFillAfter(true);        return animationSet;    }    //改变菜单状态    private void changeStatus() {        mCurrentStatus = (mCurrentStatus == Status.OPEN ? Status.CLOSE : Status.OPEN);    }    @Override    public void onClick(View v) {        switch (v.getId()) {            case R.id.id_mainButton:                toggleMenu(300);//菜单触发，参数为菜单展开/关闭的时间                break;        }    }}

在MainActivity中调用自定义菜单

在MainActivity中调用自定义控件就和使用别的控件一样，在此之前我们先把MyMenu的布局提取出来，单独放到一个xml文件里。

mymenu_right_bottom

将MyMenu设置成在右下角，从activity_main中将MyMenu的布局代码剪切，放到该文件中，代码如下：

<?xml version="1.0" encoding="utf-8"?>    <com.phoenix.myapplication.MyMenu  android:id="@+id/id_mymenu" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" app:interval="80dp" app:position="right_bottom">    <ImageView  android:id="@+id/id_mainButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/ic_add_circle_black_48dp"/>    <LinearLayout  android:id="@+id/id_item1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:tag="item1">        <TextView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="item1"/>        <ImageView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/ic_archive_grey600_48dp"/>    </LinearLayout>    <LinearLayout  android:id="@+id/id_item2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:tag="item2">        <TextView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="item2"/>        <ImageView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/ic_backspace_grey600_48dp"/>    </LinearLayout>    <LinearLayout  android:id="@+id/id_item3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:tag="item3">        <TextView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="item3"/>        <ImageView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/ic_block_grey600_48dp"/>    </LinearLayout>    <LinearLayout  android:id="@+id/id_item4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:tag="item4">        <TextView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="item4"/>        <ImageView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/ic_content_copy_grey600_48dp"/>    </LinearLayout></com.phoenix.myapplication.MyMenu>

activity_main的代码如下

将MyMenu移除后，activit_main代码如下所示：

<?xml version="1.0" encoding="utf-8"?>    <RelativeLayout  xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/main_background">    <include layout="@layout/mymenu_right_bottom_layout"/></RelativeLayout>

MainActivity

代码如下所示

    public class MainActivity extends AppCompatActivity {    private MyMenu mMyMenu;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mMyMenu = (MyMenu) findViewById(R.id.id_mymenu);        mMyMenu.setOnMenuItemClickListener(new MyMenu.OnMenuItemClickListener() {            @Override            public void onClick(View view, int position) {                Toast.makeText(MainActivity.this,view.getTag()+"被点击",Toast.LENGTH_SHORT).show();            }        });    }}

至此，自定义控件即可完成。

后记

对于Android的回调接口需要加深领悟，在自定义控件中不用实现具体的方法，只需要定义回调接口即可。具体实现可以在使用的时候，通过调用回调接口来实现，增加了自定义控件的复用性。

源代码下载Android仿印象笔记的自定义菜单控件

Android仿印象笔记的自定义菜单控件

Android仿印象笔记的自定义菜单控件

导读

效果图

准备图片资源

自定义控件attr属性

在XML文件中使用自定义控件

编写MyMenu类

MyMenu类的构造方法

onMeasure方法

onLayout方法

toggleMenu方法

menuItemAnim方法

在MainActivity中调用自定义菜单

mymenu_right_bottom

activity_main的代码如下

MainActivity

后记

更多相关文章

随机推荐