Quantcast
Channel: CSDN博客移动开发推荐文章
Viewing all articles
Browse latest Browse all 5930

android之ExpandableListView

$
0
0

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

作者:song_shui_lin 发表于2016/9/20 13:34:32 原文链接
阅读:217 评论:0 查看评论

Viewing all articles
Browse latest Browse all 5930

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>