【Android UI】ListView系列二（自定义Adapter订阅新闻栏目）

目标：自定义适配器Adapter实现点击每个item订阅按钮

上一篇介绍了listview的基本属性以及ArrayAdapter和SimpleAdapter的简单实用，链接：listview使用方式基础篇。

今天主要介绍一下自定义adapter，来实现稍微复杂点的功能，今天实现的效果是：类似于listiew展示许多可供订阅的栏目，每个栏目最右端有订阅按钮，用户点击订阅可以订阅该栏目，再次点击可取消订阅，效果图如下，下面我们一步步来实现。

1. 定义主布局文件activity_main.xml

• 主布局非常的简单，只有一个title和一个listview

<RelativeLayout 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"
    tools:context="${relativePackage}.${activityClass}" >

    <!-- title -->
    <TextView 
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:text="话题"
        android:textSize="20sp"
        android:textStyle="bold"
        android:gravity="center"
        />
    <!-- listview -->
    <ListView
        android:id="@+id/listview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#FFFFFF"
        android:layout_below="@+id/title"
        android:divider="#423376"
        android:dividerHeight="1dp"
        android:scrollbars="none"
        />

</RelativeLayout>

2. 定义listview的item布局list_item.xml

• item布局包含了四个控件，分别是用于显示栏目图标的imageview，显示栏目名称的textview，显示栏目信息的textview和订阅按钮textview。

<?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="60dp"
    android:orientation="horizontal" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/item_image"
            android:layout_width="60dp"
            android:layout_height="match_parent"
            android:src="@drawable/ic_launcher" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginLeft="10dp"
            android:gravity="center_vertical"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/item_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="NBA"
                android:textColor="#543254"
                android:textSize="16sp" />

            <TextView
                android:id="@+id/item_info"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:singleLine="true"
                android:text="688人订阅，7777条帖子"
                android:textColor="#924552"
                android:textSize="14sp" />
        </LinearLayout>
    </LinearLayout>

    <TextView
        android:id="@+id/item_un_subscribe"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="10dp"
        android:background="@drawable/item_download_selector"
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:gravity="center"
        android:padding="5dp"
        android:text="退订"
        android:textColor="#FFFFFF"
        android:textSize="14sp" />

</RelativeLayout>

3. 自定义adapter适配器类MyListAdapter.java

• 代码中已经添加了详细的注释，有问题留言指出哦

public class MyListAdapter extends BaseAdapter
{
    /**
     * 数据源
     */
    private List<Map<String, Object>> dataList;

    private Context mContext;

    public MyListAdapter(Context mContext)
    {
        super();
        this.mContext = mContext;
    }

    /**
     * 方法名称：setDataSource
     * 方法描述：设置数据源
     */
    public void setDataSource(List<Map<String, Object>> dataList)
    {
        if (null != dataList)
        {
            this.dataList = dataList;
            this.notifyDataSetChanged();
        }
    }

    @Override
    public int getCount()
    {
        return dataList == null ? 0 : dataList.size();
    }

    @Override
    public Object getItem(int position)
    {
        return (null != dataList && !dataList.isEmpty()) ? null : dataList.get(position);
    }

    @Override
    public long getItemId(int position)
    {
        return dataList == null ? 0 : position;
    }

    ViewHolder viewHolder = null;

    @Override
    public View getView(int position, View convertView, ViewGroup parent)
    {
        if (null == convertView)
        {
            viewHolder = new ViewHolder();
            convertView = LayoutInflater.from(mContext).inflate(R.layout.list_item, parent, false);
            viewHolder.imageView = (ImageView)convertView.findViewById(R.id.item_image);
            viewHolder.textName = (TextView)convertView.findViewById(R.id.item_name);
            viewHolder.textInfo = (TextView)convertView.findViewById(R.id.item_info);
            viewHolder.subscribe = (TextView)convertView.findViewById(R.id.item_un_subscribe);
            convertView.setTag(viewHolder);
        }
        else
        {
            viewHolder = (ViewHolder)convertView.getTag();
        }

        //给控件设置数据
        viewHolder.imageView.setImageResource((int)dataList.get(position).get(MainActivity.KEY[0]));
        viewHolder.textName.setText((CharSequence)dataList.get(position).get(MainActivity.KEY[1]));
        viewHolder.textInfo.setText((CharSequence)dataList.get(position).get(MainActivity.KEY[2]));
        //监听订阅按钮
        viewHolder.subscribe.setOnClickListener(new MyListener(position));

        if ((boolean)dataList.get(position).get(MainActivity.KEY[3]))
        {
            viewHolder.subscribe.setText("取消订阅");
        }
        else
        {
            viewHolder.subscribe.setText("订阅");
        }

        return convertView;
    }

    /**
     * 
     * <点击事件监听>
     * @version  [V1.00, 2015-8-1]
     * @see  [相关类/方法]
     * @since V1.00
     */
    private class MyListener implements OnClickListener
    {
        int mPosition;

        public MyListener(int inPosition)
        {
            mPosition = inPosition;
        }

        @Override
        public void onClick(View v)
        {
            //防止监听位置错乱
            if(v.getId() == viewHolder.subscribe.getId())
            {
                //如果是【订阅】设置为【取消订阅】,如果是【取消订阅】设置成【订阅】
                dataList.get(mPosition).put(MainActivity.KEY[3], !((boolean)dataList.get(mPosition).get(MainActivity.KEY[3])));
                MyListAdapter.this.notifyDataSetChanged();
            }
        }

    }


    /**
     * 
     * <重用布局辅助类>
     * @version  [V1.00, 2015-8-1]
     * @see  [相关类/方法]
     * @since V1.00
     */
    static class ViewHolder
    {
        /**
         * 栏目图标
         */
        private ImageView imageView;

        /**
         * 栏目名称
         */
        private TextView textName;

        /**
         * 栏目信息
         */
        private TextView textInfo;

        /**
         * 订阅
         */
        private TextView subscribe;
    }

}

4. 主界面MainActivity.java

public class MainActivity extends Activity
{
    private ListView listView;

    private List<Map<String, Object>> data = new ArrayList<Map<String, Object>>();

    // key
    public static final String KEY[] = new String[] {"image", "name", "info", "sub"};

    // 每一项数据显示对于的控件ID
    private final int ID[] = new int[] {R.id.item_image, R.id.item_name, R.id.item_info, R.id.item_un_subscribe};

    // 模拟数据源
    private final int IMAGEID[] = new int[] {R.drawable.nba, R.drawable.zipai, R.drawable.iphone, R.drawable.tiyu, R.drawable.yanzhi, R.drawable.zhi, R.drawable.xiaoone, R.drawable.xiaotwo,
        R.drawable.dou, R.drawable.feiji};

    private final String NAME[] = new String[] {"NBA", "自拍是种病", "iPhone", "体坛热议", "拼颜值上头条", "智能家居", "笑死不偿命", "笑话", "搞笑", "留学靠自己"};

    private final String QIANMING[] = new String[] {"324人订阅，78条帖子", "4人订阅，39条帖子", "93人订阅，72条帖子", "124人订阅，75条帖子", "654人订阅，11条帖子", "74人订阅，8条帖子", "34人订阅，323条帖子", "21人订阅，8条帖子", "654人订阅，32条帖子",
        "4人订阅，878条帖子"};

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

        listView = (ListView)findViewById(R.id.listview);

        // 构建数据源
        for (int i = 0; i < 10; i++)
        {
            Map<String, Object> map = new HashMap<String, Object>();
            map.put(KEY[0], IMAGEID[i]);
            map.put(KEY[1], NAME[i]);
            map.put(KEY[2], QIANMING[i]);
            //默认未订阅
            map.put(KEY[3], false);
            data.add(map);
        }
        // 创建适配器adapter
        MyListAdapter adapter = new MyListAdapter(MainActivity.this);
        adapter.setDataSource(data);
        // 设置适配器
        listView.setAdapter(adapter);

        //listview每项点击事件
        listView.setOnItemClickListener(new OnItemClickListener()
        {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id)
            {
                Toast.makeText(MainActivity.this, "您点击了【"+data.get(position).get(KEY[1])+"】!", Toast.LENGTH_LONG).show();
            }
        });
    }
}

再来看下完整的效果图：按钮点击+item点击！

最近刚建了个Android技术交流的群，群号为204368065，欢迎各位Androider加入，共同探讨技术问题，共同进步，也可以扫码申请接入哦