您的位置: 首页  >  文章  >  从零开始水安卓——高级UI组件2（ListView上）

从零开始水安卓——高级UI组件2（ListView上）

分类: 文章 • 2024-10-30 14:40:28

目录

 

ListView

概述

基本属性

事件处理

​

ListActivity

概述

单选和多选模式

activity_main.xml

MainActivity

效果

多选模式

实现图文列表

布局

MainActivity

补充

ListView

概述

列表视图，是Android中最为常见的一种视图组件，以垂直列表的形式列出需要显示的列表项。

基本属性

android:dividerHeight="30dp" listview item之间的间距
android:cacheColorHint="#000000000" 设置拖动背景色为透明 
android:divider="" itm之间的背景色
android:fadingEdge="vertical" 上边和下边有黑色的阴影 none则没有
android:scrollbars="horizontal" 只有设置为horizontal才会显示滚动条
android:fastScrollEnabled="true" 快速滚动效果，为true时，将有一个小方块快速滚动的效果
android:entries="" 直接填充内容
android:listSelector="" 选中时的颜色

在values文件夹下新建资源文件arrays.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <array name="test">
        <item>测试1</item>
        <item>测试2</item>
        <item>测试3</item>
        <item>测试4</item>
        <item>测试5</item>
        <item>测试6</item>
    </array>
</resources>

然后就可以通过entries属性进行简单的测试了

activity_main.xml部分代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/listview"
        android:dividerHeight="30dp"
        android:divider="#FF9800"
        android:fadingEdge="vertical"
        android:fastScrollEnabled="true"
        android:listSelector="#03A9F4"
        android:entries="@array/test"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

 

效果图：

从零开始水安卓——高级UI组件2（ListView上）

事件处理

和之前的处理类似，

1、private ListView 

2、listView  = findViewById(R.id.listview);
3、listView.setOnItemClickListener(new AdapterView.OnItemClickListener()
4、对public void onItemClick(AdapterView<?> parent, View view, int position, long id)进行事件内容编写
package com.example.listview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    private ListView listView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        listView  = findViewById(R.id.listview);
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                TextView tv = (TextView) view;
                Toast.makeText(MainActivity.this,tv.getText(),Toast.LENGTH_LONG).show();
            }
        });
    }
}

从零开始水安卓——高级UI组件2（ListView上）

ListActivity

概述

直接提供了一个ListActivity类，它可以绑定指定数据源，给用户提供选项选择。

默认布局是一个单一的再屏幕中心的全屏幕的列表，可以用setcontentview()在oncreate()设置自己的自定义屏幕布局视图。

 

还是新建activity并设置为默认activity....

从零开始水安卓——高级UI组件2（ListView上）

修改继承关系...如下图????

从零开始水安卓——高级UI组件2（ListView上）

完整代码：（必要的说明补在注释了）

package com.example.listview;

import android.app.ListActivity;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ArrayAdapter;

public class Main2Activity extends ListActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //三个参数，上下文，资源，布局文件
        ArrayAdapter arrayAdapter = ArrayAdapter.createFromResource(this,R.array.test, android.R.layout.simple_list_item_1);
        setListAdapter(arrayAdapter);
        //布局也不需要设置
        //setContentView(R.layout.activity_main2);
    }
}

 

效果如下：（由于没有布局，所以界面是比较普通的）

从零开始水安卓——高级UI组件2（ListView上）

点击事件

主要是 重写onListItemClick 只需要简单的加上一段重写onListItemClick的代码就好，如下：

package com.example.myapplication;

import android.app.ListActivity;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

import com.example.myapplication.R;

public class MainActivity extends ListActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //三个参数，上下文，资源，布局文件
        ArrayAdapter arrayAdapter = ArrayAdapter.createFromResource(this, R.array.test, android.R.layout.simple_list_item_1);
        setListAdapter(arrayAdapter);
        //布局也不需要设置
        //setContentView(R.layout.activity_main2);
    }

    @Override
    protected void onListItemClick(ListView l, View v, int position, long id) {
        Toast.makeText(this,((TextView)v).getText(),Toast.LENGTH_LONG).show();
    }
}

从零开始水安卓——高级UI组件2（ListView上）

 

单选和多选模式

activity_main.xml

(自备一个arrays.xml在values文件夹）

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <ListView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="8dp"
        android:id="@+id/listview"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

MainActivity

ArrayAdapter<String> a1 = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_single_choice,arr);

有三个参数，分别是:

上下文，布局，资源数组

为了得到资源数组，定义一个arr数组，然后通过getResources来获取

String[] arr = getResources().getStringArray(R.array.test);

最后还需要设置成单选模式 即如下语句

listView.setChoiceMode(ListView.CHOICE_MODE_SINGLE);

完整代码如下:

package com.example.test317;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class MainActivity extends AppCompatActivity {
    private ListView listView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        listView = findViewById(R.id.listview);
        String[] arr = getResources().getStringArray(R.array.test);
        //单选
        ArrayAdapter<String> a1 = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_single_choice,arr);
        listView.setChoiceMode(ListView.CHOICE_MODE_SINGLE);
        listView.setAdapter(a1);
    }
}

 

效果

从零开始水安卓——高级UI组件2（ListView上）：

多选模式

多选模式基本一致 只需要进行少量修改即可 非常容易理解，就是像选择模式的地方从single->multiple

代码即效果图如下:

package com.example.test317;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class MainActivity extends AppCompatActivity {
    private ListView listView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        listView = findViewById(R.id.listview);
        String[] arr = getResources().getStringArray(R.array.test);
        //单选
/*        ArrayAdapter<String> a1 = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_single_choice,arr);
        listView.setChoiceMode(ListView.CHOICE_MODE_SINGLE);
        listView.setAdapter(a1);
        */
        //多选
        ArrayAdapter<String> a1 = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_multiple_choice,arr);
        listView.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE);
        listView.setAdapter(a1);
    }
}

从零开始水安卓——高级UI组件2（ListView上）

实现图文列表

使用SimpleAdapter建立复杂的列表项

SimpleAdapter（参数1，参数2，参数3，参数4，参数5）

参数1:context 上下文

参数2:data 一个Map组成的list。在列表中的每个条目对应列表中的一行，每一个map应该包含所有在from参数参数中指定的键。

参数3:resource 一个定义列表项的布局文件的资源ID。布局文件将至少应包含那些在to中定义了的ID

参数4:from 一个将被添加到map映射上的键名

参数5:to 将绑定数据的视图的ID，跟from参数对应，这些应该全是TextView  

 

布局

activity_main.xml需要建立一个ListView细节不表，默认id为listview

单独定义一个布局文件listitem.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_weight="1"
        tools:srcCompat="@tools:sample/avatars[0]" />

    <TextView
        android:id="@+id/textView"
        android:gravity="center_vertical"
        android:layout_width="wrap_content"
        android:layout_height="138dp"
        android:layout_weight="1"
        android:text="TextView" />

</LinearLayout>

MainActivity

package com.example.simpleadapter;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ListView;
import android.widget.SimpleAdapter;

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

public class MainActivity extends AppCompatActivity {
    private ListView listView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        listView = findViewById(R.id.listview);
        //准备一组数据 每一个HashMap是一条记录
        HashMap<String,String> title1 = new HashMap<>();
        title1.put("title","title-1");
        HashMap<String,String> title2 = new HashMap<>();
        title2.put("title","title-2");
        HashMap<String,String> title3 = new HashMap<>();
        title3.put("title","title-3");
        //放入....List
        ArrayList<Map<String,String>> List = new ArrayList<>();
        List.add(title1);
        List.add(title2);
        List.add(title3);
        //把数据填充到Adapter
        SimpleAdapter sa = new SimpleAdapter(this,List,R.layout.listitem,new String[]{"title"},new int[]{R.id.textView});
        listView.setAdapter(sa);
    }
}

然后是效果 图片尺寸不太好，所以显示有点奇怪 （无视）

从零开始水安卓——高级UI组件2（ListView上）

 

补充

在上面图文列表的基础上，进行一定的修改，刚才没有设置图片，默认把所有列表项的图片都用初始的了，现在也设置一下。

package com.example.simpleadapter;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ListView;
import android.widget.SimpleAdapter;

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

public class MainActivity extends AppCompatActivity {
    private ListView listView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        listView = findViewById(R.id.listview);
        //准备一组数据 每一个HashMap是一条记录
        HashMap<String,Object> title1 = new HashMap<>();
        title1.put("title","title-1");
        title1.put("icon",R.drawable.if_pineapple_2003197);
        HashMap<String,Object> title2 = new HashMap<>();
        title2.put("title","title-2");
        title2.put("icon",R.drawable.if_pear_2003196);
        HashMap<String,Object> title3 = new HashMap<>();
        title3.put("title","title-3");
        title3.put("icon",R.drawable.if_grapes_2003194);
        //放入....List
        ArrayList<Map<String,Object>> List = new ArrayList<>();
        List.add(title1);
        List.add(title2);
        List.add(title3);
        //把数据填充到Adapter
        SimpleAdapter sa = new SimpleAdapter(this,List,R.layout.listitem,new String[]{"title","icon"},new int[]{R.id.textView,R.id.imageView});
        listView.setAdapter(sa);
    }
}

效果如图:

从零开始水安卓——高级UI组件2（ListView上）

相关推荐