創作

2015年1月4日 星期日

Android - ExpandableListView (展開式選單)


由於案子需求，要製作一個展開式多選選單，怕自己忘記，就順便記一下。
參考網站: 網站1 網站2

完成圖片:







1.由於網站1，整理得比較易懂，所以取用網站1的寫法再做修改，非常感謝作者 m(- . -)m
2.開始
3.activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}" >

    <ExpandableListView
        android:id="@+id/expandableListView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:dividerHeight="0dp"
        android:groupIndicator="@null" />

</RelativeLayout>
4.group_layout.xml 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/LinearLayout1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
     >

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="60dp"
        android:layout_marginTop="30dp">

        <ImageView
            android:id="@+id/expandable_group_bg"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:scaleType="fitXY"
            android:src="@drawable/doroto_expandable_closebg" />

        <TextView
            android:id="@+id/group_tv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:text="123"
            android:textColor="#000000"
            android:textSize="20sp" />

        <ImageView
            android:id="@+id/expandable_group_arrow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/group_tv"
            android:layout_alignParentRight="true"
            android:layout_marginRight="19dp"
            android:src="@drawable/doroto_expandable_up" />

    </RelativeLayout>

</LinearLayout>
4.child_layout.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="wrap_content"
    android:orientation="horizontal" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp" >
        <ImageView
            android:id="@+id/expandable_child_bg"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="fitXY"
            android:src="@drawable/doroto_expandable_childbg" />

        <TextView
            android:id="@+id/expandable_child_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_marginLeft="30dp"
            android:text="child-child-child"
            android:textSize="20sp" />

        <RadioButton
            android:id="@+id/expandable_child_check"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="19dp" />

    </RelativeLayout>

</LinearLayout>

5.MainActivity.java
package com.zyo.testsprinner;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import android.app.ActionBar.LayoutParams;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseExpandableListAdapter;
import android.widget.ExpandableListView;
import android.widget.ExpandableListView.OnGroupExpandListener;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends Activity {

 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  final ExpandableListView elv = (ExpandableListView) findViewById(R.id.expandableListView);
  /*限制只展開一組*/
  elv.setOnGroupExpandListener(new OnGroupExpandListener() {  
            @Override
            public void onGroupExpand(int groupPosition) {
                for (int i = 0; i < elv.getCount(); i++) {
                    if (groupPosition != i) {
                        elv.collapseGroup(i);
                    }
                }
            }
        });

  // 準備一級清單中顯示的資料:2個一級清單,分別顯示"group1"和"group2"
  List<Map<String, String>> groups = new ArrayList<Map<String, String>>();
  Map<String, String> group1 = new HashMap<String, String>();
  group1.put("group", "群组一");
  Map<String, String> group2 = new HashMap<String, String>();
  group2.put("group", "群组二");
  groups.add(group1);
  groups.add(group2);

  // 準備第一個一級清單中的二級清單資料:兩個二級清單,分別顯示"childData1"和"childData2"
  List<Map<String, String>> child1 = new ArrayList<Map<String, String>>();
  Map<String, String> child1Data1 = new HashMap<String, String>();
  child1Data1.put("child", "群组一:內容1");
  Map<String, String> child1Data2 = new HashMap<String, String>();
  child1Data2.put("child", "群组一:內容2");
  child1.add(child1Data1);
  child1.add(child1Data2);
  child1.add(child1Data2);

  // 準備第二個一級清單中的二級清單資料:一個二級清單,顯示"child2Data1"
  List<Map<String, String>> child2 = new ArrayList<Map<String, String>>();
  Map<String, String> child2Data1 = new HashMap<String, String>();
  child2Data1.put("child", "群组二:內容1");
  child2.add(child2Data1);
  child2.add(child2Data1);
  child2.add(child2Data1);
  child2.add(child2Data1);
  child2.add(child2Data1);
  child2.add(child2Data1);
  child2.add(child2Data1);
  child2.add(child2Data1);
  child2.add(child2Data1);
  child2.add(child2Data1);
  child2.add(child2Data1);
  child2.add(child2Data1);
  child2.add(child2Data1);
  child2.add(child2Data1);
  child2.add(child2Data1);
  
  // 用一個list物件保存所有的二級清單資料
  List<List<Map<String, String>>> childs = new ArrayList<List<Map<String, String>>>();
  childs.add(child1);
  childs.add(child2);

  ExpandableAdapter viewAdapter = new ExpandableAdapter(this, groups,
    childs);
  elv.setAdapter(viewAdapter);
 }

 // 自訂的ExpandListAdapter
 class ExpandableAdapter extends BaseExpandableListAdapter {
  private Context context;
  List<Map<String, String>> groups;
  List<List<Map<String, String>>> childs;

  /*
   * 構造函數: 參數1:context物件 參數2:一級清單資料來源 參數3:二級清單資料來源
   */
  public ExpandableAdapter(Context context,
    List<Map<String, String>> groups,
    List<List<Map<String, String>>> childs) {
   this.groups = groups;
   this.childs = childs;
   this.context = context;
  }

  public Object getChild(int groupPosition, int childPosition) {
   return childs.get(groupPosition).get(childPosition);
  }

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

  // 獲取二級清單的View物件
  public View getChildView(int groupPosition, int childPosition,
    boolean isLastChild, View convertView, ViewGroup parent) {
   @SuppressWarnings("unchecked")
   String text = ((Map<String, String>) getChild(groupPosition,
     childPosition)).get("child");
   LayoutInflater layoutInflater = (LayoutInflater) context
     .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

   // 獲取二級清單對應的佈局檔, 並將其各元素設置相應的屬性
   LinearLayout linearLayout = (LinearLayout) layoutInflater.inflate(
     R.layout.child_layout, null);
   TextView tv = (TextView) linearLayout.findViewById(R.id.expandable_child_title);
   tv.setText(text);
    /*自定義背景切換-最後一個子項目*/
            ImageView groupBg=(ImageView)linearLayout.findViewById(R.id.expandable_child_bg);
            if (childPosition ==getChildrenCount(groupPosition)-1 )
             groupBg.setImageResource(R.drawable.doroto_expandable_endbg);

   return linearLayout;
  }

  public int getChildrenCount(int groupPosition) {
   return childs.get(groupPosition).size();
  }

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

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

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

  // 獲取一級清單View物件
  public View getGroupView(int groupPosition, boolean isExpanded,
    View convertView, ViewGroup parent) {
   String text = groups.get(groupPosition).get("group");
   LayoutInflater layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
     

   // 獲取一級清單佈局檔,設置相應元素屬性
   LinearLayout linearLayout = (LinearLayout) layoutInflater.inflate(
     R.layout.group_layout, null);
   TextView textView = (TextView) linearLayout
     .findViewById(R.id.group_tv);
   textView.setText(text);
   /*自定義箭頭切換*/
   ImageView groupArrow=(ImageView)linearLayout.findViewById(R.id.expandable_group_arrow);
   /*自定義背景切換*/
            ImageView groupBg=(ImageView)linearLayout.findViewById(R.id.expandable_group_bg);
            if(!isExpanded){
             groupArrow.setImageResource(R.drawable.doroto_expandable_up);
             groupBg.setImageResource(R.drawable.doroto_expandable_closebg);
             }else{
             groupArrow.setImageResource(R.drawable.doroto_expandable_down);
             groupBg.setImageResource(R.drawable.doroto_expandable_openbg);                    
             }
           
   return linearLayout;
  }

  public boolean hasStableIds() {
   return false;
  }

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

 }
}
6.使用的圖片
doroto_expandable_down
doroto_expandable_up


doroto_expandable_openbg
doroto_expandable_closebg
doroto_expandable_childbg

doroto_expandable_down






張貼者： 於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)