Android使用ScrollView和自定义的ListView实现两列的ListView

浏览数：22 / 时间：2015年06月11日

1、为了实现两列的ListView，首先我们需要定义一个每一项的布局文件music_find_music_menu_item.xml

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_marginRight="10dp"
        android:layout_weight="1">

        <RelativeLayout
            android:id="@+id/music_menu_image_left"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="4"
            android:visibility="invisible"
            android:background="@drawable/ic_launcher">

            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="wrap_content"
                android:layout_height="30dp"
                android:layout_alignParentRight="true"
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true">

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_weight="6">

                </LinearLayout>

                <RelativeLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="4">

                    <TextView
                        android:id="@+id/listen_timer_left"
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:layout_alignParentRight="true"
                        android:gravity="center_vertical"
                        android:text="1231313113"/>

                    <ImageView
                        android:id="@+id/ear_phone_left"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_toLeftOf="@id/listen_timer_left"
                        android:src="@drawable/ic_launcher"/>

                </RelativeLayout>

            </LinearLayout>
            
            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_alignParentLeft="true"
                android:layout_alignParentBottom="true"
                android:layout_height="30dp">

                <ImageView
                    android:id="@+id/user_image_icon_left"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_launcher"/>

                <TextView
                    android:id="@+id/music_menu_owner_left"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:gravity="center_vertical"
                    android:layout_toRightOf="@id/user_image_icon_left"
                    android:text="123131231"/>

            </RelativeLayout>

        </RelativeLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1">
            <TextView
                android:id="@+id/music_menu_title_left"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_marginRight="10dp"
        android:layout_weight="1">

        <RelativeLayout
            android:id="@+id/music_menu_image_right"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="4"
            android:visibility="invisible"
            android:background="@drawable/ic_launcher">

            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="wrap_content"
                android:layout_height="30dp"
                android:layout_alignParentRight="true"
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true">

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_weight="6">

                </LinearLayout>

                <RelativeLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="4">

                    <TextView
                        android:id="@+id/listen_timer_right"
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:layout_alignParentRight="true"
                        android:gravity="center_vertical"
                        android:text="1231313113"/>

                    <ImageView
                        android:id="@+id/ear_phone_right"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_toLeftOf="@id/listen_timer_right"
                        android:src="@drawable/ic_launcher"/>

                </RelativeLayout>

            </LinearLayout>

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_alignParentLeft="true"
                android:layout_alignParentBottom="true"
                android:layout_height="30dp">

                <ImageView
                    android:id="@+id/user_image_icon_right"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_launcher"/>

                <TextView
                    android:id="@+id/music_menu_owner_right"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:gravity="center_vertical"
                    android:layout_toRightOf="@id/user_image_icon_right"
                    android:text="123131231"/>

            </RelativeLayout>

        </RelativeLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1">
            <TextView
                android:id="@+id/music_menu_title_right"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </LinearLayout>

    </LinearLayout>

</LinearLayout>

2、我们需要自定义一个ListAdapter,并且这个ListAdapt继承自BaseAdapter

public class MusicMenuListAdapter extends BaseAdapter {

    private Context mContext;

    private List<MusicMenuBean> beans;

    public MusicMenuListAdapter(List<MusicMenuBean> beans, Context mContext) {
        this.beans = beans;
        this.mContext = mContext;
    }

    @Override
    public int getCount() {
        if(beans == null) {
            return 0;
        }
        return beans.size()/2 + beans.size()%2;
    }

    @Override
    public Object getItem(int position) {
        return beans.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        if(beans == null) {
            return null;
        }
        if(convertView == null) {
            MusicMenuView view = new MusicMenuView(this.mContext);
            if(beans.size()%2!=0&&position == getCount() - 1) {
                view.update(beans.get(2 * position));
            }else {
                view.update(beans.get(2 * position),beans.get(2 * position + 1));
            }
            convertView = view;
        }else {
            ((MusicMenuView)convertView).update(beans.get(position),beans.get(position + 1));
        }
        return convertView;
    }


    class MusicMenuView extends LinearLayout {

        private Context mContext;
        private RelativeLayout leftLayout;
        private RelativeLayout rightLayout;
        private TextView leftListenTime,rightListenTime,leftOwnerName,
                rightOwnerName,leftMenuTitle,rightMenuTitle;

        public MusicMenuView(Context context) {
            super(context);
            this.mContext = context;
            View view = LayoutInflater.from(this.mContext).inflate(R.layout.music_find_music_menu_item,null);
            leftLayout = (RelativeLayout) view.findViewById(R.id.music_menu_image_left);
            leftListenTime = (TextView) view.findViewById(R.id.listen_timer_left);
            leftOwnerName = (TextView) view.findViewById(R.id.music_menu_owner_left);
            leftMenuTitle = (TextView) view.findViewById(R.id.music_menu_title_left);
            rightLayout = (RelativeLayout) view.findViewById(R.id.music_menu_image_right);
            rightListenTime = (TextView) view.findViewById(R.id.listen_timer_right);
            rightOwnerName = (TextView) view.findViewById(R.id.music_menu_owner_right);
            rightMenuTitle = (TextView) view.findViewById(R.id.music_menu_title_right);
            leftLayout.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(mContext,"left",Toast.LENGTH_LONG).show();
                }
            });
            rightLayout.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(mContext,"right",Toast.LENGTH_LONG).show();
                }
            });
            addView(view);
        }

        public void update(MusicMenuBean leftBean){
            leftLayout.setBackgroundResource(R.drawable.ic_launcher);
            leftListenTime.setText(leftBean.getListenTime());
            leftOwnerName.setText(leftBean.getMenuOwner());
            leftMenuTitle.setText(leftBean.getMenuTitle());
            leftLayout.setVisibility(VISIBLE);
        }

        public void update(MusicMenuBean leftBean,MusicMenuBean rightBean){
            leftLayout.setBackgroundResource(R.drawable.ic_launcher);
            leftListenTime.setText(leftBean.getListenTime());
            leftOwnerName.setText(leftBean.getMenuOwner());
            leftMenuTitle.setText(leftBean.getMenuTitle());
            rightLayout.setBackgroundResource(R.drawable.ic_launcher);
            rightListenTime.setText(rightBean.getListenTime());
            rightOwnerName.setText(rightBean.getMenuOwner());
            rightMenuTitle.setText(rightBean.getMenuTitle());
            leftLayout.setVisibility(VISIBLE);
            rightLayout.setVisibility(VISIBLE);
        }
    }
}

3、因为ScrollView和ListView是无法共存的，为了实现他们的共存，网上有很多方法可以实现，例如继承ListView等方法，我也试了一下，发现由于getView这个方法在每次加载的时候都需要执行很多次，很大的降低了效率，在页面切换的时候造成了很大的延时卡顿，效果很差，果断放弃了这些方法，采用了与ScrollView共存的Linaer

/**
 * 虚拟listview
 */
public class MyListView extends LinearLayout{
    private BaseAdapter adapter;
    private MyOnItemClickListener onItemClickListener;
    boolean footerViewAttached = false;
    private View footerview;
    private int width = 0;
    /**
     * 通知更新listview
     */
    public void notifyChange() {
        int count = getChildCount();
        if (footerViewAttached) {
            count--;
        }
        LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, width);
        for (int i = count; i < adapter.getCount(); i++) {
            final int index = i;
            final LinearLayout layout = new LinearLayout(getContext());
            layout.setLayoutParams(params);
            layout.setOrientation(VERTICAL);
            View v = adapter.getView(i, null, null);
            v.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (onItemClickListener != null) {
                        onItemClickListener.onItemClick(MyListView.this, layout, index,
                                adapter.getItem(index));
                    }
                }
            });
            ImageView imageView = new ImageView(getContext());
            imageView.setLayoutParams(params);
            layout.addView(v);
            layout.addView(imageView);
            addView(layout, index);
        }
    }
    public MyListView(Context context) {
        super(context);
        initAttr(null);
    }
    public MyListView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initAttr(attrs);
    }
    public void initAttr(AttributeSet attrs) {
        setOrientation(VERTICAL);
        WindowManager wm = (WindowManager) getContext()
                .getSystemService(Context.WINDOW_SERVICE);
        width = wm.getDefaultDisplay().getWidth()/2;
    }
    /**
     * 初始化footerview
     *
     * @param footerView
     */
    public void initFooterView(final View footerView) {
        this.footerview = footerView;
    }
    /**
     * 设置footerView监听事件
     *
     * @param onClickListener
     */
    public void setFooterViewListener(OnClickListener onClickListener) {
        this.footerview.setOnClickListener(onClickListener);
    }
    public BaseAdapter getAdapter() {
        return adapter;
    }
    /**
     * 设置adapter并模拟listview添加数据
     *
     * @param adpater
     */
    public void setAdapter(BaseAdapter adpater) {
        this.adapter = adpater;
        removeAllViews();
        if (footerViewAttached)
            addView(footerview);
        notifyChange();
    }
    /**
     * 设置条目监听事件
     *
     * @param onClickListener
     */
    public void setOnItemClickListener(MyOnItemClickListener onClickListener) {
        this.onItemClickListener = onClickListener;
    }
    /**
     * 没有下一页了
     */
    public void noMorePages() {
        if (footerview != null && footerViewAttached) {
            removeView(footerview);
            footerViewAttached = false;
        }
    }
    /**
     * 可能还有下一??
     */
    public void mayHaveMorePages() {
        if (!footerViewAttached && footerview != null) {
            addView(footerview);
            footerViewAttached = true;
        }
    }
    public static interface MyOnItemClickListener {
        public void onItemClick(ViewGroup parent, View view, int position, Object o);
    }
}

4、在Activity或则Fragment中实现一下代码

menusList = (MyListView) view.findViewById(R.id.music_menu_list);
menusList.setAdapter(new MusicMenuListAdapter(beans,getActivity()));
ScrollView scrollView = (ScrollView) view.findViewById(R.id.music_menu_scroll_view);
scrollView.scrollTo(0,0);

在最后调用scrollView.scrollTo(0,0)是为了是的ListView出现的时候都在最顶部。

技术分享