利用XML布局自定义列表样式

利用XML布局自定义列表样式

之前在学习Spinner 的时候就有这样的困惑，我们是不是可以自己定义列表的样式呢。因为我们使用系统自定义的样式的话有可能和我们的布局格格不入，显示的字样有可能很大很大。今天我们就来学习一下利用XML加适配器来自定义一个列表样式。不过在这里我们是以ListView为例效果是和Spinner一样的有些疑惑的小伙伴可以自己再去尝试一下给Spinner自定义一下列表样式。

首先我们写一个XML，作为整体的框架布局main_linearlayout.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" >

    

    <TextView 

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:text="@string/tv_content"

        android:textSize="40sp"

        android:textStyle="bold"

        android:gravity="center_horizontal"/>

    <ListView 

        android:id="@+id/lv_names"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        >

    </ListView>

</LinearLayout>

 

框架布局是用来定义整体的框架，即在activity活动状态时候的样子。现在整体框架有了就可以设计一下listview的样式了。

然后再写一个XML布局文件tablelist.xml，这个文件是设计列表样式的，可以自定义字体大小、颜色以及字体样式。

<?xml version="1.0" encoding="utf-8"?>

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent" >

 

    <TableRow

        android:layout_width="fill_parent"

        android:layout_height="wrap_content" >

 

        <ImageView

            android:id="@+id/iv_image"

            android:layout_width="0sp"

            android:layout_height="wrap_content"

            android:layout_weight="2"

            android:src="@drawable/ali02" />

 

        <TextView

            android:id="@+id/file_id"

            android:layout_width="0sp"

            android:layout_height="fill_parent"

            android:layout_weight="3"

            android:gravity="bottom"

            android:textSize="30px" />

 

        <TextView

            android:id="@+id/file_name"

            android:layout_width="0sp"

            android:layout_height="fill_parent"

            android:layout_weight="5"

            android:gravity="bottom"

            android:textSize="30px" />

    </TableRow>

 

</TableLayout>

 

当我们设计好框架和样式之后就开始进入适配阶段了，接下来就是到MainActivity.java中

package com.li.adapterdemo;

 

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.view.Menu;

import android.view.View;

import android.view.ViewGroup;

import android.widget.BaseAdapter;

import android.widget.ListView;

import android.widget.SimpleAdapter;

 

public class MainActivity extends Activity {

 

private ListView lv; //定义一个ListView控件

private String[][] names; //创建一个二维String类型的数组

private List<Map<String, Object>> list; //定义一个嵌套了Map集合的List集合

private SimpleAdapter adapter; //定义一个适配器

 

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main_linearlayout); //加载布局文件

lv = (ListView) findViewById(R.id.lv_names); //获得ListView控件

names = new String[][] { //数组赋值

{{“张三”,”32145687987”},

{“李四”,”321423423487”},

......(根据需要自己添加数据)}

list = new ArrayList<Map<String, Object>>(); //实例化集合对象

for (int i = 0; i < names.length; i++) { //循环赋值

Map<String, Object> map = new HashMap<String,Object>(); //每次循环都建立一个新的Map集合添加到List集合中

map.put("file_image", R.drawable.ali02); //每次每个Map集合中的都有固定的键值,方便之后的映射

map.put("file_id", names[i][0]);

map.put("file_name", names[i][1]);

list.add(map);

}

adapter = new SimpleAdapter(this, list,

R.layout.tablelist, new String[] { "file_image","file_id" },

new int[] { R.id.iv_image,R.id.file_id}); //通过适配器实现String元素与界面元素组件的绑定

lv.setAdapter(adapter); //加载适配器

}

 

@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.

getMenuInflater().inflate(R.menu.main, menu);

return true;

}

}

其实文字适配器也可以自定义列表的样式的：

ArrayAdapter<String> adapter = new ArrayAdapter<String>(getApplicationContext(),R.layout.list_items,R.id.tv_name,names);

getApplicationContext()：是当前app应用的内容；

R.layout.list_items：是自定义的列表样式;

R.id.tv_name：是样式中的组件的名字;

Names:数组;

还有很多的东西需要去研究学习，希望每一天都有所进步！！