一.最常用和最難用的控件(ListView)

分類：技術 時間:2016-10-25

ListView允許用戶通過手指上下滑動的方式將屏幕外的數據滾動到屏幕內,同時屏幕上原有的數據則會滾動出屏幕.

1. ListView的簡單用法

首先新建一個ListViewTest項目,然后修改 activity_main.xml 代碼. 

lt;LinearLayout xmlns:android=quot;http://schemas.android.com/apk/res/androidquot;
     android:layout_height=quot;match_parentquot; 
     android:layout_width=quot;match_parentquot;gt;
    lt;ListView 
        android:id=quot;@ id/list_viewquot;
        android:layout_width=quot;match_parentquot;
        android:layout_height=quot;match_parentquot;gt;lt;/ListViewgt;
lt;/LinearLayoutgt;

為ListView指定一個id,然后將寬度和高度都修改為 match_parent ,這樣ListView就占據了整個布局的空間.

ListView布局

接下來修改 MainActivity 中的代碼. 

public class MainActivity extends Activity {
    private String[] data = http://www.tuicool.com/articles/{quot;Applequot;,quot;Bananaquot;,quot;Orangequot;,quot;Watermelonquot;,
            quot;Pearquot;,quot;Grapequot;,quot;Pineapplequot;,quot;Strawberryquot;,quot;Cherryquot;,quot;Mangoquot;};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //先創建適配器,并且把內容放入去.
        ArrayAdapterlt;Stringgt; adapter = new ArrayAdapterlt;Stringgt;
        (MainActivity.this, android.R.layout.simple_list_item_1,data);
        ListView listView = (ListView) findViewById(R.id.list_view);
        //調用ListView的對象把適配器傳進去.
        listView.setAdapter(adapter);
    }


}

數組中的數據是無法直接傳遞給ListView的,我們需要借助適配器來完成,其中最好用的是 ArrayAdapter 它可以通過泛型來指定要添加的數據類型,然后在構造函數中把要適配的數據傳入即可.注意我們使用了 android.R.layout.simple_list_item_1 作為ListView的子項布局的id,以及要適配的數據.

最后,我們要調用ListView的 SetAdapter() 方法,將構造好的適配器對象傳遞進去,這樣ListView和數據之間的關聯就建立完成了.

ListView與數據關聯

2. 定制ListView的界面

接著定義一個實體類,作為ListView適配器的適配類型,新建類 Fruit ,需要準備一組圖片. 

public class Fruit {

    private String name;

    private int imageId;

    public Fruit(String name, int imageId) {
        this.name = name;
        this.imageId = imageId;
    }

    public String getName() {
        return name;
    }

    public int getImageId() {
        return imageId;
    }

}

Fruit 類中只有兩個字段, name 表示水果的名字, imageId 表示水果對應圖片的資源id.

然后需要為ListView的子項指定一個我們自定義的布局,在layout目錄下新建 fruit_item.xml 

lt;?xml version=quot;1.0quot; encoding=quot;utf-8quot;?gt;
lt;LinearLayout xmlns:android=quot;http://schemas.android.com/apk/res/androidquot;
    android:layout_width=quot;match_parentquot;
    android:layout_height=quot;match_parentquot; gt;

    lt;ImageView
        android:id=quot;@ id/fruit_imagequot;
        android:layout_width=quot;wrap_contentquot;
        android:layout_height=quot;wrap_contentquot; /gt;

    lt;TextView
        android:id=quot;@ id/fruit_namequot;
        android:layout_width=quot;wrap_contentquot;
        android:layout_height=quot;wrap_contentquot;
        android:layout_gravity=quot;centerquot;
        android:layout_marginLeft=quot;10dipquot; /gt;

lt;/LinearLayoutgt;

在這個布局里,我們定義了一個 ImageView 用于顯示水果的圖片,又定義了一個 TextView 用于顯示水果的名稱.

接下來需要創建一個自定義的適配器,這個適配器繼承自 ArrayAdapter ,并將泛型指定為 Fruit 類.新建類 FruitAdapter ,代碼如下: 

public class FruitAdapter extends ArrayAdapterlt;Fruitgt; {

    private int resourceId;

    public FruitAdapter(Context context, int textViewResourceId,
            Listlt;Fruitgt; objects) {
        super(context, textViewResourceId, objects);
        resourceId = textViewResourceId;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        Fruit fruit = getItem(position);
        View view = LayoutInflater.from(getContext()).inflate(resourceId, null);
        ImageView fruitImage = (ImageView) view.findViewById(R.id.fruit_image);
        TextView  fruitName = (TextView) view.findViewById(R.id.fruit_name);
        fruitImage.setImageResource(fruit.getImageId());  
        fruitName.setText(fruit.getName());
        return view;
    }

}

FruitAdapter重寫了父類的一組構造函數,用于將上下文,ListView子項布局的id和數據都傳遞進來.另外又重寫了 getView() 方法,首先通過 getItem() 方法得到當前項的Fruit的實例,然后使用 LayoutInflater 來為這個子項加載我們傳入的布局,接著調用View的 fndViewById()方法分別獲取到 ImageView 和TextView 的實例,并分別調用它們的 setImageResource 和 setText 方法來設置顯示的圖片和文字,最好將布局返回.

下面修改 MainActivity 中的代碼,如下所示: 

public class MainActivity extends Activity {

    private Listlt;Fruitgt; fruitList = new ArrayListlt;Fruitgt;();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initFruits();
        FruitAdapter adapter = new FruitAdapter(MainActivity.this,
                R.layout.fruit_item, fruitList);
        ListView listView = (ListView) findViewById(R.id.list_view);
        listView.setAdapter(adapter);

    }

    private void initFruits() {
        Fruit apple = new Fruit(quot;Applequot;, R.drawable.apple_pic);
        fruitList.add(apple);
        Fruit banana = new Fruit(quot;Bananaquot;, R.drawable.banana_pic);
        fruitList.add(banana);
        Fruit orange = new Fruit(quot;Orangequot;, R.drawable.orange_pic);
        fruitList.add(orange);
        Fruit watermelon = new Fruit(quot;Watermelonquot;, R.drawable.watermelon_pic);
        fruitList.add(watermelon);
        Fruit pear = new Fruit(quot;Pearquot;, R.drawable.pear_pic);
        fruitList.add(pear);
        Fruit grape = new Fruit(quot;Grapequot;, R.drawable.grape_pic);
        fruitList.add(grape);
        Fruit pineapple = new Fruit(quot;Pineapplequot;, R.drawable.pineapple_pic);
        fruitList.add(pineapple);
        Fruit strawberry = new Fruit(quot;Strawberryquot;, R.drawable.strawberry_pic);
        fruitList.add(strawberry);
        Fruit cherry = new Fruit(quot;Cherryquot;, R.drawable.cherry_pic);
        fruitList.add(cherry);
        Fruit mango = new Fruit(quot;Mangoquot;, R.drawable.mango_pic);
        fruitList.add(mango);
    }

}

可以看到,這里添加了一個 initFruits() 方法,用于初始化所有水果的數據,在Fruit類構造函數將水果的名字和對應圖片id傳入,然后把創建好的對象添加到水果列表中,接著我們再 onCreate() 方法中創建了FruitAdapter對象,并將FruitAdapter作為適配器傳遞給ListView.

3. 提升ListView的運行效率

因為在FruitAdapter的 getView() 方法中每次都將布局重新加載了一次,當ListView快速滾動的時候就會成為性能的阻礙. 

public class FruitAdapter extends ArrayAdapterlt;Fruitgt; {

    private int resourceId;

    public FruitAdapter(Context context, int textViewResourceId,
            Listlt;Fruitgt; objects) {
        super(context, textViewResourceId, objects);
        resourceId = textViewResourceId;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        Fruit fruit = getItem(position); // 獲取當前項的Fruit實例
        View view;
        if (convertView == null) {
            view = LayoutInflater.from(getContext()).inflate(resourceId, null);
        } else {
            view = convertView;
        }
        ImageView fruitImage = (ImageView) view.findViewById(R.id.fruit_image);
        TextView fruitName = (TextView) view.findViewById(R.id.fruit_name);
        fruitImage.setImageResource(fruit.getImageId());
        fruitName.setText(fruit.getName());
        return view;
    }

}

所以,我們再 getView() 方法中進行了判斷,如果convertView為空,則使用LayoutInflater去加載布局,如果不為空則直接對convertView進行重用.

每次在 getView() 方法中還是會調用View的 findViewById() 方法來獲取一次控件的實例,我們還可以借助一個ViewHolder來對這部分性能進行優化,修改FruitAdapter`中的代碼,如下所示: 

public class FruitAdapter extends ArrayAdapterlt;Fruitgt; {

    private int resourceId;

    public FruitAdapter(Context context, int textViewResourceId,
            Listlt;Fruitgt; objects) {
        super(context, textViewResourceId, objects);
        resourceId = textViewResourceId;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        Fruit fruit = getItem(position);
        View view;
        ViewHolder viewHolder;
        if (convertView == null) {
            view = LayoutInflater.from(getContext()).inflate(resourceId, null);
            viewHolder = new ViewHolder();
            viewHolder.fruitImage = (ImageView) view.findViewById(R.id.fruit_image);
            viewHolder.fruitName = (TextView) view.findViewById(R.id.fruit_name);
            view.setTag(viewHolder);
        } else {
            view = convertView;
            viewHolder = (ViewHolder) view.getTag();
        }
        viewHolder.fruitImage.setImageResource(fruit.getImageId());
        viewHolder.fruitName.setText(fruit.getName());
        return view;
    }

    class ViewHolder {

        ImageView fruitImage;

        TextView fruitName;

    }

}

我們新建了一個內部類ViewHolder,用于對控件的實例進行緩存.當convertView為空的時候,創建一個ViewHolder對象,并將控件的實例都存放在ViewHolder里,然后調用View的 SetTag() 方法,將 ViewHolder 對象存儲在 View 中.當convertView不為空的時候則調用View的 getTag() 方法,把ViewHolder重新取出.這樣所有控件的實例都緩存在ViewHolder里,就沒有必要每次都通過 findViewById() 方法來獲取控件實例了.

4. ListView的點擊事件

listView.setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick(AdapterViewlt;?gt; parent, View view,
                    int position, long id) {
                Fruit fruit = fruitList.get(position);
                Toast.makeText(MainActivity.this, fruit.getName(),
                        Toast.LENGTH_SHORT).show();
            }
        });

最終效果圖

5. 總結

  • 先在布局中加入ListView控件
  • 然后自定義適配器,這個適配器繼承自ArrayAdapter
  • 初始化數據,把數據傳入自定義適配器
  • 然后將適配器傳遞給ListView.

Tags: ListView

文章來源：http://www.jianshu.com/p/04e7a339180d

ads
ads
相關文章
ads

相關文章

ad