自定义菜单收起展开动画

时间：2016-05-05 16:05:59 阅读：232 评论：0 收藏：0 [点我收藏+]

标签：

最近需求sama联合美工娘娘又改了界面，整体的界面是华丽了不少，但是大神何必为难弱智儿童的我呢，下面先看看新界面~

很经典的菜单设计，不过毕竟是版本更迭，不适合在原有基础上大修改改，菜单总共分了4个父菜单和若干个子菜单，点击父菜单会隐藏子菜单，其中还要有收起展开动画，这个首先令我想起了expanedlistview。说动手就动手，花了几分钟先写个demo测试以下吧。

<?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"
    >

    <ExpandableListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/exlistview"
        ></ExpandableListView>

</RelativeLayout>

这个很简单的布局代码，不必多说了~

然后定义一个实体类，包含父子菜单所必需的内容

public class Bean {

    public Bean(String title, List<childBean> childBeans) {
        this.title = title;
        this.childBeans = childBeans;
    }

    public Bean() {
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public List<childBean> getChildBeans() {
        return childBeans;
    }

    public void setChildBeans(List<childBean> childBeans) {
        this.childBeans = childBeans;
    }

    private String title;
    private List<childBean> childBeans;



    public static class childBean{
        private String title;

        public childBean(String title) {
            this.title = title;
        }

        public String getTitle() {
            return title;
        }

        public void setTitle(String title) {
            this.title = title;
        }
    }

}

这几行代码也不必多说，一目了然，如果需要添加其他的自然也可以自己添加~

最后开始写自定义adapter了，也很简单不是吗？

public class TestAdapter extends BaseExpandableListAdapter {
    private List<Bean> groups;
    private Context context;

    public TestAdapter( Context context, List<Bean> groups){
        this.context=context;
        this.groups=groups;

    }

    @Override
    public int getGroupCount() {
        return groups.size();
    }

    @Override
    public int getChildrenCount(int groupPosition) {
        return  groups.get(groupPosition).getChildBeans().size();
    }

    @Override
    public Object getGroup(int groupPosition) {
        return groups.get(groupPosition);
    }

    @Override
    public Object getChild(int groupPosition, int childPosition) {
        return groups.get(groupPosition).getChildBeans().get(childPosition);
    }

    @Override
    public long getGroupId(int groupPosition) {
        return groupPosition;
    }

    @Override
    public long getChildId(int groupPosition, int childPosition) {
        return childPosition;
    }

    @Override
    public boolean hasStableIds() {
        return false;
    }

    @Override
    public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
        View view= LayoutInflater.from(context).inflate(R.layout.item_a,null);
        TextView tv= (TextView) view.findViewById(R.id.a_text);
        tv.setText(groups.get(groupPosition).getTitle());
        return view;
    }

    @Override
    public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {
        View view= LayoutInflater.from(context).inflate(R.layout.item_a,null);
        TextView tv= (TextView) view.findViewById(R.id.a_text);
        tv.setText(groups.get(groupPosition).getChildBeans().get(childPosition).getTitle());
        return view;
    }

    @Override
    public boolean isChildSelectable(int groupPosition, int childPosition) {
        return false;
    }


}

很简单的代码，毕竟只是demo，大家就将就一下看看，最后在activity里调用一下，我们来看效果吧~

public class MainActivity extends AppCompatActivity {
    private ExpandableListView listView;
    private List<Bean> mList=new ArrayList<>();
    private List<Bean.childBean> childList=new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        listView= (ExpandableListView) findViewById(R.id.exlistview);
        Bean.childBean childBean;
        for(int j=0;j<3;j++){
            childBean=new Bean.childBean("aaaa"+j);
            childList.add(childBean);
        }
        for(int i=0;i<3;i++){
            mList.add(new Bean(i+"",childList));
        }
        TestAdapter adapter=new TestAdapter(MainActivity.this,mList);
        listView.setAdapter(adapter);
        listView.setGroupIndicator(null);
    }
}

最后上动图看效果：

太粗糙了，而且没有收起展开的动画，没办法，继续百度吧，然后找到了一个叫animationExpanedListView的东东，但是我感觉比较久远了，上次更新已经2年之前了，有想实验的小伙伴可以去这里---->https://github.com/idunnololz/AnimatedExpandableListView。

怎么办呢，看来只有自己想办法了。首先屡清楚思路，模仿listview的效果可以试试，所以首先写一个自定义的adapter出来~

public abstract class SettingsAdapter<T> {
    private Context context;
    private List<T> mList;

    public SettingsAdapter(Context context, List<T> mList){
        this.context=context;
        this.mList=mList;
    }
    public SettingsAdapter(T[] mDatas){
        mList=new ArrayList<T>(Arrays.asList(mDatas));
    }
    public int getCount(){
        return mList==null?0:mList.size();
    }
    public T getItem(int position){
        return  mList.get(position);
    }
    public void notifyDataSetChanged(){
        onDataChanged.changed();
    }

    public abstract View getView(SettingView parent, int position);

    public interface onDataChanged {
        void changed();
    }

    public void setOnDataChanged(onDataChanged onDataChanged) {
        this.onDataChanged = onDataChanged;
    }

    public onDataChanged onDataChanged;

}

这一段代码很容易理解，跟普通的adapter没有啥不一样的~继续向下我们要实现子菜单的布局，首先我们继承linearlayout，因为菜单毕竟是自上向下的嘛~

public  class SettingView extends LinearLayout implements SettingsAdapter.onDataChanged{
    private Context context;
    private SettingsAdapter adapter;


    public SettingView(Context context) {
        this(context, null);
    }

    public SettingView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public SettingView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context=context;
        setOrientation(VERTICAL);
    }

接下来我们公开一个adapter调用的方法用法调用adapter；

public void setAdapter(SettingsAdapter adapter){
    this.adapter=adapter;
    changeAdapter();
}

这依然是很简单的代码。我们接下来看changeAdapter里面的内容

private void changeAdapter() {
    removeAllViews();
    SettingsAdapter settingsAdapter = this.adapter;
    for(int i=0;i<settingsAdapter.getCount();i++){
        final View layout = settingsAdapter.getView(this, i);
        layout.setTag(i);
        addView(layout);
        layout.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if(onItemClick!=null){
                    onItemClick.click(v,(Integer) layout.getTag());
                }

            }
        });
    }
}

一目了然是不是，如果看不懂没关系，那就多看几遍，如果多看几遍还是看不懂，也没关系，其实我也不懂。

最后我们通过接口回调将接口公布出去，这是我们的接口以及实现的adapter中接口：

public interface OnItemClick {
    void click(View v,int i);
}

public void setOnItemClick(OnItemClick onItemClick) {
    this.onItemClick = onItemClick;
}

private OnItemClick onItemClick;



@Override
public void changed() {
    changeAdapter();

}

最后在xml中的布局就是这样子的：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

   <!-- <ExpandableListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/exlistview"
        ></ExpandableListView>-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@android:color/holo_red_dark"
        android:text="1111111111111111111"
        android:textSize="20sp"
        android:gravity="center"
        android:id="@+id/tv1"
        />
    <com.example.mydemo.SettingView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/test_layout"
        />

</LinearLayout>

Textview暂时充当的是父菜单，settingview就是子菜单咯~

  tv= (TextView) findViewById(R.id.tv1);
    sv= (SettingView) findViewById(R.id.test_layout);
    for(int i=0;i<5;i++){
        mList.add(i+"");
    }
    SettingsAdapter adapter=new SettingsAdapter(MainActivity.this,mList) {
        @Override
        public View getView(SettingView parent, int position) {
            View view=getLayoutInflater().inflate(R.layout.item_a,null);
           TextView tv= (TextView) view.findViewById(R.id.a_text);
            tv.setText(mList.get(position));
            return view;
        }



    };
    sv.setAdapter(adapter);
    sv.setOnItemClick(new SettingView.OnItemClick() {
        @Override
        public void click(View v,int i) {
            Toast.makeText(MainActivity.this,mList.get(i),Toast.LENGTH_SHORT).show();
        }
    });
}

最后在activity里敲这些很简单的代码，差不多第一步的自定义布局就算实现了。看效果

布局是写好了，但是暂时还没有任何的点击效果和动画效果，这时候想到了什么呢，属性动画，当当当~不过objectAnimator里并没有对View高度的动画，不过我们知道valueAnimator是可以实现这个的，不多说看代码~

public static ValueAnimator DropAnim(final View view,int start,int end){
    ValueAnimator animator=ValueAnimator.ofInt(start,end);
    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            int value= (Integer) animation.getAnimatedValue();
            ViewGroup.LayoutParams lp = view.getLayoutParams();
            lp.height=value;
            view.setLayoutParams(lp);
        }
    });
    return  animator;
}

首先，我们需要把target的view 和view的起始高度传起来，最后通过动画的listener实现对view高度的动态变化，看到这里是不是有些思路了~~~

public static void animatorOpen(final View view, int height){
    view.setVisibility(View.VISIBLE);
    AnimatorSet set=new AnimatorSet();
    set.setDuration(1000);
    ValueAnimator animator = DropAnim(view, 0, height);
    ObjectAnimator oa=ObjectAnimator.ofFloat(view, View.ALPHA, 0.0f, 1.0f);
    set.playTogether(animator,oa);
    set.setDuration(1000);
    set.start();
}
public static void animatorClose(final View view, int height){
    AnimatorSet set=new AnimatorSet();
    set.setDuration(1000);
    ValueAnimator animator = DropAnim(view, height,0);
    ObjectAnimator oa=ObjectAnimator.ofFloat(view,View.ALPHA,1.0f,0.0f);
    set.playTogether(animator,oa);
    set.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            super.onAnimationEnd(animation);
            view.setVisibility(View.GONE);
        }
    });
    set.start();
}

这是动画开关的两个方法，方法大致相同，我们不仅实现了高度的变化，而且加入了透明度的变化，当然你也可以加入一些其他的动画，这里就不多做介绍了。

最后在在点击事件中通过判断子菜单的vissable来判断动画的开合，是不是很简单呢？最后的一个难点是获取view的高度，我们并没有在自定义的布局里直接获取到他的高度，当然你也可以在自定义view的时候直接通过 getMeasuredHeight() 的方法获得出来，当然也可以通过post方法进行获取

sv.post(new Runnable() {
    @Override
    public void run() {
        height=sv.getHeight();
    }
});
tv.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        if(sv.getVisibility()==View.VISIBLE){
            AnimUtils.animatorClose(sv,height);
        }else{
            AnimUtils.animatorOpen(sv,height);
        }
    }
});

最后大功告成~来看一下动画效果吧~

是不是很炫呢？最后有一个小问题，就是如何在fragment中获取控件的高度呢，起初我也是傻傻的post方法，然并卵的是然并卵啊~最后还是找到了答案~通过

ViewTreeObserver来获取，然后在点击或者初始化完成之后进行移除监听，不然他会一直监听控件的高度，切记，移除这个监听，必须放在动画之前，否则会出现意想不到的彩蛋呢~

技术分享

好了，第一篇博客大功告成，我要去水群了~~~~大家再见·~~~~~

自定义菜单收起展开动画

标签：

原文地址：http://blog.csdn.net/aa4100123/article/details/51321240

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行