Android Studio ListView+SimpleAdapter使用之仿酷狗界面

写博客的目的在于分享,更是为了积累项目经验.博客亦是一本武功秘籍,回头哪个招式忘了怎么耍,也好对照参考.这篇文章是对ListView,SimpleAdapter以及ListView监听事件的使用详解,附上项目效果图:

去除Activity头部可参考我的这篇文章” Android Studio Activity去除头部标题栏
“

Android Studio Activity去除头部标题栏

第一步:
在activity_main.xml中拖一个ListView控件,然后把ListView父容器的内边距去掉即可,代码如下:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main"
    android:layout_width="match_parent" android:layout_height="match_parent"
    tools:context="myself.myapplication.MainActivity">


    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_marginRight="11dp"
        android:layout_marginEnd="11dp"
        android:layout_marginBottom="19dp" />
RelativeLayout>

第二步:
自定义布局文件,取名为layout.xml用于ListView每一个Item的样式
layout.xml布局截图如下:

layout.xml布局文件参考代码如下:

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

    <ImageView
        android:id="@+id/img1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/img6" />

    <LinearLayout
        android:id="@+id/line1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="20dp"
        android:layout_toRightOf="@+id/img1"
        android:orientation="vertical">

        <TextView
            android:id="@+id/t1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#fff"
            android:textSize="18sp"
            android:text="@string/kg" />

        <TextView
            android:id="@+id/t2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:text="@string/beyond" />

    LinearLayout>

    <ImageView
        android:id="@+id/img2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:src="@mipmap/log" />
RelativeLayout>

第三步:
编写MainActivity.java 参考代码如下:

package myself.myapplication;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.view.Window;
import android.widget.AbsListView;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.Toast;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;


public class MainActivity extends AppCompatActivity
        implements AdapterView.OnItemClickListener , AbsListView.OnScrollListener{
    //声明ListView控件
    private ListView listView;
    //创建简单适配器(并不简单,功能很强大)
    private SimpleAdapter simpleAdapter;
    //定义List泛型集合,里面存放的是Map键值对, listDate作为ListView的数据源
    private List> listDate;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        /*
         * requestWindowFeature(Window.FEATURE_NO_TITLE);
         * 这段代码的目的是为了去除Activity的头部,在myEclipse里面设置有效,
         * 但在Android Studio无效
         *
         * 而且在AndroidManifest.xml 修改这段代码程序会崩溃,可见Android Studio也有
         * 美中不足的地方,相信会有其他的解决办法,此时此处暂且搁置
         * android:theme="@android:style/Theme.NoTitleBar"
         * Android:theme="@android:style/Theme.NoTitleBar.Fullscreen"
         */
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);

        //得到ListView控件
        listView = (ListView) findViewById(R.id.listView);

        /*
         * 把ListView要显示的图片和文字声明出来,暂时存放在数组中,为插入到listDate做准备
         * 三个数组对应三个不同的显示信息,ListView每一个Item会根据你自定义的
         * 布局样式依次显示img[1],text1[1],text2[1]的内容
         * 其实我们还差一个,就是最右边的播放图标,由于每一个item的图标都是相同的,
         * 我们直接添加到集合中即可
         */
        int[] img = new int[]{R.mipmap.img1, R.mipmap.img2, R.mipmap.img3, R.mipmap.img4, R.mipmap.img5, R.mipmap.img6, R.mipmap.img7};
        //图片右边的第一排文字
        String[] text1 = new String[]{"酷狗热歌", "DJ热碟", "网络红歌", "咖啡厅", "新歌", "经典", "抒情"};
        //图片右边的第二排文字
        String[] text2 = new String[]{"Beyond-光辉岁月", "许嵩-山水之间", "周杰伦-晴天", "许嵩-雅俗共赏", "周杰伦-龙卷风", "许嵩-千百度", "汪晨蕊-友情岁月"};

        /*
         * 实例化泛型集合listDate
         * 使用MyEclipse开发的朋友,你的实例化代码应该是这样的
         * listDate = new ArrayList>();
         *
         * 但请注意:对于Android Studio来说这样写,你的代码底下会有烦人的波浪线,
         * 为什么会这样,有一种说法是:
         * 因为Android Studio需要的JDK版本是7.0及以上,这种JDK版本不支持此种写法
         */
        listDate = new ArrayList<>();

        /**
         * 利用for循环,把数据源添加到集合中(i不管小于哪个数组的长度都是可以的,
         * 三个数组的长度是相等的)
         * 第一层for循环是为了把相同的数据多次添加
         */
        for (int k = 0; k < 3; k++) {
            for (int i = 0; i < img.length; i++) {
                Map map = new HashMap<>();
                map.put("img1", img[i]);
                map.put("text1", text1[i]);
                map.put("text2", text2[i]);
                map.put("img2", R.mipmap.log);
                listDate.add(map);
            }
        }

        /*
         * 调用SimpleAdapter的构造方法
         * sim = new SimpleAdapter(context, data, resource, from, to);
         * context: 上下文
         * data:    数据源 List> data
         *          一个Map所组成的List集合
         *          每一个Map(键-值对)中的键都必须包含所有在from中所指定的键
         * resource:ListView显示将要参照的布局文件ID
         * from:    Map中的键名
         * to:      绑定布局文件layout的ID,与from形成对应关系
         */
        simpleAdapter = new SimpleAdapter(MainActivity.this,
                listDate,
                R.layout.layout,
                new String[]{"img1", "text1", "text2", "img2"},
                new int[]{R.id.img1, R.id.t1, R.id.t2, R.id.img2});
        listView.setAdapter(simpleAdapter);

        //启用监听器
        listView.setOnItemClickListener(this);
        listView.setOnScrollListener(this);

    }

     /*
      * 拓展内容:如何监听ListView的每一项(Item)的事件(如点击播放)
      *          如何监听ListView的滚动事件(如淘宝的下拉刷新商品)
      * 监听器是程序和用户(或者系统)交互的桥梁
      * SimpleAdapter(适配器)是视图界面和数据源交互的桥梁
      */

    @Override
    public void onItemClick(AdapterView parent, View view, int position, long id) {
        /**
         * 我们要实现的功能是:你点击了ListView的每一项时,会弹出该Item的文本信息
         *  listView.getItemAtPosition(position)得到的是一个Object对象,须把它转化成String类型
         *  方法调用后我们还应在onCreate()函数里面启用监听器
         */
        String text = "" + listView.getItemAtPosition(position);
        Toast.makeText(MainActivity.this, "position: " + position + "歌曲名: " + text, Toast.LENGTH_LONG).show();
    }

    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {
        switch(scrollState)
        {
            case SCROLL_STATE_FLING:

                Log.i("Main", "用户在手指离开屏幕之前，由于用力的划了一下，视图仍依靠惯性继续滑动");

                //模拟刷新功能
                Mapmap = new HashMap<>();
                map.put("img1", R.mipmap.img1);
                map.put("text1", "增加项");
                map.put("text2", "增加歌曲");
                map.put("img2", R.mipmap.log);
                listDate.add(map);

                //通知视图界面更新
                simpleAdapter.notifyDataSetChanged();
                break;

            case SCROLL_STATE_IDLE:

                Log.i("Main","视图已经停止滑动");
                break;

            case SCROLL_STATE_TOUCH_SCROLL:

                Log.i("Main","手指没有离开屏幕，视图跟随手指滑动");
                break;
        }
    }

    @Override
    public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {

    }
}