android列表视图切换:GridView和ListView两种方式来显示一个列表

泡在网上的日子 / 文 发表于2013-06-26 23:37 次阅读 android,listview,GridView

在安卓应用中,很多带有列表的界面都提供了两种显示方式,单列显示和平铺显示,比如文件管理器,其实这两种视觉效果分别是用listview和GridView来实现的。这篇文章将讨论如何正确的实现两种视图的切换效果。

对于一个界面,如果需要设计GridViewListView两种方式来显示一个列表,可以共用一个Adapter和一个布局来实现,这样既可以避免冗余的代码,也使整个处理过程变得更加简单。

1.首先,如下所示,将GridView和ListView布局到同一个页面中;

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout      xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:orientation="vertical">         
     <TextView
         android:id="@+id/app_title"
         android:layout_width="fill_parent"
         android:layout_height="44dip"
         android:text="@string/main_service_title"
         android:gravity ="center"
         android:textSize="27px"
         android:textColor="#ffffff"
         android:background ="@drawable/title_bar"/>
     <GridView
        android:id="@+id/app_grid"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:padding="10dp"
        android:verticalSpacing="10dp"
        android:horizontalSpacing="10dp"
        android:numColumns="4"
        android:columnWidth="60dp"
        android:stretchMode="columnWidth"      
        android:gravity="center"/>
     <ListView
android:id="@+id/app_list"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:divider="@drawable/divider"/>
</LinearLayout>

2.使用同一个adapter填充数据:

public class ServiceZoneAdapter extends BaseAdapter
{
    /**
     * Get view from xml layout.
     */
    private LayoutInflater    mInflater     = null;
    /**
     * A list to encapsulate servcie information.
     */
    private List<ServiceBean> mServiceBeans = null;
                                                                                                                                                                     
    public ServiceZoneAdapter(Context c, List<ServiceBean> serviceBeans)
    {
        mServiceBeans = serviceBeans;
        mInflater = (LayoutInflater)c.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                                                                                                                                                                         
    }
    /**
     * Get list's size.
     *
     * @return the size of list.
     */
    public int getCount()
    {
        return mServiceBeans == null ? 0 : mServiceBeans.size();
    }
    /**
     * Get item.
     *
     * @param position
     * @return the item according to the position.
     */
    public Object getItem(int position)
    {
        return mServiceBeans == null ? null : mServiceBeans.get(position);
    }
    /**
     * Get id.
     *
     * @param position
     * @return the item's id according to the position.
     */
    public long getItemId(int position)
    {
        return position;
    }
    /**
     * Get item's view.
     *
     * @return the item view according to the position.
     */
    public View getView(int position, View convertView, ViewGroup parent)
    {
        if (convertView == null)
        {
            if (ServiceZone.isGridView)
            {
                convertView = mInflater.inflate(R.layout.each_app_grid_layout, parent, false);
            }
            else
            {
                convertView = mInflater.inflate(R.layout.each_app_list_layout, parent, false);
            }
        }
        ServiceBean service = (ServiceBean)getItem(position);
        if (service == null)
        {
            return convertView;
        }
        ImageView imageView = (ImageView)convertView.findViewById(R.id.app_icon);
        TextView text = (TextView)convertView.findViewById(R.id.app_name);
        imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
        imageView.setImageResource(service.getIconId());
        text.setText(service.getName());
        return convertView;
    }
}

3.其次,在acticity中获取相应的对象,同时设定一个标签,用于标记当前是需要用GridView或ListView中哪种方式显示;然后将数据填充到相应的View中。代码如下:

public static Boolean     isGridView                     = true;
       /**
     * Update the layout.
     */
    private void updateLayout()
    {
        if (isGridView)
        {
            if (mGridView == null)
            {
                mGridView = (GridView)findViewById(R.id.app_grid);
            }
            mGridView.setVisibility(View.VISIBLE);
            mGridView.setAdapter(new ServiceZoneAdapter(ServiceZone.this, mService));
            mGridView.setOnItemClickListener(this);
            mListView.setVisibility(View.GONE);
            if (mSelectionPosition < 0)
            {
                mSelectionPosition = 0;
            }
            mGridView.setSelection(mSelectionPosition);
        }
        else
        {
            if (mListView == null)
            {
                mListView = (ListView)findViewById(R.id.app_list);
            }
            mListView.setVisibility(View.VISIBLE);
            mListView.setAdapter(new ServiceZoneAdapter(ServiceZone.this, mService));
            mListView.setOnItemClickListener(this);
            mGridView.setVisibility(View.GONE);        
            if (mSelectionPosition < 0)
            {
                mSelectionPosition = 0;
            }
            mListView.setSelection(mSelectionPosition);
        }
}

4.通过控制isGridView标签来控制页面的显示。

/**
 * Update ui to be the selected style.
 */
@Override
public boolean onOptionsItemSelected(MenuItem item)
{
    if (item.getItemId() == R.id.menu_change)
    {
        isGridView = !isGridView;
        updateLayout();
    }
    return super.onOptionsItemSelected(item);
}


收藏 赞 (0) 踩 (15)
上一篇:Android线程模型解析(包括UI的更新)
1引言 Android一词本义指机器人,Google于2007年11月发布了以Android命名的开源移动设备综合平台,包括其基于Linux的操作系统、中间件和关键的手机应用。并且组建了开放手机联盟,其成员囊括了全球著名的各大手机生产商和移动运营商。2008年8月,Google又发
下一篇:android多分辨率多屏幕密度下UI适配方案
前言 Android 设计之初就考虑到了 UI 在多平台的适配,它本身提供了一套完善的适配机制,随着版本的发展适配也越来越精确, UI 适配主要受平台两个因素的影响:屏幕尺寸(屏幕的像素宽度及像素高度)和屏幕密度,针对不同的应用场景采用的适配方案也不一样,