Android ExpandableListView BaseExpandableListAdapter (類似QQ分組列表）

分組列表視圖(ExpandableListView)

和ListView不同的是它是一個兩級的滾動列表視圖,每一個組可以展開,顯示一些子項,類似於
QQ列表,這些項目來至於ExpandableListAdapter的子類,也就是說,要實現向里面添加項目,必
須寫一個子類實現ExpandableListAdapter的接口或者使用系統為我們實現在子類

 　　常用屬性　　　

　　　　1. android:childDivider 指定各組內子類表項之間的分隔條,

　　　　2. android:childIndicator 顯示在子列表旁邊的Drawable對象

　　　　3. android:childIndicatorLeft 子列表項指示符的左邊約束位置

　　　　4. android:childIndicatorRight 子列表項指示符的右邊約束位置

　　　　5. android:groupIndicator 顯示在組列表旁邊的Drawable對象

　　　　6. android:indicatorLeft 組列表項指示器的左邊約束位置

　　　　7. android:indicatorRight 組列表項指示器的右邊約束位置

一般適用於ExpandableListView的Adapter都要繼承BaseExpandableListAdapter這個類，
並且必須重載getGroupView和getChildView這兩個最為重要的方法。
當擴展BaseExpandableListAdapter時，要實現全部方法，關鍵是實現其中的四個方法。

 

1、首相activity_main.xml布局搭建

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ExpandableListView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/elv"/>

</RelativeLayout>

 

2、然后是搭建QQ分組的布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/groupName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:text="分組名稱" />

    <TextView
        android:id="@+id/groupOnline"
        android:layout_alignParentRight="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="0/8" />

</RelativeLayout>

 

3、再搭建分組中各選項的布局（QQ聯系人，包括頭像，昵稱，簽名）

　　 這里由於引用了外部的自定義的控件，所以這里包名加類名

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center_vertical"
    android:orientation="horizontal" >

    <com.test.lesson7_expandablelistview.CircleImageView
        android:id="@+id/img"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/ic_launcher" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/nickName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="昵稱"
            android:textSize="18sp" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:orientation="horizontal" >

            <TextView
                android:id="@+id/online"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="[在線]" />

            <TextView
                android:id="@+id/sign"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:text="我要飛的更高~" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

 

 

4、圓角圖片形狀

　　在res/values中建circle_attr.xml

<resources>

    <declare-styleable name="CircularImage">
        <attr name="border_width" format="dimension" />
        <attr name="border_color" format="color" />
    </declare-styleable>

</resources>

5、然后新建一個CircleImageView繼承ImageView

　　此處自定義控件是在GitHub上下載

public class CircleImageView extends ImageView {
    private static final Xfermode MASK_XFERMODE;
    private Bitmap mask;
    private Paint paint;
    private int mBorderWidth = 10;
    private int mBorderColor = Color.parseColor("#f2f2f2");
    private boolean useDefaultStyle = false;

    static {
        PorterDuff.Mode localMode = PorterDuff.Mode.DST_IN;
        MASK_XFERMODE = new PorterDuffXfermode(localMode);
    }

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

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

    public CircleImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        TypedArray a = context.obtainStyledAttributes(attrs,
                R.styleable.CircularImage);
        mBorderColor = a.getColor(R.styleable.CircularImage_border_color,
                mBorderColor);
        final int def = (int) (2 * context.getResources().getDisplayMetrics().density + 0.5f);
        mBorderWidth = a.getDimensionPixelOffset(
                R.styleable.CircularImage_border_width, def);
        a.recycle();
    }

    private void useDefaultStyle(boolean useDefaultStyle) {
        this.useDefaultStyle = useDefaultStyle;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if (useDefaultStyle) {
            super.onDraw(canvas);
            return;
        }
        final Drawable localDraw = getDrawable();
        if (localDraw == null) {
            return;
        }
        if (localDraw instanceof NinePatchDrawable) {
            return;
        }
        if (this.paint == null) {
            final Paint localPaint = new Paint();
            localPaint.setFilterBitmap(false);
            localPaint.setAntiAlias(true);
            localPaint.setXfermode(MASK_XFERMODE);
            this.paint = localPaint;
        }
        final int width = getWidth();
        final int height = getHeight();
        int layer = canvas.saveLayer(0.0F, 0.0F, width, height, null, 31);
        localDraw.setBounds(0, 0, width, height);
        localDraw.draw(canvas);
        if ((this.mask == null) || (this.mask.isRecycled())) {
            this.mask = createOvalBitmap(width, height);
        }
        canvas.drawBitmap(this.mask, 0.0F, 0.0F, this.paint);
        canvas.restoreToCount(layer);
        drawBorder(canvas, width, height);
    }

    private void drawBorder(Canvas canvas, final int width, final int height) {
        if (mBorderWidth == 0) {
            return;
        }
        final Paint mBorderPaint = new Paint();
        mBorderPaint.setStyle(Paint.Style.STROKE);
        mBorderPaint.setAntiAlias(true);
        mBorderPaint.setColor(mBorderColor);
        mBorderPaint.setStrokeWidth(mBorderWidth);
        canvas.drawCircle(width / 2, height / 2, (width - mBorderWidth) / 2,
                mBorderPaint);
        canvas = null;
    }

    public Bitmap createOvalBitmap(final int width, final int height) {
        Bitmap.Config localConfig = Bitmap.Config.ARGB_8888;
        Bitmap localBitmap = Bitmap.createBitmap(width, height, localConfig);
        Canvas localCanvas = new Canvas(localBitmap);
        Paint localPaint = new Paint();
        final int padding = (mBorderWidth - 3) > 0 ? mBorderWidth - 3 : 1;

        RectF localRectF = new RectF(padding, padding, width - padding, height
                - padding);
        localCanvas.drawOval(localRectF, localPaint);

        return localBitmap;
    }

}

 

6、創建Group類

public class Group {
    //分組名
    public String groupName;
    //有很多User
    public List<User> list;
    
    public Group(String groupName){
        this.groupName = groupName;
        list = new ArrayList<User>();
    }
    //添加User
    public void addUser(User user){
        list.add(user);
    }
    
    //獲取某個分組中User的數量
    public int getChildCount() {
        return list.size();
    }
    //獲取某個分組中User在線的數量
    public int getOnlineCount(){
        int sum = 0;
        for (User user : list) {
            if(user.isOnline()){
                sum++;
            }
        }
        return sum;
    }
    //獲取分組中某個孩子
    public User getChild(int childPosition) {
        return list.get(childPosition);
    }
    
    
}

 

7、創建User類

public class User {
    private int imgId;
    private String nickName;
    private boolean isOnline;
    private String sign;
    
    
    public User() {
        super();
    }
    public User(int imgId, String nickName, boolean isOnline, String sign) {
        super();
        this.imgId = imgId;
        this.nickName = nickName;
        this.isOnline = isOnline;
        this.sign = sign;
    }
    
    public int getImgId() {
        return imgId;
    }
    public void setImgId(int imgId) {
        this.imgId = imgId;
    }
    public String getNickName() {
        return nickName;
    }
    public void setNickName(String nickName) {
        this.nickName = nickName;
    }
    public boolean isOnline() {
        return isOnline;
    }
    public void setOnline(boolean isOnline) {
        this.isOnline = isOnline;
    }
    public String getSign() {
        return sign;
    }
    public void setSign(String sign) {
        this.sign = sign;
    }
    
    
    
    
}

 

8、設置適配器

public class GroupAdapter extends BaseExpandableListAdapter{

    Context context;
    List<Group> list;
    
    public GroupAdapter(Context context, List<Group> list) {
        this.context = context;
        this.list = list;
    }
    
    @Override
    public View getGroupView(int groupPosition, boolean isExpanded,
            View convertView, ViewGroup parent) {
        GroupHolder holder;
        if(convertView == null){
            convertView = View.inflate(context, R.layout.item_grouplayout, null);
            holder = new GroupHolder(convertView);
            convertView.setTag(holder);
        }else{
            holder = (GroupHolder) convertView.getTag();
        }
        //設置數據
        Group group = getGroup(groupPosition);
        holder.groupName.setText(group.groupName);
        holder.groupOnline.setText(group.getOnlineCount()+"/"+getChildrenCount(groupPosition));
        
        return convertView;
    }

    @Override
    public View getChildView(int groupPosition, int childPosition,
            boolean isLastChild, View convertView, ViewGroup parent) {
        ChildHolder holder;
        if(convertView == null){
            convertView = View.inflate(context, R.layout.item_childlayout, null);
            holder = new ChildHolder(convertView);
            convertView.setTag(holder);
        }else{
            holder = (ChildHolder) convertView.getTag();
        }
        //設置數據
        User user = getGroup(groupPosition).getChild(childPosition);
        holder.img.setImageResource(user.getImgId());
        holder.nickName.setText(user.getNickName());
        holder.online.setText(user.isOnline()?"[在線]":"[離線]");
        holder.sign.setText(user.getSign());
        
        return convertView;
        
    }
    
    class GroupHolder{
        TextView groupName;
        TextView groupOnline;
        
        public GroupHolder(View convertView){
            groupName = (TextView) convertView.findViewById(R.id.groupName);
            groupOnline = (TextView) convertView.findViewById(R.id.groupOnline);
            
        }
    }
    class ChildHolder{
        ImageView img;
        TextView nickName;
        TextView online;
        TextView sign;
        
        public ChildHolder(View convertView){
            img = (ImageView) convertView.findViewById(R.id.img);
            nickName = (TextView) convertView.findViewById(R.id.nickName);
            online = (TextView) convertView.findViewById(R.id.online);
            sign = (TextView) convertView.findViewById(R.id.sign);
            
        }
        
    }
    
    @Override
    public int getGroupCount() {
        return list.size();
    }

    @Override
    public int getChildrenCount(int groupPosition) {
        return list.get(groupPosition).getChildCount();
    }

    @Override
    public Group getGroup(int groupPosition) {
        return list.get(groupPosition);
    }

    @Override
    public User getChild(int groupPosition, int childPosition) {
        return list.get(groupPosition).getChild(childPosition);
    }

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

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

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

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

}

 

9、MainActivity.java中將所有組件找到，初始化數據源，並給ListView設置適配器

public class MainActivity extends Activity {

    ExpandableListView elv;
    private List<Group> list = new ArrayList<Group>();
    int[] img = new int[6];
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initData();
        elv = (ExpandableListView) findViewById(R.id.elv);
        GroupAdapter adapter = new GroupAdapter(getBaseContext(), list);
        elv.setAdapter(adapter);
        
    }

    private void initData() {
        for (int i = 0; i < img.length; i++) {
            try {
                img[i] = R.drawable.class.getField("img0"+(i+1)).getInt(null);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
        
        Group group1 = new Group("貴圈好亂");
        group1.addUser(new User(img[0], "張翰", true, "我愛娜扎！"));
        group1.addUser(new User(img[1], "鄭爽", false, "媽蛋，要么瘦，要么死！"));
        group1.addUser(new User(img[2], "胡彥斌", true, "其實我只是長得抽象了"));
        group1.addUser(new User(img[5], "撒貝寧", true, "子怡當年沒選擇我是個美麗的錯誤"));
        group1.addUser(new User(img[3], "楊冪", false, "其實我跟愷威已經離婚了，現在跟李易峰在一起，就醬~"));
        
        Group group2 = new Group("超星星");
        group2.addUser(new User(img[4], "林志炫", true, "其實我的小肚子都是唱歌導致的，哈哈哈"));
        
        list.add(group1);
        list.add(group2);
        
    }
    
    
}

 

 

運行效果有點渣渣。請忽略：