8.高級控件(二)之ListView優化

一.SimpleAdapter實現ListView

首先,讓我們看下我們要實現的效果圖:


具體實現代碼如下:

layout 

activity_main.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="match_parent"
    tools:context="com.zking.android08_widgetplus.MainActivity">

    <ListView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/lv_main_list"
            />

</LinearLayout>
item_listview.xml(給activity_main.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"
    android:descendantFocusability="blocksDescendants"
    > <!--左邊圖片右邊文字,所以默認水平排列--><!--給某一行獲取焦點,讓那一行得以點擊-->

    <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:id="@+id/iv_item_listview_icon"
            android:src="@drawable/bird"/><!--默認圖片-->

    <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:id="@+id/tv_item_listview_title"
            android:textSize="30sp"
            android:text="XX"
            android:layout_weight="1"/><!--默認文字XX--><!--全中 1:把按鈕擠右邊去了-->

    <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="下載"
            android:id="@+id/btn_item_listview_download"/>

</LinearLayout>

Java

MainActivity.java

package com.zking.android08_widgetplus;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.SimpleAdapter;
import android.widget.ListView;
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 {

        private ListView lv_main_list;

        private int images[]={R.drawable.bird,R.drawable.cat,R.drawable.chicken,R.drawable.cow,R.drawable.dog};//放圖片的數組
        private String titles[]={"雷天使","Tom貓","KFC","老黑牛","單身狗"};//放文字的數組

        @Override
        protected void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                setContentView(R.layout.activity_main);
                lv_main_list=(ListView)findViewById(R.id.lv_main_list);

                //定義一組數據
                List<Map<String,Object>> list=new ArrayList<>();
                for (int i = 0; i < images.length; i++) {
                          Map<String,Object> map=new HashMap<>();
                          map.put("image",images[i]);
                          map.put("title",titles[i]);
                          list.add(map);
                }
                //實例化SimpleAdapter適配器                        android.R.layout.activity_list_item                                android.R.id.icon             android.R.id.text1
                SimpleAdapter adapter=new SimpleAdapter(this,list,R.layout.item_listview,new String[]{"image","title"},new int[]{R.id.iv_item_listview_icon,R.id.tv_item_listview_title});
                //給lv_main_list設置適配器
                lv_main_list.setAdapter(adapter);

                //給ListView設置點擊事件
                lv_main_list.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                            @Override
                            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                                    Toast.makeText(MainActivity.this, "跳轉到"+titles[position]+"頁面", Toast.LENGTH_SHORT).show();
                            }
                });
        }
}


二.BaseAdapter實現ListView

當SimpleAdapter滿足不了要求,所以我們要使用萬能適配器SimpleAdapter

注:佈局文件同上面的一樣

以下代碼效果圖跟上面的SimpleAdapter差不多,不過,還是有一點區別的,請看:


MainActivity.java

package com.zking.android08_widgetplus;

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

/**
 * 左邊是圖片,右邊是文字
 */
public class MainActivity extends AppCompatActivity {

        private ListView lv_main_list;

        private int images[]={R.drawable.bird,R.drawable.cat,R.drawable.chicken,R.drawable.cow,R.drawable.dog};//放圖片的數組
        private String titles[]={"雷天使","Tom貓","KFC","老黑牛","單身狗"};//放文字的數組

        @Override
        protected void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                setContentView(R.layout.activity_main);
                lv_main_list=(ListView)findViewById(R.id.lv_main_list);

                //給lv_main_list設置適配器
                lv_main_list.setAdapter(new MyAdapter());

                //給ListView設置點擊事件
                lv_main_list.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                            @Override
                            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                                    Toast.makeText(MainActivity.this, "跳轉到"+titles[position]+"頁面", Toast.LENGTH_SHORT).show();
                            }
                });
        }
        //寫個內部類
        class MyAdapter extends BaseAdapter{//Alt+回車+點Implement methods->出現四個方法
                @Override
                public int getCount() {//指定ListView有多少行數據
                      return titles.length;//數組長度
                }

                @Override
                public Object getItem(int position) {
                      return titles[position];//拿到這一行得內容
                }

                @Override
                public long getItemId(int position) {
                      return position;//返回每一行的下標
                }

                @Override
                public View getView(final int position, View convertView, ViewGroup parent) {//拿到每一行的(佈局文件)view(有多少行數據,就會調多少次)
                      //把佈局文件轉成View
                      View v= getLayoutInflater().inflate(R.layout.item_listview,null);
                      ImageView iv_item_listview_icon= (ImageView) v.findViewById(R.id.iv_item_listview_icon);
                      TextView tv_item_listview_title= (TextView) v.findViewById(R.id.tv_item_listview_title);
                      Button btn_item_listview_download= (Button) v.findViewById(R.id.btn_item_listview_download);

                      //設值
                      iv_item_listview_icon.setImageResource(images[position]);//拿到每一行的下標
                      tv_item_listview_title.setText(titles[position]);

                       //給按鈕設置點擊事件
                       btn_item_listview_download.setOnClickListener(new View.OnClickListener() {
                                   @Override
                                   public void onClick(View v) {
                                       Toast.makeText(MainActivity.this, "正在下載"+titles[position], Toast.LENGTH_SHORT).show();
                                   }
                       });
                       return v;
                }

        }
}

三.自定義適配器(ListView優化)

注:佈局文件同上面的一樣

爲什麼需要優化?

在使用ListView控件的過程中,由於加載條目過多在滑動時可能造成卡頓。

這是因爲ListView在當前屏幕顯示多少個條目,就會創建多少個對象,每一個條目都是一個對象。在滑動時,滑出屏幕的條目對象會被銷燬,新加載到屏幕上的條目會創建新的對象,這樣在ListView快速滑動時就會不斷的【創建對象】-->【銷燬對象】-->【創建對象】,並且每一個條目都需要加載一次佈局,加載佈局時會不斷進行findViewById()操作初始化控件,而佈局XML文件是以樹形進行加載,每次加載一個條目都需要從根節點進行初始化,這樣對內存消耗也比較大,並且浪費時間。如果每個條目都有圖片,圖片加載的時間比較長,就會造成內存溢出異常。爲此就需要對ListView進行優化。

效果圖:


優化的目的是在滑動時不會重複創建對象,減少內存消耗和屏幕渲染處理。具體步驟如下:

Java

MainActivity.java

package com.zking.android08_widgetplus;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

/**
 * 01234 01234循環
 * 夜神模擬器邊滑,控制檯數據邊走
 */
public class MainActivity extends AppCompatActivity {

        private ListView lv_main_list;

        private int images[]={R.drawable.bird,R.drawable.cat,R.drawable.chicken,R.drawable.cow,R.drawable.dog};//放圖片的數組
        private String titles[]={"雷天使","Tom貓","KFC","老黑牛","單身狗"};//放文字的數組

        @Override
        protected void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                setContentView(R.layout.activity_main);
                lv_main_list = (ListView) findViewById(R.id.lv_main_list);

                //給lv_main_list設置適配器
                lv_main_list.setAdapter(new MyAdapter());

                //給ListView設置點擊事件
                lv_main_list.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                        @Override
                        public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                            Toast.makeText(MainActivity.this, "跳轉到"+titles[i%titles.length]+"頁面", Toast.LENGTH_SHORT).show();
                        }
                });
        }
        //OOM錯誤: OutOfMemory  內存溢出
        class MyAdapter extends BaseAdapter{//Alt+回車+點Implement methods->出現四個方法
                @Override
                public int getCount() {//指定ListView有多少行數據
                      return 10000;//數組長度
                }
                @Override
                public Object getItem(int i) {
                      return titles[i%titles.length];//拿到這一行的內容
                }
                @Override
                public long getItemId(int i) {
                      return i;//返回每一行的下標
                }

                @Override
                public View getView(final int i, View view, ViewGroup viewGroup) {//拿到每一行的(佈局文件)view(有多少行數據,就會調多少次)

                        Log.i("test","i="+i+" "+view);

                        //優化
                        //把佈局文件轉成View
                        if(view==null){//上下挪動:Shift+Alt+上下鍵
                            view= getLayoutInflater().inflate(R.layout.item_listview,null);
                            ItemTag itemTag=new ItemTag();//實例化
                            itemTag.imageView= (ImageView) view.findViewById(R.id.iv_item_listview_icon);
                            itemTag.textView= (TextView) view.findViewById(R.id.tv_item_listview_title);
                            itemTag.button= (Button) view.findViewById(R.id.btn_item_listview_download);
                            view.setTag(itemTag);
                        }
                        ItemTag itemtag= (ItemTag) view.getTag();
                        //設值
                        itemtag.imageView.setImageResource(images[i%titles.length]);
                        itemtag.textView.setText(titles[i%titles.length]+i);

                        //給按鈕設置點擊事件
                        itemtag.button.setOnClickListener(new View.OnClickListener() {
                                @Override
                                public void onClick(View view) {
                                    Toast.makeText(MainActivity.this, "正在下載"+titles[i%titles.length], Toast.LENGTH_SHORT).show();
                                }
                        });
                        return view;
                }
        }
}
ItemTag.java
package com.zking.android08_widgetplus;

import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;

/**
 * Created by Administrator on 2017/6/9 0009.
 * 解決優化問題(實體類)
 * ItemTag每一行的標籤
 * 一行三個標籤:ImageView  TextView  Button
 */

public class ItemTag {
        public ImageView imageView;
        public TextView textView;
        public Button button;
}

如果要在控制檯查看打印,可以這樣:




歡迎大家來指出我的不足O(∩_∩)O


發佈了50 篇原創文章 · 獲贊 6 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章