2. 程式人生 > >一步一步學android之控制元件篇——ListView自定義顯示資料格式

一步一步學android之控制元件篇——ListView自定義顯示資料格式

阿新 • • 發佈：2019-02-02

上一篇部落格說了ListView的基本使用，這篇將是對ListView的使用進行一個提高，在日常生活中，如果單單給你看一些圖片，你可能都不知道這個圖片表達的什麼意思，但是要是在圖片旁邊寫的備註或者加個名字，我們就會很清楚的知道這張圖片是什麼，所以就要使用到SimpleAdapter類了，下面用個例子來說明SImpleAdapter在ListView中的作用。

下面要實現的需求是，用ListView顯示9個女明星的照片，姓名和簡介，然後點選照片可以檢視原圖。

效果如下：


從上面的效果圖可以看出來這個ListView的項是包含了圖片和文字兩個物件的，所以我們需要先定義一個佈局檔案來作為顯示每一項的模板，listview_item.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" >

    <ImageView
        android:id="@+id/people"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="10dp" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:text="TextView" />

        <TextView
            android:id="@+id/introduce"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:text="TextView" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="vertical" >
    </LinearLayout>

</LinearLayout>

然後就是初始化ListView將資料加進去，在MainActivity中進行操作，MainActivity： 
package com.example.listviewbasic;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ListView;
import android.widget.SimpleAdapter;

public class MainActivity extends Activity {

	private ListView listView = null;
	private List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
	private SimpleAdapter simpleAdapter = null;

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

	private void initView() {
		listView = (ListView) super.findViewById(R.id.listView);
		settingAdapter();
		listView.setAdapter(simpleAdapter);
	}

	private void settingAdapter() {
		initList();
		// map中的key
		String from[] = new String[] { "people", "name", "introduce" };
		// 模板中的元件id
		int to[] = new int[] { R.id.people, R.id.name, R.id.introduce };
		simpleAdapter = new SimpleAdapter(this, list, R.layout.listview_item,
				from, to);
	}

	private void initList() {
		// 顯示的圖片資源
		int[] res = new int[] { R.drawable.liushishi, R.drawable.liushishi2,
				R.drawable.aiweier, R.drawable.aiweier2, R.drawable.piaoxinhui,
				R.drawable.piaoxinhui2, R.drawable.w, R.drawable.yuner,
				R.drawable.yuner2 };
		// 定義一個二維陣列來顯示姓名和簡介
		String string[][] = new String[][] { { "劉詩詩", "劉詩詩簡介" },
				{ "劉詩詩2", "劉詩詩2簡介" }, { "艾薇兒", "艾薇兒簡介" }, { "艾薇兒", "艾薇兒2簡介" },
				{ "樸信惠", "樸信惠簡介" }, { "樸信惠2", "樸信惠2簡介" }, { "樸信惠3", "樸信惠3簡介" },
				{ "允兒", "允兒簡介" }, { "允兒2", "允兒2簡介" }, };
		//初始化list資料
		for (int i = 0; i < 9; i++) {
			HashMap<String, Object> map = new HashMap<String, Object>();
			map.put("people", res[i]);
			map.put("name", string[i][0]);
			map.put("introduce", string[i][1]);
			list.add(map);
		}
	}
}

按照如上操作就可以實現上面第一張效果圖的效果，對程式碼的解釋我直接寫在程式碼中，下面實現點選圖片檢視原圖，我在這裡採用了popwindow，對於這個元件，後面也會有講，這裡就提前用下，同時我這裡為了效果感，還採用了動畫檔案，下面開始實現，首先是兩個動畫檔案pophidden_anim.xml： 
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- 透明度漸變 -->

    <scale
        android:duration="325"
        android:fillAfter="false"
        android:fromXScale="1"
        android:fromYScale="1"
        android:interpolator="@android:anim/linear_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.5"
        android:toYScale="1.5" >
    </scale>

    <alpha
        android:duration="400"
        android:fromAlpha="1"
        android:interpolator="@android:anim/linear_interpolator"
        android:toAlpha="0" />

</set>

popshow_anim.xml： 
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <scale
        android:duration="325"
        android:fillAfter="true"
        android:fromXScale="1.5"
        android:fromYScale="1.5"
        android:interpolator="@android:anim/linear_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.0"
        android:toYScale="1.0" >
    </scale>

    <alpha
        android:duration="400"
        android:fromAlpha="0"
        android:interpolator="@android:anim/linear_interpolator"
        android:toAlpha="1" />

</set>
然後是為點選顯示原圖加一個顯示佈局，show_item.xml： 
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" 
    android:background="#b0000000">

    <ImageView
        android:id="@+id/show_img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" />

</RelativeLayout>


接下來就是為ListView加OnItemClickListener事件，然後在裡面對檢視原圖的需求進行實現，修改後的MainActivity.java： 
package com.example.listviewbasic;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import android.app.Activity;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.ViewGroup.LayoutParams;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.PopupWindow;
import android.widget.SimpleAdapter;

public class MainActivity extends Activity implements OnItemClickListener {

	private ListView listView = null;
	private List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
	private SimpleAdapter simpleAdapter = null;

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

	private void initView() {
		listView = (ListView) super.findViewById(R.id.listView);
		settingAdapter();
		listView.setAdapter(simpleAdapter);
		listView.setOnItemClickListener(this);
	}

	private void settingAdapter() {
		initList();
		// map中的key
		String from[] = new String[] { "people", "name", "introduce" };
		// 模板中的元件id
		int to[] = new int[] { R.id.people, R.id.name, R.id.introduce };
		simpleAdapter = new SimpleAdapter(this, list, R.layout.listview_item,
				from, to);
	}

	private void initList() {
		// 顯示的圖片資源
		int[] res = new int[] { R.drawable.liushishi, R.drawable.liushishi2,
				R.drawable.aiweier, R.drawable.aiweier2, R.drawable.piaoxinhui,
				R.drawable.piaoxinhui2, R.drawable.w, R.drawable.yuner,
				R.drawable.yuner2 };
		// 定義一個二維陣列來顯示姓名和簡介
		String string[][] = new String[][] { { "劉詩詩", "劉詩詩簡介" },
				{ "劉詩詩2", "劉詩詩2簡介" }, { "艾薇兒", "艾薇兒簡介" }, { "艾薇兒", "艾薇兒2簡介" },
				{ "樸信惠", "樸信惠簡介" }, { "樸信惠2", "樸信惠2簡介" }, { "樸信惠3", "樸信惠3簡介" },
				{ "允兒", "允兒簡介" }, { "允兒2", "允兒2簡介" }, };
		//初始化list資料
		for (int i = 0; i < 9; i++) {
			HashMap<String, Object> map = new HashMap<String, Object>();
			map.put("people", res[i]);
			map.put("name", string[i][0]);
			map.put("introduce", string[i][1]);
			list.add(map);
		}
	}

	@Override
	public void onItemClick(AdapterView<?> parent, View view, int position,
			long id) {
		// TODO Auto-generated method stub
		//點選list的item時獲取ImageView物件
		final ImageView img = (ImageView) view.findViewById(R.id.people);
		//設定單擊事件
		img.setOnClickListener(new View.OnClickListener() {

			@Override
			public void onClick(View v) {
				try {
					// 動態載入要用來顯示點選放大的圖片的佈局
					View show = LayoutInflater.from(MainActivity.this).inflate(
							R.layout.show_item, null);
					// 定義一個popwindow
					final PopupWindow pw = new PopupWindow(show,
							LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT,
							true);
					// 獲取show_item佈局中的ImageView id
					ImageView showImg = (ImageView) show
							.findViewById(R.id.show_img);
					// 將點選的圖片設定到showImg中
					showImg.setImageDrawable(img.getDrawable());
					// 點選螢幕關閉popwindow，這裡是不管點選螢幕上什麼地方都關閉
//					pw.setTouchInterceptor(new OnTouchListener() {
//
//						@Override
//						public boolean onTouch(View v, MotionEvent event) {
//							// TODO Auto-generated method stub
//							pw.dismiss();
//							return false;
//						}
//					});
					// 控制點選能正常關閉popwindow，這句話很重要。（去掉不能正常監聽返回鍵）
					pw.setBackgroundDrawable(new BitmapDrawable());
					// 設定區域外可獲取觸控事件
					pw.setOutsideTouchable(true);
					// 設定動畫
					pw.setAnimationStyle(R.style.mypopwindow_anim_style);
					// 居中
					pw.showAtLocation(v, Gravity.CENTER, 0, 0);
					pw.update();
				} catch (Exception e) {
					e.printStackTrace();
				}
			}
		});
	}
}

最終效果就是效果圖那樣的效果，就寫到這裡了。

相關推薦

一步一步學android之控制元件篇——ListView自定義顯示資料格式

上一篇部落格說了ListView的基本使用，這篇將是對ListView的使用進行一個提高，在日常生活中，如果單單給你看一些圖片，你可能都不知道這個圖片表達的什麼意思，但是要是在圖片旁邊寫的備註或者加個名字，我們就會很清楚的知道這張圖片是什麼，所以就要使用到SimpleAda

Android的控制元件架構與自定義控制元件原理

android控制元件架構 Android中的每個控制元件都會在介面上得到一塊矩形的區域，而在Android中，控制元件大致被分為兩類，即ViewGroup 控制元件和View控制元件。ViewGroup控制元件作為父控制元件可以包含多個View控制元件，並管

一步一步學習ObjectDataSource控制元件－－自定義分頁排序

在上篇http://mqingqing123.cnblogs.com/archive/2006/04/07/369020.html介紹了ObjectDataSource的常規使用。上次一個網友希望介紹一下自定義分頁的問題，本文說明如何使用ObjectDataSource自定義

《Android群英傳》學習筆記之Android控制元件架構與自定義控制元件詳解

一、Android控制元件架構： 控制元件大致分為兩類：ViewGroup控制元件與View控制元件。View是繪製在螢幕上的使用者能與之互動的一個物件。而ViewGroup則是一個用於存放其他Vi

Android之控制元件與佈局，結構知識點，基礎完結

在Android中我們常常用到很多UI控制元件，如TextView，EditText，ImageView，Button，ImageButton，ToggleButton，CheckBox，RadioButton等等這些可以自己多用就會了。 也會學到一些

Android之控制元件保持在軟鍵盤上面

本文主要記錄一些零碎的東西 軟體盤彈出時，底部的控制元件在軟鍵盤上面，即隨著軟鍵盤彈出而向上移動 activity非全屏時，使用RelativeLayout + ScrollView 可以很簡單的實現，簡單演示一下 <?xml version="1.0" enco

android高階控制元件（ListView） 列表控制元件

在strings中建立一個strings.xml，並定義字串陣列，用於當資料來源 張三 李四 王五 張三丰 abc abb

Android之——史上最簡單自定義開關按鈕的實現

很多時候，我們在很多無論是Android還是IOS的APP中都會遇到這樣的一種效果，有一個按鈕，我們點選一下，便會滑動一下，一會顯示“開”，一會顯示“關”，這便是開關按鈕了，比如：很多Android手機的設定功能裡，就有很多功能是用開關按鈕實現的，那麼這些開關按鈕時如何實

Android控制元件外邊框自定義

1、在drawable裡面新建自定義的資原始檔shape <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/an

原始碼解讀android 5.0控制元件TabLayout無法自定義下劃線寬度問題!

首先我要說的是TabLayout這個控制元件非常好用，隨便搜尋下網上一大堆的關於TabLayout的用法，因此我也就不具體介紹TabLayout的使用了。 這裡我們談談為什麼TabLayout無法自定義下劃線寬度問題，廢話不多說，上原始碼： 首先找遍原始

VC之控制元件篇（白喬原創）

1 使用Windows標準控制元件 1.1 常見控制元件列表 Windows標準控制元件即普通控制元件，撰寫此文時，筆者每天面對的Word就帶了一臉的控制元件，當然你肯定也熟悉：字型選擇下拉框、工具欄、滾動條、狀態列，如此等等。 常見的Windows標準控制元件在VC裡

Android自定義控制元件佈局重新整理自定義控制元件回到初始位置問題的解決

在闡述我所遇到的問題之前，先通過檢視Android原始碼發現這樣幾個程式碼樣例： 1.  grep extends\ ViewGroup.MarginLayoutParams ./core/java/android/widget/ -rn ./core/java/andr

閱讀徐宜生《Android群英傳》的筆記——第3章 Android控制元件架構與自定義控制元件詳解（3.6-3.8）

3.6 自定義 View 在自定義 View 時，我們通常會去重寫 onDraw() 方法來繪製 View 的顯示內容。如果該 View 還需要使用 wrap_content 屬性，那麼還必須重寫 onMeasure() 方法。另外，通過自定義 attr

Android 自定義控制元件起步：自定義TextView

首先我們看一下我們要達到的效果： 在點選我們自定義的View時文字會隨機改變。好，現在我們開始… 很多的Android入門程式猿來說對於Android自定義View，可能都是比較恐懼的，但是這又是高手進階的必經之路，所有準備在自定義View上面花

Android自定義控制元件---組合控制元件（包括自定義屬性）

今天和大家分享下組合控制元件的使用。很多時候android自定義控制元件並不能滿足需求，如何做呢？很多方法，可以自己繪製一個，可以通過繼承基礎控制元件來重寫某些環節，當然也可以將控制元件組合成一個新控制元件，這也是最方便的一個方法。今天就來介紹下如何使用組合控制元件，

android自定義控制元件_完全自定義控制元件（自定義開關）

前面總結到自定義控制元件分為 組合控制元件 繼承已有控制元件 比如自定義SmartImageView繼承ImageView 完全自定義控制元件 上一篇寫了自定義控制元件的自定義屬性深入理解點選連結檢視，是自定控制元件比較難以理解的地方，但是是很重

Android自定義控制元件2：自定義帶下劃線的文字或按鈕、組合使用可切換tab

package com.custom.controls.button; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Color; import android.u

自定義控制元件裡面使用自定義屬性，出現錯誤Can't convert value at index 0 to color: type=0x5

首先背景是eclipse的專案轉到Androidstudio上來，as的版本是3.0以上的，然後新建專案，複製貼上xxx的，首先出了個問題，佈局檔案說有錯，需要正確build才行，有毒，坑的很，重啟as才搞定。（對了，因為新版的as新建佈局，都是用的constrantlayo

自定義控制元件起步(四)--自定義驗證碼(下)

接著上一篇,遺留了幾個問題,年分別去解決 1,我們先新增一個自定義屬性   驗證碼的數值型別 <attr name="security_text_type" format="enu

一個好看的WPF開源控制元件庫——PanuonUI自定義樣式控制元件庫

PanuonUI 這是一個開源專案，版權歸本喵所有。該開源專案遵循Apache2.0許可協議，簡單點說就是不限制使用途徑（商業也可以用），但不允許抄襲。 GitHub傳送門：https://github.com/Ruris/PanuonUI 本開源庫目前仍