带头部可折叠的ListVivew

效果

使用

1.添加依赖

dependencies { compile 'com.zgh.collapsiblelistview:collapsiblelistview:1.0.1' }

2.xml布局

    <com.zgh.collapsiblelistview.CollapsibleListView
        android:id="@+id/clv_3"
        android:layout_width="220dp"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        app:CollapsibleContentColor="#7CFBE1"
        app:CollapsibleDuration="250"
        app:CollapsibleHight="150dp"
        app:CollapsibleTitle="列表三"
        app:CollapsibleCornerRadius="10dp"
        app:CollapsibleTitleTextColor="#000000"
        app:CollapsibleTitleColor="#A4D2D2" />

3.设置adapter与点击事件

 ArrayAdapter<String> adapter;
    CollapsibleListView clv_1,clv_2,clv_3;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        adapter=new ArrayAdapter<String>(this,R.layout.simple_list_item,new String[]{"Item1","Item2","Item3","Item4","Item5","Item6","Item7"});
        clv_1= (CollapsibleListView) this.findViewById(R.id.clv_1);
        clv_1.setAdapter(adapter);
        clv_1.getListview().setOnItemClickListener(new MyOnItemClickListener("first"));

    }

    public  class MyOnItemClickListener implements AdapterView.OnItemClickListener{
        String title;
        public MyOnItemClickListener(String title){
            this.title=title;
        }
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            Toast.makeText(MainActivity.this,title+" "+parent.getAdapter().getItem(position)+" click",Toast.LENGTH_SHORT).show();
        }
    }

属性

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CollapsibleListView">
        <!--标题-->
        <attr name="CollapsibleTitle" format="string" />
        <!--展开listview的高度-->
        <attr name="CollapsibleHight" format="dimension" />
        <!--展开时间-->
        <attr name="CollapsibleDuration" format="integer" />
        <!--标题布局颜色-->
        <attr name="CollapsibleTitleColor" format="color" />
        <!--内容布局颜色-->
        <attr name="CollapsibleContentColor" format="color" />
        <!--圆角-->
        <attr name="CollapsibleCornerRadius" format="dimension" />
        <!--标题文字颜色-->
        <attr name="CollapsibleTitleTextColor" format="color" />
    </declare-styleable>
</resources>

实现

实现的部分没有什么难度，主要讲两点，一个是折叠效果的实现，还有一个是背景的生成

1.折叠效果实现,

通过使用ValueAnimator在动画执行的时候，修改ListView的高度。

 ValueAnimator animatorOpen, animatorClose;

 private void initAnimator() {
        animatorClose = creatAnimator(openHight, 0);
        animatorOpen = creatAnimator(0, openHight);
    }

 private ValueAnimator creatAnimator(int from, int hight) {
        ValueAnimator animator = ValueAnimator.ofInt(from, hight);
        animator.setDuration(openDuration);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                int h = (int) animation.getAnimatedValue();
                ViewGroup.LayoutParams params = listview.getLayoutParams();
                params.height = h;
                listview.setLayoutParams(params);
            }
        });
        animator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationCancel(Animator animation) {
                isAnimatting = false;
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                isOpen = !isOpen;
                Drawable drawable = isOpen ? openDrawable : closeDrawable;
                tv_title.setCompoundDrawables(null, null, drawable, null);
                isAnimatting = false;
            }

            @Override
            public void onAnimationStart(Animator animation) {
                isAnimatting = true;
            }
        });
        return animator;
    }

2.背景生成

由于需要可定制圆角大小，所以不能单纯的直接设置布局的背景色，此处采用的是在解析完属性以后根据属性动态生成ShapeDrawable做完布局的背景

    private static final int DEFAULT_HEIGHT = 150;//dp
    private static final int DEFAULT_DURATION = 500;//ms
    private static final String DEFAULT_TITLE = "标题";
    private static final int DEFAULT_TITLE_COLOR = Color.parseColor("#E14C60");
    private static final int DEFAULT_CONTENT_COLOR = Color.parseColor("#C76C78");
    private static final int DEFAULT_TITLE_TEXT_COLOR = Color.WHITE;
    private static final int DEFAULT_CORNER_RADIUS = 10;
    private Drawable openDrawable, closeDrawable;
    private int titleColor;
    private int contentColor;
    private int cornerRadius = 5;
    private int titleTextColor;

  private void resolveAttrs(Context context, AttributeSet attrs) {
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.CollapsibleListView);
        String title = array.getString(R.styleable.CollapsibleListView_CollapsibleTitle);
        if (title == null) {
            title = DEFAULT_TITLE;
        }
        mTitle = title;
        openHight = (int) array.getDimension(R.styleable.CollapsibleListView_CollapsibleHight, dip2px(getContext(), DEFAULT_HEIGHT));
        openDuration = array.getInt(R.styleable.CollapsibleListView_CollapsibleDuration, DEFAULT_DURATION);
        if (openDuration < 0) {
            openDuration = DEFAULT_DURATION;
        }
        titleColor = array.getColor(R.styleable.CollapsibleListView_CollapsibleTitleColor, DEFAULT_TITLE_COLOR);
        contentColor = array.getColor(R.styleable.CollapsibleListView_CollapsibleContentColor, DEFAULT_CONTENT_COLOR);
        cornerRadius = (int) array.getDimension(R.styleable.CollapsibleListView_CollapsibleCornerRadius, DEFAULT_CORNER_RADIUS);
        titleTextColor = array.getColor(R.styleable.CollapsibleListView_CollapsibleTitleTextColor, DEFAULT_TITLE_TEXT_COLOR);
        array.recycle();
    }

private void initBackground() {
        // 外部矩形弧度
        float[] outerR = new float[8];
        for (int i = 0; i < outerR.length; i++) {
            outerR[i] = cornerRadius;
        }
        RoundRectShape rr = new RoundRectShape(outerR, null, null);
        ShapeDrawable background = new ShapeDrawable(rr);
        //指定填充颜色
        background.getPaint().setColor(contentColor);
        // 指定填充模式
        background.getPaint().setStyle(Paint.Style.FILL);
        findViewById(R.id.ll_back).setBackgroundDrawable(background);
        ShapeDrawable title = new ShapeDrawable(rr);
        title.getPaint().setColor(titleColor);
        title.getPaint().setStyle(Paint.Style.FILL);
        tv_title.setBackgroundDrawable(title);

    }

GitHub

https://github.com/zhuguohui/CollapsibleListViewDemo