重拾安卓（ListView（二））

今天使用BaseAdapter来完成ListView，先上最终效果图：

IMG_1008.PNG

顺便把上边的导航也做进去，先把昨天的代码全部注视掉，然后我们去写xml布局。

80F2ABFB-FAE9-42FF-A866-D281ED26702F.png

发现变成了这样，所以我们需要把项目变成全屏的项目，然后自己去写导航。 这里我直接重新建了一个fullScreen工程。我可没那么傻-。- 改个配置就好喽

10FF99D7-B0AE-4D44-A895-BE42DD65BEA1.png

运行看效果

0DBAA822-E67B-44AE-A191-0138839E22A8.png

接着写吧、

5FDBF1AC-E8D1-4657-BD97-D08A744968EE.png

切换到xml文件，发现上边还是有东西的，看到上边有AppTheme，点击进去，选择Manifest就行了。

B4A6337A-2B5E-47BC-966E-2192F8E46DF8.png

已经写好了导航，现在我们开始写section == 0时候的Cell了。按照iOS的思路来，我们先去写一个Model，这里我把所有的包括头部的属性也写到了这里面了。

7B9E8452-F2B8-427C-BFD0-037B9DFE25EF.png

然后，我们继承BaseAdapter写一个MyAdapter，并且研究里边的方法，跟iOS的方法对应起来，方便学习。分组样式是怎么写的呢?

下边的说明我全部加到了注释里

package wsp.wsproject;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import org.w3c.dom.Text;

import java.util.ArrayList;

/**
 * Created by Dylan on 16/1/25.
 */
public class MyAdapter extends BaseAdapter {

    // 头部cell
    private static final int TYPE_HEAD_ITEM = 0;

    // 普通cell
    private static final int TYPE_NORMAL = 1;

    // 数据源
    private ArrayList arrayList;

    // 它的作用类似于findViewById()。
    // 不同点是LayoutInflater是用来找res/layout/下的xml布局文件，
    // 并且实例化；而findViewById()是找xml布局文件下的具体widget控件(如Button、TextView等)。
    private LayoutInflater layoutInflater;

    // 优化ListView
    private class ViewHolder {
        TextView label;
        ImageView imageView;
    }

    // 类似于iOS中的 CellForRowAtIndexPath 代理方法，ListView回来这里找到视图
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        // 通过下边的 getItemViewType 知道当前应该返回什么样式的cell
        int itemType = getItemViewType(position);

        switch (itemType) {

            case TYPE_HEAD_ITEM: {

                // convertView 就像cell一样
                if ( null == convertView ) {

                    convertView = layoutInflater.inflate(R.layout.cell_header, null);
                }

                ImageView avatar = (ImageView) convertView.findViewById(R.id.avatar);
                TextView nick = (TextView) convertView.findViewById(R.id.nickName);
                TextView phone = (TextView) convertView.findViewById(R.id.phoneNumber);

                // 拿到Model 设置值

                MineModel model = (MineModel) getItem(position);

                nick.setText(model.getNickName());
                phone.setText(model.getPhoneNumber());
                avatar.setImageResource(model.getAvatarResID());

                break;
            }

            case TYPE_NORMAL: {

                // viewHolder, 你在使用UITableView是怎么缓存Cell的呢，意思是一样的
                ViewHolder viewHolder = null;

                if ( null == convertView ) {

                    convertView = layoutInflater.inflate(R.layout.cell, null);

                    viewHolder = new ViewHolder();
                    viewHolder.label = (TextView) convertView.findViewById(R.id.label);
                    viewHolder.imageView = (ImageView) convertView.findViewById(R.id.imageView);

                    convertView.setTag(viewHolder);
                } else  {

                    viewHolder = (ViewHolder) convertView.getTag();
                }

                // 拿到Model 设置值
                MineModel model = (MineModel) getItem(position);

                viewHolder.label.setText(model.getText());
                viewHolder.imageView.setImageResource(model.getImageResID());

                break;
            }
        }

        return convertView;
    }

    // 构造器
    public MyAdapter(Context context, ArrayList iData) {

        arrayList = iData;
        layoutInflater = LayoutInflater.from(context);
    }

    // 类似于 numberOfRowsInSection
    @Override
    public int getCount() {

        int count = 0;

        if (null != arrayList) {

            return arrayList.size();
        }

        return 0;
    }

    // 获取某个部分的Data, 可以在这里加个判断, 也可以 getView 中通过position获取。 这里可以做些操作
    @Override
    public Object getItem(int position) {

        if (null == arrayList || position < 0 || position > getCount()) {

            return null;
        }

        return arrayList.get(position);
    }

    // 获取 itemID，可以自定义ID

    @Override
    public long getItemId(int position) {

        return position;
    }

    // -> 根据view item的类型，在getView中创建正确的convertView <- //

    // 几种类型的View, 重写 getViewTypeCount() – 返回你有多少个不同的布局

    @Override
    public int getViewTypeCount() {

        return 2;
    }

    // 获取一些类型, 可以自己写 重写 getItemViewType(int) – 由position返回view type id

    @Override
    public int getItemViewType(int position) {

        if ( position == 0 ) {

            return TYPE_HEAD_ITEM;
        }

        return TYPE_NORMAL;
    }
}

然后去Activity中使用Adapter

public class MainActivity extends ListActivity {

    // 数据源
    ArrayList arrayList = null;

    // 适配器使用的
    MyAdapter myAdapter;

    // 数据来自, 为HashMap的Key
    String[] from={"imageName","text"};              //这里是ListView显示内容每一列的列名

    // 数据给谁, cell中的元素id
    int[] to={R.id.imageView,R.id.label};   //这里是ListView显示每一列对应的list_item中控件的id

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

        // 初始化数据源
        arrayList = new ArrayList();

        for (int i = 0; i < 4; i ++) {

            MineModel model = null;


            // 头像等 int imageResID, String normalText, int avatarResID, String nickName, String phoneNumber
            model = new MineModel(R.drawable.icon_0, "你好", R.drawable.icon_1, "你好", "13088488288");

            arrayList.add(model);
        }

        myAdapter = new MyAdapter(this, arrayList);
        setListAdapter(myAdapter);
    }

    @Override
    protected void onListItemClick(ListView l, View v, int position, long id) {
        super.onListItemClick(l, v, position, id);

        Toast.makeText(getBaseContext(), myAdapter.getItem(position).toString(), Toast.LENGTH_LONG).show();
    }
}

运行一下，最终结果出来了。

1EE75E60-2110-42C1-B033-B0CD25E782C9.png

累了，休息，嘿嘿。今天就到这里，明天开始写一个复杂的ListView了，大致的样式是这样的:

IMG_1072.PNG

包括网络请求也会写进去。

CopyRight@Dylan 2015-1-25