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

来源：互联网发布：广告单页设计软件编辑：程序博客网时间：2024/05/18 16:13

目标：自定义适配器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加入，共同探讨技术问题，共同进步，也可以扫码申请接入哦

这里写图片描述

1 0