教你用兩層ExpandableListView嵌套GridView實現三級展示界面

dqwe7108 8年前發布 | 12K 次閱讀 Android開發移動開發 gridview

寫在前面：

最近項目中使用一個三級展示列表，要求第一級和第二季都可以折疊，并有不同的圖標變換，第三層展示數據，可點擊。經過一盤折騰，算是實現了，效果就在下面：

這里寫圖片描述

思路：

最外層是ExpandableListView，它的子視圖又是一個ExpandableListView,這個子ExpandableListView的子視圖是我們的第三級展示界面，也就是GridView。分析清楚了之后，寫起來就簡單了，下面說說遇到的問題。

1，最外層的ExpandableListView嵌套的子ExpandableListView必須解決顯示不全的問題。

2，在解決了上面的問題后，會發現，最里層的GridView如果不做處理也會出現顯示不全的問題。

3，當上述兩個問題都解決了之后，如果我們把最外層和第二層的ExpandableListView都使用自定義的ExpandableListView時，任然會出現子ExpandableListView顯示不全問題，所以，這兩個ExpandableListView不能使用同一個。

思路和問題都搞定了，我們現在看看主要的類代碼：

這是MainActivity.java初始化方法代碼

public class MainActivity extends AppCompatActivity {

    private ExpandableListView expandableListView;
    private List<String> groupList = new ArrayList<>();
    private ParentExpandAdapter parentExpandAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        initData();
        initView();
    }

    private void initData() {
        for (int i = 0; i < 11; i++) {
            groupList.add("Android工程師之版權 " + (1 + i));
        }
    }

    private void initView() {
        setContentView(R.layout.activity_main);
        expandableListView = (ExpandableListView) findViewById(R.id.expand_main);
        parentExpandAdapter = new ParentExpandAdapter(MainActivity.this, groupList);
        expandableListView.setAdapter(parentExpandAdapter);

        // 被展開組的監聽
        expandableListView.setOnGroupExpandListener(new ExpandableListView.OnGroupExpandListener() {
            @Override
            public void onGroupExpand(int groupPosition) {
                // 保證每次只有一個組是展開狀態
                for (int i = 0; i < parentExpandAdapter.getGroupCount(); i++) {
                    if (i != groupPosition) {
                        expandableListView.collapseGroup(i);
                    }
                }
            }
        });
    }
}

初始化了ExpandableListView，并設置了每次只展開一個組監聽。

ParentExpandAdapter.java代碼

public class ParentExpandAdapter extends BaseExpandableListAdapter {

    private Context context;
    private List<String> parentList;

    public ParentExpandAdapter(Context context, List<String> parentList) {
        this.context = context;
        this.parentList = parentList;
    }

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

    @Override
    public int getChildrenCount(int groupPosition) {
        return 5;
    }

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

    @Override
    public Object getChild(int groupPosition, int childPosition) {
        return parentList.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) {
        ParentViewHolder parentHolder;
        if (null == convertView) {
            parentHolder = new ParentViewHolder();
            convertView = View.inflate(context, R.layout.fire_tab_parent_group_item, null);
            parentHolder.parentTv = (TextView) convertView.findViewById(R.id.parentGroupTV);
            parentHolder.parentIv = (ImageView) convertView.findViewById(R.id.iv_parent_group_indicator);
            convertView.setTag(parentHolder);
        } else {
            parentHolder = (ParentViewHolder) convertView.getTag();
        }
        parentHolder.parentTv.setText(parentList.get(groupPosition));
        if (isExpanded) {
            parentHolder.parentIv.setImageResource(R.drawable.icon_arrow_up);
        } else {
            parentHolder.parentIv.setImageResource(R.drawable.icon_arrow_down);
        }
        return convertView;
    }

    @Override
    public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {
        ChildViewHolder childHolder;
        if (null == convertView) {
            childHolder = new ChildViewHolder();
            convertView = View.inflate(context, R.layout.item_expand_group_child, null);
            childHolder.childExpandLv = (ExpandableListView) convertView.findViewById(R.id.expand_group_item);
            convertView.setTag(childHolder);
        } else {
            childHolder = (ChildViewHolder) convertView.getTag();
        }
        childHolder.childExpandLv.setAdapter(new ChildExpandAdapter(context, parentList.subList(3, 7)));
        return convertView;
    }

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

    class ParentViewHolder {
        TextView parentTv;
        ImageView parentIv;
    }

    class ChildViewHolder {
        // 二級視圖又是一個ExpandableListView
        ExpandableListView childExpandLv;
    }

}

因為一級只有一個TextView和一個ImageView，比較簡單。因為子視圖又是一個ExpandableListView，所以這里設置了監聽，保證每次只展開一個分組，如果沒有這個需求當然可以不設置，另外就是通過判斷增加了指示箭頭。

二級適配器ChildExpandAdapter.java代碼

public class ChildExpandAdapter extends BaseExpandableListAdapter {

    private Context context;
    private List<String> parentList;

    public ChildExpandAdapter(Context context, List<String> parentList) {
        this.context = context;
        this.parentList = parentList;
    }

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

    @Override
    public int getChildrenCount(int groupPosition) {
        return 1;
    }

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

    @Override
    public Object getChild(int groupPosition, int childPosition) {
        return parentList.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) {
        ParentViewHolder parentHolder;
        if (null == convertView) {
            parentHolder = new ParentViewHolder();
            convertView = View.inflate(context, R.layout.fire_tab_child_group_item, null);
            parentHolder.parentTv = (TextView) convertView.findViewById(R.id.childGroupTV);
            parentHolder.parentIv = (ImageView) convertView.findViewById(R.id.iv_fire_tab_child_indicator);
            convertView.setTag(parentHolder);
        } else {
            parentHolder = (ParentViewHolder) convertView.getTag();
        }
        parentHolder.parentTv.setText(parentList.get(groupPosition));
        if (isExpanded) {
            parentHolder.parentIv.setImageResource(R.drawable.icon_arrow_up);
        } else {
            parentHolder.parentIv.setImageResource(R.drawable.icon_arrow_down);
        }
        return convertView;
    }

    @Override
    public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {
        ChildViewHolder childHolder;
        if (null == convertView) {
            childHolder = new ChildViewHolder();
            convertView = View.inflate(context, R.layout.item_child_child, null);
            childHolder.gridView = (GridView) convertView.findViewById(R.id.gv_child_child_item);
            convertView.setTag(childHolder);
        } else {
            childHolder = (ChildViewHolder) convertView.getTag();
        }
        childHolder.gridView.setAdapter(new GridViewAdapter(context, getList()));
        return convertView;
    }

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

    class ParentViewHolder {
        TextView parentTv;
        ImageView parentIv;
    }

    class ChildViewHolder {
        // 此ExpandableListView的ClildView又是一個GridView
        GridView gridView;
    }

    private List<String> getList() {
        List<String> list = new ArrayList<>();
        for (int i = 0; i < 50; i++) {
            list.add("android " + i);
        }
        return list;
    }
}

根據我們前面的分析，這里的二級ChildView是一個GridView，這里做了初始化，并設置了點擊監聽。

再來看看最重要的代碼——自定義ExpandableListView

public class CustomExpandableListview extends ExpandableListView {

    public CustomExpandableListview(Context context) {
        super(context);
    }

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

    public CustomExpandableListview(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2,
                MeasureSpec.AT_MOST);
        super.onMeasure(widthMeasureSpec, expandSpec);
    }
}

這里通過測量，計算出子ExpandableListView的高度，解決了顯示不全問題，GridView也是一樣的。

來自：http://www.jianshu.com/p/a778064d1701

本文由用戶 dqwe7108 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1481012188049.html

Android開發移動開發 gridview

教你用兩層ExpandableListView嵌套GridView實現三級展示界面

相關經驗

相關資訊

相關文檔

目錄