自定義 ListView 界面顯示

實現的效果圖：

 

1，定義一個實體類作為ListView適配器的適配類型，Base 只有三個字段 iconId表示對應圖片資源id, title和time 分別表示標題的時間

public class Base { private int iconId;//對應圖片資源id
    private String title; private String time; public Base(int iconId, String title, String time) { this.iconId = iconId; this.title = title; this.time = time; } public void setIconId(int iconId) { this.iconId = iconId; } public int getIconId() { return iconId; } public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } public String getTime() { return time; } public void setTime(String time) { this.time = time; } }

 

2，為ListView的子項指定一個自定義布局，用於展示每一條數據，向下面這樣用一個ImageView 和 兩個TextView顯示

 

創建base_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="wrap_content" android:orientation="horizontal">

    <ImageView android:id="@+id/icon" android:layout_width="wrap_content" android:layout_height="wrap_content" />

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

        <TextView android:id="@+id/title" android:layout_width="match_parent" android:layout_height="wrap_content" />
        
        <TextView android:id="@+id/time" android:layout_width="match_parent" android:layout_height="wrap_content" />

    </LinearLayout>
    
</LinearLayout>

 

 

 

3，創建自定義適配器ContentAdapter，繼承自ArrayAdapter

 

public class ContentAdapter extends ArrayAdapter<Base> { private int resourceId; /** * 重寫父類構造函數,傳入上下文, ListView子布局id, 數據 * @param context * @param textViewResourceId * @param objects */
    public ContentAdapter(@NonNull Context context, int textViewResourceId, @NonNull List<Base> objects) { super(context, textViewResourceId, objects); resourceId = textViewResourceId; } /** * 每個子項被滾動到屏幕內的時候調用 * @param position * @param convertView * @param parent * @return
     */ @NonNull @Override public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) { Base base = getItem(position);//獲取當前項 Base 實例
 View view = LayoutInflater.from(getContext()).inflate(resourceId,parent,false); ImageView baseIcon = (ImageView) view.findViewById(R.id.icon); TextView baseTitle = (TextView) view.findViewById(R.id.title); TextView baseTime = (TextView) view.findViewById(R.id.time); baseIcon.setImageResource(base.getIconId()); baseTitle.setText(base.getTitle()); baseTime.setText(base.getTime()); return view; } }

 

4，編寫MainActivity

public class MainActivity extends AppCompatActivity { private List<Base> baseList = new ArrayList<>(); SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");//設置日期格式
    String date = df.format(new Date());// new Date()為獲取當前系統時間，也可使用當前時間戳
 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initBases();//初始化baseList數據


 //創建ContentAdapter實例，傳入上下文， 子布局id ,數據baseList BaseAdapter adapter = new ContentAdapter(MainActivity.this,R.layout.base_item,baseList); ListView listView = (ListView) findViewById(R.id.listview); listView.setAdapter(adapter);//綁定適配器 listView.setOnItemClickListener(onClickListener);//監聽點擊事件
 } AdapterView.OnItemClickListener onClickListener = new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) { Base base = baseList.get(i); Toast.makeText(MainActivity.this,base.getTitle(),Toast.LENGTH_SHORT).show(); } }; private void initBases(){ for(int i = 0; i < 5; i++){ Base baseOne = new Base(R.drawable.one,"我是數字1",date); baseList.add(baseOne); Base baseTwo = new Base(R.drawable.two,"我是數字2",date); baseList.add(baseTwo); Base baseThree = new Base(R.drawable.one,"我是數字1",date); baseList.add(baseOne); Base baseFour = new Base(R.drawable.two,"我是數字2",date); baseList.add(baseTwo); } } }

 

 

完整Demo https://files.cnblogs.com/files/boguse/ListViewDemo.zip