文章原址

demo.gif

這種效果的實現這里是采用自定義ExpandableListView，給它設置一個指示布局，在滑動過程中監聽當前是否應該懸浮顯示分類來實現的

• 自定義CustomExpandListview 繼承ExpandableListView
• 定義一個BaseExpandableListAdapter 填充父類 子類的的數據
• activity 使用
• layout布局 都是一個textview

(3) activity

• 在xml中聲明自定義ExpandableListView

• 聲明數據源相關

 private String[] parentSource = {"分類1", "分類2", "分類3", "分類4", "分類5"};
    private ArrayList<String> parent = new ArrayList<>();
    private Map<String, ArrayList<String>> datas = new HashMap<>();

• 初始化演示數據

 //模擬數據
        for (int i = 0; i < parentSource.length; i++) {
            parent.add(parentSource[i]);
        }

        for (int i = 0; i < parent.size(); i++) {
            String str = parent.get(i);
            ArrayList<String> temp = new ArrayList<>();
            for (int j = 0; j < 20; j++) {
                temp.add("" + j);
            }
            datas.put(str, temp);
        }

• 初始化Adapter以及使用

myAdapter = new MyAdapter(this, parent, datas, list view);
listview.setAdapter(myAdapter);

• 設置懸浮提示布局

listview.setHeaderView(getLayoutInflater().inflate(        R.layout.indictor_layout, listview, false));

(1)CustomExpandListview

public class CustomExpandListview extends ExpandableListView implements
        AbsListView.OnScrollListener, ExpandableListView.OnGroupClickListener {
    public CustomExpandListview(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        registerListener();
    }

    public CustomExpandListview(Context context, AttributeSet attrs) {
        super(context, attrs);
        registerListener();
    }

    public CustomExpandListview(Context context) {
        super(context);
        registerListener();
    }

    /**
     * Adapter 接口 . 列表必須實現此接口 .
     */
    public interface HeaderAdapter {
        public static final int PINNED_HEADER_GONE = 0;
        public static final int PINNED_HEADER_VISIBLE = 1;
        public static final int PINNED_HEADER_PUSHED_UP = 2;

        /**
         * 獲取 Header 的狀態
         *
         * @param groupPosition
         * @param childPosition
         * @return PINNED_HEADER_GONE, PINNED_HEADER_VISIBLE, PINNED_HEADER_PUSHED_UP
         * 其中之一
         */
        int getHeaderState(int groupPosition, int childPosition);

        /**
         * @param header
         * @param groupPosition
         * @param childPosition
         * @param alpha
         */
        void configureHeader(View header, int groupPosition,
                             int childPosition, int alpha);

    }

    private static final int MAX_ALPHA = 255;

    private HeaderAdapter mAdapter;

    /**
     * 用于在列表頭顯示的 View,mHeaderViewVisible 為 true 才可見
     */
    private View mHeaderView;

    /**
     * 列表頭是否可見
     */
    private boolean mHeaderViewVisible;

    private int mHeaderViewWidth;

    private int mHeaderViewHeight;

    public void setHeaderView(View view) {
        mHeaderView = view;
        AbsListView.LayoutParams lp = new AbsListView.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.WRAP_CONTENT);
        view.setLayoutParams(lp);

        if (mHeaderView != null) {
            setFadingEdgeLength(0);
        }

        requestLayout();
    }


    private void registerListener() {
        setOnScrollListener(this);
        setOnGroupClickListener(this);
    }

    /**
     * 點擊 HeaderView 觸發的事件
     */
    private void headerViewClick() {
        long packedPosition = getExpandableListPosition(this
                .getFirstVisiblePosition());
        int groupPosition = ExpandableListView
                .getPackedPositionGroup(packedPosition);
        this.collapseGroup(groupPosition);
        this.setSelectedGroup(groupPosition);
    }

    private float mDownX;
    private float mDownY;

    /**
     * 如果 HeaderView 是可見的 , 此函數用于判斷是否點擊了 HeaderView, 并對做相應的處理 , 因為 HeaderView
     * 是畫上去的 , 所以設置事件監聽是無效的 , 只有自行控制 .
     */
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        if (mHeaderViewVisible) {
            switch (ev.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    mDownX = ev.getX();
                    mDownY = ev.getY();
                    if (mDownX <= mHeaderViewWidth && mDownY <= mHeaderViewHeight) {
                        return true;
                    }
                    break;
                case MotionEvent.ACTION_UP:
                    float x = ev.getX();
                    float y = ev.getY();
                    float offsetX = Math.abs(x - mDownX);
                    float offsetY = Math.abs(y - mDownY);
                    // 如果 HeaderView 是可見的 , 點擊在 HeaderView 內 , 那么觸發 headerClick()
                    if (x <= mHeaderViewWidth && y <= mHeaderViewHeight
                            && offsetX <= mHeaderViewWidth
                            && offsetY <= mHeaderViewHeight) {
                        if (mHeaderView != null) {
                            headerViewClick();
                        }

                        return true;
                    }
                    break;
                default:
                    break;
            }
        }

        return super.onTouchEvent(ev);

    }

    @Override
    public void setAdapter(ExpandableListAdapter adapter) {
        super.setAdapter(adapter);
        mAdapter = (HeaderAdapter) adapter;
    }

    /**
     * 點擊了 Group 觸發的事件 , 要根據根據當前點擊 Group 的狀態來
     */
    @Override
    public boolean onGroupClick(ExpandableListView parent, View v,
                                int groupPosition, long id) {
        if (isGroupExpanded(groupPosition)) {
            parent.collapseGroup(groupPosition);
        } else {
            parent.expandGroup(groupPosition);
        }

        return true;

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        if (mHeaderView != null) {
            measureChild(mHeaderView, widthMeasureSpec, heightMeasureSpec);
            mHeaderViewWidth = mHeaderView.getMeasuredWidth();
            mHeaderViewHeight = mHeaderView.getMeasuredHeight();
        }
    }

    private int mOldState = -1;

    @Override
    protected void onLayout(boolean changed, int left, int top, int right,
                            int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        final long flatPostion = getExpandableListPosition(getFirstVisiblePosition());
        final int groupPos = ExpandableListView
                .getPackedPositionGroup(flatPostion);
        final int childPos = ExpandableListView
                .getPackedPositionChild(flatPostion);
        int state = mAdapter.getHeaderState(groupPos, childPos);
        if (mHeaderView != null && mAdapter != null && state != mOldState) {
            mOldState = state;
            mHeaderView.layout(0, 0, mHeaderViewWidth, mHeaderViewHeight);
        }

        configureHeaderView(groupPos, childPos);
    }

    public void configureHeaderView(int groupPosition, int childPosition) {
        if (mHeaderView == null || mAdapter == null
                || ((ExpandableListAdapter) mAdapter).getGroupCount() == 0) {
            return;
        }

        int state = mAdapter.getHeaderState(groupPosition, childPosition);

        switch (state) {
            case HeaderAdapter.PINNED_HEADER_GONE: {
                mHeaderViewVisible = false;
                break;
            }

            case HeaderAdapter.PINNED_HEADER_VISIBLE: {
                mAdapter.configureHeader(mHeaderView, groupPosition,
                        childPosition, MAX_ALPHA);

                if (mHeaderView.getTop() != 0) {
                    mHeaderView.layout(0, 0, mHeaderViewWidth, mHeaderViewHeight);
                }

                mHeaderViewVisible = true;
                break;
            }

            case HeaderAdapter.PINNED_HEADER_PUSHED_UP: {
                View firstView = getChildAt(0);
                int bottom = firstView.getBottom();

                // intitemHeight = firstView.getHeight();
                int headerHeight = mHeaderView.getHeight();

                int y;

                int alpha;

                if (bottom < headerHeight) {
                    y = (bottom - headerHeight);
                    alpha = MAX_ALPHA * (headerHeight + y) / headerHeight;
                } else {
                    y = 0;
                    alpha = MAX_ALPHA;
                }

                mAdapter.configureHeader(mHeaderView, groupPosition,
                        childPosition, alpha);

                if (mHeaderView.getTop() != y) {
                    mHeaderView.layout(0, y, mHeaderViewWidth, mHeaderViewHeight
                            + y);
                }

                mHeaderViewVisible = true;
                break;
            }
        }
    }

    @Override
    /**
     * 列表界面更新時調用該方法(如滾動時)
     */
    protected void dispatchDraw(Canvas canvas) {
        super.dispatchDraw(canvas);
        if (mHeaderViewVisible) {
            // 分組欄是直接繪制到界面中，而不是加入到ViewGroup中
            drawChild(canvas, mHeaderView, getDrawingTime());
        }
    }

    @Override
    public void onScroll(AbsListView view, int firstVisibleItem,
                         int visibleItemCount, int totalItemCount) {
        final long flatPos = getExpandableListPosition(firstVisibleItem);
        int groupPosition = ExpandableListView.getPackedPositionGroup(flatPos);
        int childPosition = ExpandableListView.getPackedPositionChild(flatPos);

        configureHeaderView(groupPosition, childPosition);
    }

    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {
    }
}

（2）adapter

public class MyAdapter extends BaseExpandableListAdapter implements CustomExpandListview.HeaderAdapter {

    private ArrayList<String> parent;
    private Map<String, ArrayList<String>> datas = new HashMap<>();
    private Context context;
    private CustomExpandListview listview;

    public MyAdapter(Context context, ArrayList<String> parent, Map<String, ArrayList<String>> datas, CustomExpandListview listview) {
        this.context = context;
        this.parent = parent;
        this.datas = datas;
        this.listview = listview;
    }

    @Override
    public int getGroupCount() {
        int temp = 0;
        if (parent != null) {
            temp = parent.size();
        }
        return temp;
    }

    @Override
    public int getChildrenCount(int i) {
        String key = parent.get(i);
        int size = datas.get(key).size();
        return size;
    }

    @Override
    public Object getGroup(int i) {
        return parent.get(i);
    }

    @Override
    public Object getChild(int i, int i1) {
        String key = parent.get(i);
        return (datas.get(key).get(i1));
    }

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

    @Override
    public long getChildId(int i, int i1) {
        return i1;
    }

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

    @Override
    public View getGroupView(int i, boolean b, View view, ViewGroup viewGroup) {
        if (view == null) {
            LayoutInflater inflater = (LayoutInflater) context
                    .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            view = inflater.inflate(R.layout.parent_layout, null);
        }
        TextView tv = (TextView) view
                .findViewById(R.id.tv_parent);
        tv.setText(parent.get(i));
        return view;
    }

    @Override
    public View getChildView(int i, int i1, boolean b, View view, ViewGroup viewGroup) {

        PlaceHolder holder;
        if (view == null) {
            holder = new PlaceHolder();
            view = LayoutInflater.from(context).inflate(R.layout.item_layout, null);
            holder.tv_title = (TextView) view.findViewById(R.id.tv_item);
            view.setTag(holder);
        } else {
            holder = (PlaceHolder) view.getTag();
        }
        String key = parent.get(i);
        String s = datas.get(key).get(i1);
        holder.tv_title.setText(s);
        return view;
    }

    @Override
    public boolean isChildSelectable(int i, int i1) {
        return true;
    }

    /**
     *根據當前的groupPosition和childPosition判斷指示布局是哪種狀態（隱藏、可見、正在向上推）
     * @param groupPosition
     * @param childPosition
     * @return
     */
    @Override
    public int getHeaderState(int groupPosition, int childPosition) {
        final int childCount = getChildrenCount(groupPosition);
        if (childPosition == childCount - 1) {
            return PINNED_HEADER_PUSHED_UP;
        } else if (childPosition == -1
                && !listview.isGroupExpanded(groupPosition)) {
            return PINNED_HEADER_GONE;
        } else {
            return PINNED_HEADER_VISIBLE;
        }
    }

    /**
     * 給指示布局設置內容
     * @param header
     * @param groupPosition
     * @param childPosition
     * @param alpha
     */
    @Override
    public void configureHeader(View header, int groupPosition, int childPosition, int alpha) {
        if (groupPosition > -1) {
            ((TextView) header.findViewById(R.id.tv_indictor))
                    .setText(parent.get(groupPosition));
        }
    }


    /**
     * 子布局
     */
    private class PlaceHolder {
        private TextView tv_title;
    }
}