零、學習目標

1. 能說出串列控制元件的基本用法
2. 能說出串列控制元件使用的四種配接器
3. 能利用串列控制元件撰寫簡單的安卓應用

一、串列視圖概述

1、繼承關系圖

2、串列視圖四要素

（1）串列控制元件
（2）配接器（陣列配接器、簡單配接器、游標配接器、基配接器……）
（3）資料源（陣列、串列、游標……）
（4）串列項模板（平臺資源、用戶自定義）

3、四種配接器

• 串列視圖（ListView），它是AdapterView的孫子類，要通過配接器作為梁橋來系結資料源，
• 有四種配接器可以使用：陣列配接器（ArrayAdapter）、簡單配接器（SimpleAdapter）、簡單游標配接器（SimpleCursorAdapter）、基配接器（BaseAdapter），

二、基于陣列配接器使用串列視圖案例 —— 閱讀古詩

（一）陣列配接器

• 陣列配接器有兩個多載的構造方法 - 差別在于第三個引數，一個是物件陣列，一個是物件串列
  

（二）運行效果

（三）涉及知識點

1. 線性布局（LinearLayout）
2. 標簽（TextView）
3. 按鈕（Button）
4. 串列視圖（ListView）
5. 陣列配接器（ArrayAdapter）
6. 陣列或陣列串列（Array | ArrayList）

（四）實作步驟

1、創建安卓應用【ReadAncientPoetry】

2、將背景圖片拷貝到drawable目錄

3、布局資源檔案activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:background="@drawable/background"
    android:padding="15dp"
    tools:context=".MainActivity">

    <ListView
        android:id="@+id/lvPoemTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:divider="#aaaaaa"
        android:dividerHeight="0.5dp"/>
</LinearLayout>

4、詩歌串列項模板poem_list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tvPoemTitle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:minHeight="80dp"
    android:textColor="#0000ff"
    android:textSize="25sp" />

5、字串資源檔案strings.xml

<resources>                                                                                                             
    <string name="app_name">閱讀古詩</string>                                                                            
                                                                                                                        
    <string-array name="titles">                                                                                        
        <item>靜夜思</item>                                                                                                
        <item>登鸛雀樓</item>                                                                                               
        <item>相思</item>                                                                                                 
        <item>聽彈琴</item>                                                                                                
        <item>登樂游原</item>                                                                                               
        <item>朝發白帝城</item>                                                                                              
        <item>巴山夜雨</item>                                                                                               
        <item>渭城曲</item>                                                                                                
        <item>春夜喜雨</item>                                                                                               
        <item>離離原上草</item>                                                                                              
        <item>示兒</item>                                                                                                 
    </string-array>                                                                                                     
                                                                                                                        
    <string-array name="authors">                                                                                       
        <item>唐·李白</item>                                                                                               
        <item>唐·王之渙</item>                                                                                              
        <item>唐·王維</item>                                                                                               
        <item>唐·劉長卿</item>                                                                                              
        <item>唐·李商隱</item>                                                                                              
        <item>唐·李白</item>                                                                                               
        <item>唐·杜牧</item>                                                                                               
        <item>唐·王維</item>                                                                                               
        <item>唐·杜甫</item>                                                                                               
        <item>唐·白居易</item>                                                                                              
        <item>宋·陸游</item>                                                                                               
    </string-array>                                                                                                     
                                                                                                                        
    <string-array name="contents">                                                                                      
        <item>床前明月光，\n疑是地上霜，\n舉頭望明月，\n低頭思故鄉，</item>                                                                     
        <item>白日依山盡，\n黃河入海流，\n欲窮千里目，\n更上一層樓，</item>                                                                     
        <item>紅豆生南國，\n春來發幾枝，\n愿君多采擷，\n此物最相思，</item>                                                                     
        <item>泠泠七弦上，\n靜聽松風寒，\n古調雖自愛，\n今人多不彈，</item>                                                                     
        <item>向晚意不適，\n驅車登古原，\n夕陽無限好，\n只是近黃昏，</item>                                                                     
        <item>朝辭白帝彩云間，\n千里江陵一榷訓，\n兩岸猿聲啼不住，\n輕舟已過萬重山，</item>                                                             
        <item>君問歸期未有期，\n巴山夜雨漲秋池，\n何當共剪西窗燭，\n卻話巴山夜雨時，</item>                                                             
        <item>渭城朝雨浥輕塵，\n客舍青青柳色新，\n勸君更盡一杯酒，\n西出陽關無故人，</item>                                                             
        <item>好雨知時節，當春乃發生，\n隨風潛入夜，潤物細無聲，\n野徑云俱黑，江船火獨明，\n曉看紅濕處，花重錦官城，</item>                                             
        <item>離離原上草，一歲一枯榮，\n野火燒不盡，春風吹又生，\n遠芳侵古道，晴翠接荒城，\n又送王孫去，萋萋滿別情，</item>                                             
        <item>死去元知萬事空，\n但悲不見九州同，\n王師北定中原日，\n家祭無忘告乃翁， </item>                                                            
    </string-array>                                                                                             
</resources>                                                                                                            

6、主界面類 - MainActivity

• 宣告變數
  

• 通過資源識別符號獲取控制元件實體
  

• 初始化古詩標題陣列
  

• 創建陣列配接器
  

• 上面創建陣列配接器，采用了平臺提供的串列項模板資源 - anddroid.R.layout.simple_list_item_1
  

• 給串列控制元件設定配接器
  

7、啟動應用，查看效果

• 這是采用平臺提供的串列項模板的效果
  
• 下面我們采用自定義的串列項模板poem_list_item.xml
  
• 啟動應用，查看效果
  
• 一頁沒有顯示完全部古詩標題，可以通過手勢滑動看到其余的串列項
  
• 滑動串列控制元件效果演示
  

8、單擊串列項，彈出吐司，顯示古詩名及編號

• 修改主界面類，給串列控制元件注冊專案單擊監聽器
  
• 引數position是用戶單擊串列項的位置，從0開始的，比如用戶單擊了第3個串列項，那么position就等于2，也就是說，position要加1才是行號
• 引數id的值與引數position的值相等，兩個引數只是型別不同而已

9、啟動應用，查看效果

10、創建顯示古詩內容的界面 - ContentActivity

• 基于模板來創建ContentActivity
  
  

11、內容界面布局資源檔案content_activity.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:background="@drawable/background"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginTop="30dp"
        android:layout_marginBottom="20dp"
        android:layout_weight="1"
        android:gravity="center_vertical"
        android:textColor="#ff00ff"
        android:textSize="40sp" />

    <TextView
        android:id="@+id/tvAuthor"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginBottom="20dp"
        android:layout_weight="1"
        android:gravity="center_vertical"
        android:textColor="#000000"
        android:textSize="25sp" />

    <TextView
        android:id="@+id/tvContent"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginBottom="20dp"
        android:layout_weight="8"
        android:textColor="#0000ff"
        android:textSize="30sp" />

    <Button
        android:id="@+id/btnBack"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:onClick="doBack"
        android:text="@string/back"
        android:textSize="20sp" />
</LinearLayout>                                                       

12、字串資源檔案strings.xml

13、修改主界面類，實作視窗跳轉

14、修改內容界面 - ContentActivity

• 宣告變數
  
• 通過資源識別符號獲取控制元件實體
  
• 獲取視窗跳轉的意圖，獲取意圖攜帶的資料，進行相應的處理
  
• 回傳目錄按鈕單擊事件處理方法
  

15、啟動應用，查看效果

思考題：假如在一個視窗里顯示一首長詩，比如《長恨歌》，那么該如何處理？

• 修改字串資源檔案strings.xml
  
• 修改內容布局資源檔案activity_content.xml - 用滾動視圖包裹顯示古詩內容的標簽
  
• 啟動應用，查看效果
  

16、源代碼

（1）主界面類 - MainActivity

package net.hw.read_ancient_poetry;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    private ListView lvPoemTitle; // 顯示古詩標題的串列控制元件 - 展示
    private ArrayAdapter<String> adapter; // 陣列配接器 - 橋梁
    private String[] strPoemTitles; // 古詩標題陣列 - 資料源

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 利用布局資源檔案設定用戶界面
        setContentView(R.layout.activity_main);

        // 通過資源識別符號獲取控制元件實體
        lvPoemTitle = findViewById(R.id.lvPoemTitle);

        // 初始化古詩標題陣列，作為資料源
        final String[] titles = getResources().getStringArray(R.array.titles);
        strPoemTitles = new String[titles.length];
        for (int i = 0; i < strPoemTitles.length; i++) {
            strPoemTitles[i] = (i + 1) + ". " + titles[i];
        }

        // 創建陣列配接器
        adapter = new ArrayAdapter<>(
                this, // 引數1：背景關系環境
                R.layout.poem_list_item, // 串列項模板
                strPoemTitles // 資料源 - 陣列
        );

        // 給串列控制元件設定配接器
        lvPoemTitle.setAdapter(adapter);

        // 給串列控制元件注冊專案單擊監聽器
        lvPoemTitle.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int position, long id) {
                Toast.makeText(MainActivity.this, "你選擇了第" + (position + 1)
                        + "首古詩【" + titles[position] + "】", Toast.LENGTH_SHORT).show();
                // 創建視窗跳轉的意圖
                Intent intent = new Intent(MainActivity.this, ContentActivity.class);
                // 通過意圖攜帶資料
                intent.putExtra("position", position);
                // 按照意圖啟動目標組件
                startActivity(intent);
            }
        });
    }
}

（2）內容界面 - ContentActivity

package net.hw.read_ancient_poetry;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;

import androidx.appcompat.app.AppCompatActivity;

public class ContentActivity extends AppCompatActivity {

    private TextView tvTitle;
    private TextView tvAuthor;
    private TextView tvContent;
    private String[] titles;
    private String[] authors;
    private String[] contents;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 利用布局資源檔案設定用戶界面
        setContentView(R.layout.activity_content);

        // 通過資源識別符號獲取控制元件實體
        tvTitle = findViewById(R.id.tvTitle);
        tvAuthor = findViewById(R.id.tvAuthor);
        tvContent = findViewById(R.id.tvContent);

        // 獲取視窗跳轉的意圖
        Intent intent = getIntent();
        // 判斷意圖是否為空
        if (intent != null) {
            // 獲取意圖攜帶的資料
            int position = intent.getIntExtra("position", 0);
            // 獲取古詩標題陣列
            titles = getResources().getStringArray(R.array.titles);
            // 獲取古詩作者陣列
            authors = getResources().getStringArray(R.array.authors);
            // 獲取古詩內容陣列
            contents = getResources().getStringArray(R.array.contents);

            // 設定古詩標題標簽文本
            tvTitle.setText(titles[position]);
            // 設定古詩作者標簽文本
            tvAuthor.setText(authors[position]);
            // 設定古詩內容標簽文本
            tvContent.setText(contents[position]);
        }
    }

    /**
     * 回傳目錄按鈕單擊事件處理方法
     *
     * @param view
     */
    public void doBack(View view) {
       finish();
    }
}

（3）字串資源檔案strings.xml

<resources>
    <string name="app_name">閱讀古詩</string>

    <string name="back">回傳目錄</string>

    <string-array name="titles">
        <item>靜夜思</item>
        <item>登鸛雀樓</item>
        <item>相思</item>
        <item>聽彈琴</item>
        <item>登樂游原</item>
        <item>朝發白帝城</item>
        <item>巴山夜雨</item>
        <item>渭城曲</item>
        <item>春夜喜雨</item>
        <item>離離原上草</item>
        <item>示兒</item>
    </string-array>

    <string-array name="authors">
        <item>唐·李白</item>
        <item>唐·王之渙</item>
        <item>唐·王維</item>
        <item>唐·劉長卿</item>
        <item>唐·李商隱</item>
        <item>唐·李白</item>
        <item>唐·杜牧</item>
        <item>唐·王維</item>
        <item>唐·杜甫</item>
        <item>唐·白居易</item>
        <item>宋·陸游</item>
    </string-array>

    <string-array name="contents">
        <item>床前明月光，\n疑是地上霜，\n舉頭望明月，\n低頭思故鄉，</item>
        <item>白日依山盡，\n黃河入海流，\n欲窮千里目，\n更上一層樓，</item>
        <item>紅豆生南國，\n春來發幾枝，\n愿君多采擷，\n此物最相思，</item>
        <item>泠泠七弦上，\n靜聽松風寒，\n古調雖自愛，\n今人多不彈，</item>
        <item>向晚意不適，\n驅車登古原，\n夕陽無限好，\n只是近黃昏，</item>
        <item>朝辭白帝彩云間，\n千里江陵一榷訓，\n兩岸猿聲啼不住，\n輕舟已過萬重山，</item>
        <item>君問歸期未有期，\n巴山夜雨漲秋池，\n何當共剪西窗燭，\n卻話巴山夜雨時，</item>
        <item>渭城朝雨浥輕塵，\n客舍青青柳色新，\n勸君更盡一杯酒，\n西出陽關無故人，</item>
        <item>好雨知時節，當春乃發生，\n隨風潛入夜，潤物細無聲，\n野徑云俱黑，江船火獨明，\n曉看紅濕處，花重錦官城，</item>
        <item>離離原上草，一歲一枯榮，\n野火燒不盡，春風吹又生，\n遠芳侵古道，晴翠接荒城，\n又送王孫去，萋萋滿別情，</item>
        <item>死去元知萬事空，\n但悲不見九州同，\n王師北定中原日，\n家祭無忘告乃翁，\n
            死去元知萬事空，\n但悲不見九州同，\n王師北定中原日，\n家祭無忘告乃翁，\n
            死去元知萬事空，\n但悲不見九州同，\n王師北定中原日，\n家祭無忘告乃翁，\n
            死去元知萬事空，\n但悲不見九州同，\n王師北定中原日，\n家祭無忘告乃翁，\n</item>
    </string-array>
</resources>

（4）內容布局資源檔案activity_content.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:background="@drawable/background"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginTop="30dp"
        android:layout_marginBottom="20dp"
        android:layout_weight="1"
        android:gravity="center_vertical"
        android:textColor="#ff00ff"
        android:textSize="40sp" />

    <TextView
        android:id="@+id/tvAuthor"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginBottom="20dp"
        android:layout_weight="1"
        android:gravity="center_vertical"
        android:textColor="#000000"
        android:textSize="25sp" />

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:scrollbars="vertical"
        android:layout_weight="8">

        <TextView
            android:id="@+id/tvContent"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="20dp"
            android:textColor="#0000ff"
            android:gravity="center_horizontal"
            android:textSize="30sp"/>
    </ScrollView>

    <Button
        android:id="@+id/btnBack"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:onClick="doBack"
        android:text="@string/back"
        android:textSize="20sp" />
</LinearLayout>