Android中利用ListView和GridView實現列表視圖和網格(圖標)視圖的相互切換顯示

想必大家在用電腦上網的時候，都會碰到過，文件的顯示方式，一般有列表顯示，圖標顯示，等顯示方式。當然，android中也有這種顯示方式。今天就來一起實現一下。
首先，說一下，剛開始因爲項目需求，要有這個列表和網格來回切換顯示的功能，沒當回事，想着偷懶網上應該挺多，然後，找了大半天發現寥寥無幾，唯獨的一篇文章是寫這個的，但是被轉載了多次，都是相同的。可能原文作者只是提供了一個思路罷了，代碼給的相當模糊。以至於被模糊的轉載了好多次。打開一個連接發現一模一樣，就連bug都一樣。沒辦法，還是自己動手，豐衣足食吧。

先來看看實現後的真機效果圖:

1.首先，是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:orientation="vertical"
    tools:context="com.example.myfiledemo.MainActivity" >

        <Button
            android:id="@+id/btn_select_show"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" 
            android:gravity="center"
            android:text="切換視圖"/>

        <GridView
            android:id="@+id/gridview1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:columnWidth="60dp"
            android:gravity="center"
            android:horizontalSpacing="10dp"
            android:numColumns="auto_fit"
            android:padding="10dp"
            android:stretchMode="columnWidth"
            android:verticalSpacing="10dp" />

        <ListView
            android:id="@+id/listview1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"/>

</LinearLayout>

佈局也同樣簡單，一個ListView，一個GridView，還有一個可點擊切換的Button.
這裏GridView中的android:numColumns=”auto_fit”屬性是根據手機屏幕會系統自動去設置顯示列數，可適配平板。好了，關於GridView的使用屬性，不是本篇博客的重點，想要了解的可自行查閱學習。

-

2.items.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="vertical" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"/>

</LinearLayout>

items.xml也很簡單，不知道你們都叫這個文件什麼，我本人習慣叫模版

-

3.ManiActivity.java中

package com.example.myfiledemo;

import java.util.ArrayList;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.Button;
import android.widget.GridView;
import android.widget.ListView;
import android.widget.Toast;
/**
 * 視圖切換  列表 網格
 * @author NanFeiLong
 *
 */
public class MainActivity extends Activity implements OnClickListener,
        OnItemClickListener {

    private boolean isShowView = true;
    private GridView mGridView;
    private ListView mListView;
    private ArrayList<MyBean> mArrayList;
    private Button mBtnSelectShow;
    private MyAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mListView = (ListView) findViewById(R.id.listview1);
        mGridView = (GridView) findViewById(R.id.gridview1);
        mBtnSelectShow = (Button) findViewById(R.id.btn_select_show);
        initdata();// 數據
        mBtnSelectShow.setOnClickListener(this);
        adapter = new MyAdapter(this, mArrayList);
        setLayout();

    }

    /**
     * 添加數據
     */
    private void initdata() {
        // TODO Auto-generated method stub
        mArrayList = new ArrayList<MyBean>();
        for (int i = 0; i < 20; i++) {
            mArrayList.add(new MyBean("項目"+i, R.drawable.format_folder));
        }
    }
        /**
         *實現切換視圖
         */
    private void setLayout() {
        if (isShowView) {
            if (mGridView == null) {
                mGridView = (GridView) findViewById(R.id.gridview1);
            }
            mGridView.setVisibility(View.VISIBLE);
            mGridView.setAdapter(adapter);
            mGridView.setOnItemClickListener(this);
            mListView.setVisibility(View.GONE);
            mGridView.setSelection(0);
            isShowView = !isShowView;
        } else {
            if (mListView == null) {
                mListView = (ListView) findViewById(R.id.listview1);
            }
            mListView.setVisibility(View.VISIBLE);
            mListView.setAdapter(adapter);
            mListView.setOnItemClickListener(this);
            mGridView.setVisibility(View.GONE); 
            mListView.setSelection(0);//可將第一個item對我們可見顯示，用於錯亂，也可以不要
            isShowView = !isShowView;
        }
    }

    @Override
    public void onClick(View v) {
        // TODO Auto-generated method stub
        switch (v.getId()) {
        case R.id.btn_select_show:
            setLayout();
            break;
        default:
            break;
        }
    }

    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position,
            long id) {
        // TODO Auto-generated method stub
        switch (parent.getId()) {
        case R.id.gridview1:
            Toast.makeText(MainActivity.this,
                    "gridview-" + mArrayList.get(position).getIconName(),
                    Toast.LENGTH_SHORT).show();
            break;
        case R.id.listview1:
            Toast.makeText(MainActivity.this,
                    "listview-" + mArrayList.get(position).getIconName(),
                    Toast.LENGTH_SHORT).show();
            break;
        default:
            break;
        }

    }

}

可以看到其中的一個核心方法setLayout()是實現的重點所在，當onCreate時候執行一次setLayout()方法，讓其只顯示一個，然後是每當點擊一次button會執行一次setLayout()方法，顯示就會在列表和網格視圖之間切換一次，在其中我們設置了一個flag，isShowView。當setLayout()的最後利用isShowView = !isShowView;給其膚質，這樣就會來回切換啦。

4. MyAdapter.java

package com.example.myfiledemo;

import java.util.ArrayList;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
/**
 * 自定義BaseAdapter
 * @author NanFeiLong
 *
 */

public class MyAdapter extends BaseAdapter {

    private LayoutInflater mInflater = null;
    private Context mContext;
    private ArrayList<MyBean> mArrayList = null;

    public MyAdapter(Context context, ArrayList<MyBean> arrayList) {
        mContext = context;
        mArrayList = arrayList;
        mInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return mArrayList == null ? 0 : mArrayList.size();
    }

    @Override
    public Object getItem(int position) {
        // TODO Auto-generated method stub
        return mArrayList == null ? null : mArrayList.get(position);
    }

    @Override
    public long getItemId(int position) {
        // TODO Auto-generated method stub
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub
        ViewHolder holder = null;
        MyBean mBean = (MyBean) getItem(position);
        if (convertView == null) {
            convertView = mInflater.from(mContext).inflate(R.layout.items, parent, false);
            holder = new ViewHolder();
            holder.imageView = (ImageView) convertView.findViewById(R.id.imageView1);
            //holder.imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);    
            holder.textView = (TextView) convertView.findViewById(R.id.textView1);
            //注意這裏是個坑，如果寫在這裏的話，listview中會出現item重複顯示的bug，
            //本人當時由於寫錯了,在這裏走了冤枉了，望讀者能注意
            //holder.imageView.setImageResource(mBean.getImageId());
            //holder.textView.setText(mBean.getIconName());
            convertView.setTag(holder);
        }else {
             holder = (ViewHolder) convertView.getTag();
        }
        holder.imageView.setImageResource(mBean.getImageId());
        holder.textView.setText(mBean.getIconName());
        return convertView;
    }


    class ViewHolder {
        ImageView imageView;
        TextView textView;
    }  

}

5.最後還有一個自己定義的實體類MyBean.java,用於存儲imageView和textView，

package com.example.myfiledemo;


/**
 * 實體類
 * @author NanFeiLong
 *
 */

public class MyBean {

    private String iconName; 
    private int  imageId;  

    public MyBean(String iconName, int imageId) {
        super();
        this.iconName = iconName;
        this.imageId = imageId;
    }

    public String getIconName() {
        return iconName;
    }

    public void setIconName(String iconName) {
        this.iconName = iconName;
    }

    public int getImageId() {
        return imageId;
    }

    public void setImageId(int imageId) {
        this.imageId = imageId;
    }


    @Override
    public String toString() {
        return "MyBean [iconName=" + iconName + ", imageId=" + imageId
                + ", getIconName()=" + getIconName() + ", getImageId()="
                + getImageId() + ", getClass()=" + getClass() + ", hashCode()="
                + hashCode() + ", toString()=" + super.toString() + "]";
    }












}

6.至此，算是結束了，運行之後，會出現如圖的效果

• 拓展一下，實際項目中，有可能列表佈局和網格佈局的items.xml都不同，可能還 有其他不同，這樣的情況，可以寫兩個items.xml。雖然代碼比較多，但是都是相同的。然後在setLayout()方法顯示每一個的時候，在去new相對應的adapter。這裏給出我自己項目中的一個實際應用

private void setLayout() {
        // TODO Auto-generated method stub
        if (isShowListView) {
            if (fileLv == null) {
                fileLv = (ListView) findViewById(R.id.listview);
            }
            fileLv.setVisibility(fileLv.VISIBLE);
            fileLv.setOnItemClickListener(this);
            fileGv.setVisibility(fileGv.GONE);
            sAdapter = new SimpleAdapter(this, aList, R.layout.listview_item,
                    new String[] { "fImg", "fName", "fInfo" }, new int[] {
                            R.id.file_img, R.id.file_name, R.id.file_info });
            fileLv.setAdapter(sAdapter);
            isShowListView = !isShowListView;
        } else {
            if (fileGv == null) {
                fileGv = (GridView) findViewById(R.id.gridview);
            }
            fileGv.setVisibility(fileGv.VISIBLE);
            fileGv.setOnItemClickListener(this);
            fileLv.setVisibility(fileLv.GONE);
            sAdapter = new SimpleAdapter(this, aList, R.layout.gridview_item,
                    new String[] { "fImg", "fName" }, new int[] {
                            R.id.iv_gridview, R.id.tv_name_gridview });
            fileGv.setAdapter(sAdapter);
            isShowListView = !isShowListView;
        }

    }

好了，到這裏應該都沒有疑問了。洗洗睡覺咯,祝各位大神好夢O(∩_∩)O~

源碼