1. 程式人生 > >Android中GridView以表格形式顯示多張圖片(仿桌面)

Android中GridView以表格形式顯示多張圖片(仿桌面)

  GridView可以理解為顯示多列的ListView,這次就利用GridView做一個仿桌面的案例。GridView和ListView的使用相同,都基本使用以下三步走:設定資料來源,設定介面卡,設定監聽器。

Demo展示圖片

這裡寫圖片描述

佈局程式碼

//(layout)activity_main.xml
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="#000" tools:context="com.test.gridview.MainActivity">
<GridView android:id="@+id/gridView" android:numColumns="3" android:layout_marginTop
="20dp" android:horizontalSpacing="30dp" android:verticalSpacing="30dp" android:layout_width="wrap_content" android:layout_height="wrap_content"/>
<!--注 numColumns 表示GridView的列數 horizontalSpacing 表示水平間距 verticalSpacing 表示垂直間距 -->
</LinearLayout> ------------------------------------------------------------------- //(layout)gridview_item.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#000" android:gravity="center"> <ImageView android:id="@+id/image" android:src="@mipmap/address_book" android:layout_width="60dp" android:layout_height="60dp"/> <TextView android:id="@+id/text" android:layout_marginTop="6dp" android:text="文字" android:textColor="#fff" android:layout_centerHorizontal="true" android:layout_below="@+id/image" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </LinearLayout>

Activity程式碼

//MainActivity
import android.content.Context;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.SimpleAdapter;
import android.widget.Toast;
import java.util.HashMap;
import java.util.LinkedList;
import java.util.List;
import java.util.Map;

public class MainActivity extends AppCompatActivity {

    private Context mContext = MainActivity.this;
    private GridView mGridView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initData();
    }

    private void initView(){
        mGridView = (GridView) findViewById(R.id.gridView);
    }

    private void initData(){
        List<Map<String , Object>> list = new LinkedList<>();
        int[] icon = {R.mipmap.address_book , R.mipmap.calendar , R.mipmap.camera , R.mipmap.clock , R.mipmap.games_control , R.mipmap.messenger
        , R.mipmap.ringtone , R.mipmap.settings , R.mipmap.speech_balloon , R.mipmap.weather , R.mipmap.world , R.mipmap.youtube};

        final String[] iconName ={"通訊錄" , "日曆" , "照相機" , "時鐘" , "遊戲" , "簡訊" , "鈴聲" , "設定" , "語音" , "天氣" , "瀏覽器" , "視訊"};

        // 在for迴圈裡填充資料
        for(int i = 0 ; i < icon.length ;i++){
            Map<String , Object> map = new HashMap<>();
            map.put("image" , icon[i]);
            map.put("text" , iconName[i]);
            list.add(map);
        }

        SimpleAdapter adapter = new SimpleAdapter(this, list , R.layout.gridview_item ,
                new String[]{"image" , "text"} , new int[]{R.id.image , R.id.text});

        mGridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int position, long id) {
                Toast.makeText(mContext , "正在進入" + iconName[position] + "應用" , Toast.LENGTH_SHORT).show();
            }
        });

        mGridView.setAdapter(adapter);
    }
}