android之ExpandableListView

ExpandableListView從字面意思來說就是對listview的擴展。只要我們掌握listview的用法。ExpandableListView就很容易。listview只是展示一級列表,而ExpandableListView展示的是二級列表。就像qq聯繫人這塊。就是個二級列表。哈哈。。接下來我們就學習使用ExpandableListView這個控件。

我們可以去看看官網對它的介紹

這裏寫圖片描述

上面的第一段大概意思是說:這個view可以垂直展示兩個列表不同於listview。父列表可以展示子列表。這個數據的來源可以來自ExpandableListAdapter這個適配器來關聯這個view。。。。
哈哈哈。。。我這絕對是我自己概述的。我絕對沒用翻譯軟件。 不一定理解對哈。。。。講代碼之前先看看效果再來寫。。。

這裏寫圖片描述

這效果是不是像qq聯繫人這樣的效果。不囉嗦,直接放代碼哈。。嘻嘻

ContentUtil.java代碼如下:

 public static int mImgs[] = new int[]{
            R.mipmap.ic_launcher,
            R.mipmap.ic_launcher,
            R.mipmap.ic_launcher,
            R.mipmap.ic_launcher,
            R.mipmap.ic_launcher,
            R.mipmap.ic_launcher
    };
    public static String names[] = new String[]{
            "我的朋友",
            "我的好友",
            "我的家人",
            "我的同學",
            "我的兄弟",
            "聊得來"
    };
    public static String counts[] = new String[]{
            "12/23",
            "12/22",
            "14/22",
            "1/3",
            "4/5",
            "4/7"
    };
    public static int child_img[][] = new int[][]{
            {R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher},
            {R.mipmap.ic_launcher, R.mipmap.ic_launcher},
            {R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher},
            {R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher},
            {R.mipmap.ic_launcher},
            {R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher}
    };
    public static String child_names[][]=new String[][]{
            {"小菜","小宋","小鎮","小紅"},
            {"張三","李四"},
            {"王五","趙六","王二"},
            {"小看","小龍","小林","小鳥"},
            {"笑哭"},
            {"小搜","小課","小店"}
    };
    public static String child_contents[][]=new String[][]{
            {"我不是程序員","我不是程序員","我不是程序員","我不是程序員"},
            {"我不是程序員","我不是程序員"},
            {"我不是程序員","我不是程序員","我不是程序員"},
            {"我不是程序員","我不是程序員","我不是程序員","我不是程序員"},
            {"我不是程序員"},
            {"我不是程序員","我不是程序員","我不是程序員"}
    };

這些數據。我是把它寫在一個類中了,這樣對於我們初學來說方便理解。你也可以寫在其它地方。 嘻嘻。。還有我的成員變量用static修飾了,這樣做的原因只是可以用類名。來調用。不要static的話你就必須new一個對象出來調用它。。

acitivity_main.xml代碼如下:

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.edu.expandablelistviewsimple.MainActivity">

  <ExpandableListView
      android:groupIndicator="@null"
      android:id="@+id/elv"
      android:layout_width="match_parent"
      android:layout_height="match_parent">
  </ExpandableListView>
</RelativeLayout>

很簡單。就是一個ExpandableListView控件。

group_item.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="match_parent"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/group_img"
        android:src="@mipmap/ic_launcher"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:gravity="center_horizontal"
        android:layout_weight="1"
        android:id="@+id/group_name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="我的好友"
        />
    <TextView
        android:id="@+id/group_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1/23"
        />
</LinearLayout>

我們看效果圖就知道,父列表就是左邊有個圖片,中間的文本,右邊也是文本。所以我們父列表的item文件就這樣定義。。也不難。哈哈。。

child_item.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="match_parent"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/child_img"
        android:src="@mipmap/ic_launcher"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">
    <TextView
        android:layout_marginTop="5dp"
        android:gravity="center_horizontal"
        android:id="@+id/child_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我的好友"
        />
    <TextView
        android:id="@+id/child_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1/23"
        />
    </LinearLayout>
</LinearLayout>

子列表的item是不是也很簡單。一個圖片,兩個文本。。。

其實這些佈局文件都簡單。。哈哈。。接下來就是我們怎樣把數據綁定到ExpandableListView上中,就需要我們重寫BaseExpandableListAdapter適配器。如果不懂可以看看我上次寫的適配器的使用。僅需四步就可以教你使用適配器。哈哈
http://blog.csdn.net/song_shui_lin/article/details/52579246

MyAdapter.java代碼如下:

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseExpandableListAdapter;
import android.widget.ImageView;
import android.widget.TextView;

/**
 * Created by Administrator on 2016/9/19.
 */
public class MyAdapter extends BaseExpandableListAdapter{

    private Context context;
    private LayoutInflater inflater;

    public MyAdapter(Context context) {
        this.context = context;
        inflater = LayoutInflater.from(context);
    }


    @Override
    public int getGroupCount() {
        return ContentUtil.mImgs.length;
    }

    @Override
    public int getChildrenCount(int groupPosition) {
        return ContentUtil.child_img[groupPosition].length;
    }

    @Override
    public Object getGroup(int groupPosition) {
        return ContentUtil.mImgs[groupPosition];
    }

    @Override
    public Object getChild(int groupPosition, int childPosition) {
        return ContentUtil.child_img[groupPosition][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 View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
        GroupViewHodler holder = null;
        View view = null;
        if (convertView != null) {
            view = convertView;
            holder = (GroupViewHodler) view.getTag();
        } else {
            holder = new GroupViewHodler();
            view = inflater.inflate(R.layout.group_item, null);
            view.setTag(holder);
            holder.group_img = (ImageView) view.findViewById(R.id.group_img);
            holder.group_name = (TextView) view.findViewById(R.id.group_name);
            holder.group_count = (TextView) view.findViewById(R.id.group_content);
        }
        holder.group_img.setImageResource(ContentUtil.mImgs[groupPosition]);
        holder.group_name.setText(ContentUtil.names[groupPosition]);
        holder.group_count.setText(ContentUtil.counts[groupPosition]);
        return view;
    }

    @Override
    public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {
        ChildViewHodler hodler = null;
        View view = null;
        if (convertView != null) {
            view = convertView;
            hodler = (ChildViewHodler) view.getTag();
        } else {
            hodler = new ChildViewHodler();
            view = inflater.inflate(R.layout.child_item, null);
            view.setTag(hodler);
            hodler.child_img = (ImageView) view.findViewById(R.id.child_img);
            hodler.child_name = (TextView) view.findViewById(R.id.child_name);
            hodler.child_content = (TextView) view.findViewById(R.id.child_content);
        }
        hodler.child_img.setImageResource(ContentUtil.child_img[groupPosition][childPosition]);
        hodler.child_name.setText(ContentUtil.child_names[groupPosition][childPosition]);
        hodler.child_content.setText(ContentUtil.child_contents[groupPosition][childPosition]);
        return view;
    }

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

}

class GroupViewHodler {
    ImageView group_img;
    TextView group_name, group_count;

}
class ChildViewHodler {
    ImageView child_img;
    TextView child_name, child_content;
}

上面的方法,我就是一個方法不太懂,其他的方法基本上可以做到看其名知其意。
1,hasStableIds()

這裏寫圖片描述

然後我又去看官網api對它的解釋:

這裏寫圖片描述

還 是官網的解釋準確。哈哈。。寫完了適配器後,基本上我們的基本的差不多做完了。只剩下最後一步了。

MainActivity.java

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ExpandableListView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
 private ExpandableListView  mElv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initWidgets();
        MyAdapter adapter=new MyAdapter(MainActivity.this);
        mElv.setAdapter(adapter);
        //爲子列表添加點擊事件
   mElv.setOnChildClickListener(new ExpandableListView.OnChildClickListener() {
       @Override
       public boolean onChildClick(ExpandableListView parent, View v, int groupPosition, int childPosition, long id) {

           Toast.makeText(MainActivity.this,ContentUtil.child_names[groupPosition][childPosition],Toast.LENGTH_SHORT).show();
           return true;
       }
   });
    }
   //初始化控件
    private void initWidgets() {
        mElv= (ExpandableListView) findViewById(R.id.elv);
    }
}

總結:

其實我跟大家一樣,好水。寫博客只是記錄下自己平常學的點點滴滴。加油!!!還有不懂的看官網的解釋是最好的。

源碼下載:

https://github.com/songshuilin/AndroidForBlog/tree/master/expandablelistviewsimple

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章