码迷,mamicode.com
首页 > 移动开发 > 详细

Aandroid在ViewPager中添加ListView

时间:2015-02-16 14:20:42      阅读:250      评论:0      收藏:0      [点我收藏+]

标签:

最近的项目中碰到一个需要横竖都能滑动的页面效果,如同手机qq的好友菜单界面(如下图),可以通过选项卡来选择需要的界面,也可以通过屏幕手指的滑动来实现,而每一个分页面的内容对应的是一个可以上下滑动的ListView,所以最后结合起来的效果是,在页面中可以上下滑动,在各个分页之间可以左右滑动。

技术分享技术分享

对于这个效果有两种方案,一种是通过TabActivitiy来实现,将选项卡设置为TabActibitiy的标志,通过将需要的分页加载到Tab的各个标志中去,但是这种方法,由于每一次切换选项卡的时候都会重新去创建一个新Activity的实例,所以当界面很多时切换会很迟钝,同时这种方法不能实现屏幕手指滑动来切换界面。

 

另外一种就是今天要讲的,在ViewPager中添加ListView。

先说ViewPager,ViewPager是google官方提供的一个兼容低版本android设备的软件包,

ViewPager的主要功能是使视图左右滑动,单纯ViewPaager添加静态页面的教程可以在网上搜到,这里只是简单介绍:(看不太懂的请参考其他ViewPager教程)

1.在布局文件中加入组件

<android.support.v4.view.ViewPager
            android:id="@+id/heroPager"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"/>
android的其他组件一样,这里只需要声明一个组件,并指定它的基本属性。
2.加载要显示的选项卡

<pre name="code" class="java" style="color: rgb(70, 70, 70); font-size: 14px; line-height: 21px; text-indent: 28px;"><span style="font-family: 宋体;">//这个方法从viewPager中移动当前的view。</span>
public void destroyItem(View container, int position, Object object){} //这个方法返回一个对象,该对象表明PagerAapter选择哪个对象放在当前的ViewPager中。
public Object instantiateItem(View container, int position){}
//返回当前分页数。
public int getCount() { return mListViews.size(); }
//该方法判断是否由该对象生成界面。
public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == arg1; }


 4.viewPager添加适配器:

 viewPager.setAdapter(new HeroPagerAdapter(viewList));

 好了,以上是在ViewPager中添加常规的静态界面的方法,对于listview,是需要设置适配器的,listview本身也是一个动态的组件,下面将介绍如何在ViewPager中添加动态的listview。

   同样的,要先在布局文件中加入ViewPager组件,同以上步骤1.

   第二步,也是最重要的一步。

    前几个操作和以上是一样的,先声明一个LayoutInflater对象

LayoutInflater inflater = getLayoutInflater();
获取viewPager组件:
viewPager = (ViewPager) findViewById(R.id.heroPager);
创建一个list对象:
viewList = new ArrayList<View>();

这里,我曾经试过如下方法,都是错误的,希望大家引起注意:

 

 

直接通过强制类型转换,将View对象转换为ListView对象:

ListView view1 = (ListView) inflater.inflate(R.layout.hero_list, null);

这个方法编译可以通过,但是在运行时系统会报出一个类型转换的错误!

 

直接通过findViewbyId方法通过listview的组件ID来获取listview对象:

ListView listView1 = ListViewfindViewById(R.id.heroList);

这个方法也是编译时可以通过,运行时在这一步不会出现问题,但是当下面为listview添加SimpleAdpater适配器的时候,会抛出一个空指针异常,调试模式到这一步时,会观察到通过findViewbyId方法得到的listview是一个空对象。

原来findviewByIdView这个类中的方法,默认调用时其实应该是:

this.findviewById();

 

由于上图代码中的R.id.herolist这个listview的声明并不在当前的viewPager所在的xml布局中,所以直接通过findviewById方法是不能得到该listview的实例的。

既然知道了findviewById()原理,那么就好办了!直接先通过LayoutInflater对象来实例化listview所在的布局,然后通过这个viewfindviewById方法来获取listview的实例。

View view1 = inflater.inflate(R.layout.hero_list, null);

View view2 = inflater.inflate(R.layout.hero_list, null);

ListView listview1 view1.findViewById(R.id.heroList);

ListView listview2 view1.findViewById(R.id.heroList);

注意view对应的布局是hero_list,listview对应的布局是herolist,两者不一样。

 

 

也可以简化如下:

ListView listView1 = (ListView) (inflater.inflate(R.layout.hero_list, null)).findViewById(R.id.heroList);

ListView listView2 = (ListView) (inflater.inflate(R.layout.hero_list, null)).findViewById(R.id.heroList);

 

剩下的步骤3和步骤4和上文中的一样,重写PagerAdapter类并添加适配器。

不过不要忘了给每一个listview都添加一个适配器,listview添加SimpleAdapter的步骤我相信大家已经很熟悉了,这里就不再详述了,直接上代码:

 SimpleAdapter simpleAdapter_Wu = new SimpleAdapter(this, herolist_wu,
    R.layout.hero_info,
    new String[]{"heroImage", "heroName"},
    new int[]{R.id.heroImage, R.id.heroName});

  SimpleAdapter simpleAdapter_Shu = new SimpleAdapter(this, herolist_shu,
    R.layout.hero_info,
    new String[]{"heroImage", "heroName"},
    new int[]{R.id.heroImage, R.id.heroName});

  listView1.setAdapter(simpleAdapter_Wu);
  listView2.setAdapter(simpleAdapter_Shu);


到这里,就和以上的不一样了!!

 

LayoutInflater对象的inflater方法只能实例化一个view对象,由于android中不能通过直接将一个xml布局声明为一个Listview,所以就不能直接通过inflater方法来实例listview对象。

这样就成功的将两个listview添加到ViewPager中了,以下是效果图,(水平有限,不知道怎么做动态的效果图)

 技术分享

技术分享

技术分享

技术分享

 

在刚开始做这个的时候,也在网上搜索过关于在viewPager中添加listview的方法,都没有找到相关的教程,自己摸索了一天终于把它做出来了,这里和大家分享一下,也希望能给需要类似效果的朋友一些帮助。


Aandroid在ViewPager中添加ListView

标签:

原文地址:http://blog.csdn.net/yyt602037504/article/details/43851615

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!