zoukankan      html  css  js  c++  java
  • 实现顶部轮播,下部listview经典布局的两种方式

    开头:

    在做android开发的时候,我们经常会遇到这样的布局,上面是一个图片轮播图,下面是一些列表的项目。很多新闻app,视频类app都采用这样的布局。起初的时候

    由于没有很多参考,我自己想到了一种实现方式,就是用scrollview作为外面最大的布局,然后里面嵌套viewpager和listview,但是我现在非常不推荐这种方式,一方面由于这种方式

    需要将listview完全展开,缺少了getview函数中应该有的复用与优化。而且结构嵌套复杂。经过一番查找与学习,学习到两种比较规范或者结构比较清晰的实现方式,那么下面,我来分别介绍

    一下这两种方式。

     转载请注明出处   http://www.cnblogs.com/gaoteng/p/4162749.html   www.gaotenglife.com

    方法一:listview的addheadview方法

    首先我们新建一个布局文件,存放listview,如下

    <?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="match_parent" >
    
        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="16dp"
            android:text="first" />
    	<ListView
    	    android:id="@+id/list_view_first"
    	    android:layout_width="match_parent"
    	    android:layout_height="wrap_content"
    	    android:layout_below="@id/textView1"
    	    />
    </RelativeLayout>
    

      布局很简单,里面就主要有一个listview。

    然后顶部的轮播图,我们采用viewpager的方式去实现。同样新建一个布局,里面存放viewpager

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:orientation="vertical" >
        
    <android.support.v4.view.ViewPager
        android:id="@+id/headviewpager"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        />
    </LinearLayout>
    

     通过上面两步,我们已经建立好了用到的布局文件,很简单。

    那么接下来,viewpager需要一个adapter来填充数据,这里我们的数据,就是一些图片,让viewpager去展示。

    我们再新建一个自己的viewpageradapter,这个adapger在后面的另一种实现方式中也会用到,所以,单独建立一个文件存放。

    下面是代码:

    /**
     * 
     * @author xuelang www.gaotenglife.com
     *
     */
    public class ViewPageAdapter extends PagerAdapter
    	{
    
    		List<ImageView> list = null;//我们用一个list存放所有的imageview
    		public ViewPageAdapter (List<ImageView> _list)
    		{
    			list = _list;
    		}
    		
    		@Override
    		public void destroyItem(View container, int position, Object object) {
    			// TODO Auto-generated method stub
    			((ViewPager)container).removeView(list.get(position));
    			
    		}
    
    		@Override
    		public Object instantiateItem(View container, int position) {
    			// TODO Auto-generated method stub
    			((ViewPager) container).addView(list.get(position));
    			return list.get(position);
    		}
    
    		@Override
    		public int getCount() {
    			// TODO Auto-generated method stub
    			return list.size();//返回数据的个数
    		}
    
    		@Override
    		public boolean isViewFromObject(View arg0, Object arg1) {
    			// TODO Auto-generated method stub
    			return (arg0 == arg1);//这句话,比较重要,加上之后才能正确显示
    		}
    		
    }
    

      上面的代码很简单,是一个pageadapter的标准用法。这样我们基本上所有的准备工作已经完成了,最后一步,就是我们把viewpager通过listview的addheadview方式加入到listview的头上。

    下面便是acitivity中的主要代码(在文章的结尾,我会附加源代码的下载地址,有需要的可以下载详细看)

    private void initHeadView()
    	{
    		listview = (ListView)this.findViewById(R.id.list_view_first);	
    		View view = LayoutInflater.from(this).inflate(R.layout.head_viewpager, null);
    		ViewPager viewpager = (ViewPager)view.findViewById(R.id.headviewpager);		
    		List<ImageView> listtemp = new ArrayList<ImageView>();
    		for(int i = 0;i<4;i++)
    		{
    			ImageView img = new ImageView(this);
    			img.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,100));
    			img.setScaleType(ScaleType.FIT_XY);
    			img.setBackgroundResource(R.drawable.ic_launcher);
    			listtemp.add(img);
    		}		
    		ViewPageAdapter viewadapter = new ViewPageAdapter(listtemp);		
    		listview.addHeaderView(view);
    		listview.setAdapter(new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,data));
    		viewpager.setAdapter(viewadapter);
    	}
    

      

     简单解释一下上面的内容:

    LayoutInflater.from(this).inflate(R.layout.head_viewpager, null);
    这句话将我们之前建立好的布局文件载入进来

    然后通过for循环初始化imageview的list
    for(int i = 0;i<4;i++)
    ....

    最重要的就是这句话
    listview.addHeaderView(view);

    将初始化好的view添加到head上面。至此我们的第一种方法,就已经完成,是不是很简单。


     方法二:viewpager作为listview的一个item

      这种方式是我受到别的文章的启发,一个listview可以指定它每一个item为不同的布局类型,从而实现listview的多元化,那么我们同样可以利用这个方法。

    把listview的第一项初始化为viewpager,这样不也就实现了顶部时viewpager的效果了嘛。说干就干,代码继续码起来。

    在这种方式中,最主要的内容部分就在listview的adapter中。所以我也就主要介绍这一个adapter,我相信,看懂了这个adapter,那么其他部分,自然很容易理解了。

    在官方api中提供了下面这两个方法,这也是今天实现这个功能主要的两个方法。

    getViewTypeCount //用来返回在这个listview中有几种不同的item类型

    getItemViewType //用来返回某个具体位置上面的item的类型()

    @Override
    		public int getItemViewType(int position) {
    			// TODO Auto-generated method stub
    			return position>0?0:1;
    		}
    
    		@Override
    		public int getViewTypeCount() {
    			// TODO Auto-generated method stub
    			return 2;
    		}
    

      由于我们只做一个简单演示,所以就分为两种类型,一种是viewpager类型的item,另一种是不同类型的item,所以当position大于0,也就是我们的普通类型,position等于0,就是第一项,也就是viewpager。

    接下来便是这个功能最最重要的一个函数getview,因为我们将在这个函数中做所有的显示工作。

    我们先把代码附上,然后详细介绍。

    	@Override
    		public View getView(int position, View convertView, ViewGroup parent) {
    			// TODO Auto-generated method stub
    			 View view = null;
    			 if(getItemViewType(position) == 0)//
    			 {
    				ViewHolder holder = null;  
    				
    				 if(convertView==null)
    				 {
    					
    						 view = m_inflater.inflate(R.layout.list_item, null);
    						 holder = new ViewHolder();
    						 holder.textView = (TextView)view.findViewById(R.id.list_item);
    						 view.setTag(holder);
    				 }				
    				 else
    				 {
    					 view  = convertView;
    					 holder = (ViewHolder)view.getTag();
    				 }
    				 holder.textView.setText(position+"");
    			}
    			else if(getItemViewType(position) == 1)//如果是顶部viewpager
    			 {
    				ViewPagerHolder holder = null;  
    				 if(convertView==null)
    				 {
    					 view = m_inflater.inflate(R.layout.head_viewpager, null);
    					 holder = new ViewPagerHolder();
    					 holder.viewPager = (ViewPager)view.findViewById(R.id.headviewpager);
    					 
    					 
    					 List<ImageView> listtemp = new ArrayList<ImageView>();
    					 for(int i = 0;i<4;i++)
    					 {
    						ImageView img = new ImageView(SecondActivity.this);
    						img.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,100));
    						img.setScaleType(ScaleType.FIT_XY);
    						img.setBackgroundResource(R.drawable.ic_launcher);
    						listtemp.add(img);
    					 }
    						
    					ViewPageAdapter viewadapter = new ViewPageAdapter(listtemp);
    					holder.viewPager.setAdapter(viewadapter);
    
    					 view.setTag(holder);
    				 }
    				 else
    				 {
    					 view  = convertView;
    					 holder = (ViewPagerHolder)view.getTag();
    				 }				 
    			 }
    			
    			return view;
    		}
    
    	}
    

      

    下面我来详细说明一下上面的函数。其实基本的骨架大家应该都能看懂。使用了listview复用的概念。

     if(getItemViewType(position) == 1)

    通过这个判断目前需要显示的view是哪种类型。那么这里如果是1,就是我们的viewpager项,

    然后再判断convertView是否为空,来决定是否复用。

    如果为空,说明在内存中没有保留过,于是通过LayoutInflate创建view,同时我们创建了一个

     holder = new ViewPagerHolder();

    缓冲,用来保存之前创建好的布局,以便下次使用。

    然后创建好viewpager的数据List<ImageView> data,使用前面的ViewPageAdapter,将数据与viewpager绑定,然后用settag的方式,把holder数据,保存到view里面。

    当判断convertview不为空的时候,我们从convertview中取出tag,转换为holder,然后就又得到了viewpager对象了。

    这是if(getItemViewType(position) == 1)的情况。

    那么if(getItemViewType(position) == 0)的情况就更简单了,基本上和这类似。

    也是复用了convertview,然后通过holder的方式,将view对象保存起来,不用下一次通过findviewbyid的方式来查找了,提高了效率。

      转载请注明出处   http://www.cnblogs.com/gaoteng/p/4162749.html   www.gaotenglife.com

    下面附上源码下载地址

    csdn资源

    http://download.csdn.net/detail/gaotengguojianhong/8308407

    github资源

    https://github.com/langxuelang/ListViewDemo

  • 相关阅读:
    关于data初始化值
    switch的优化替代写法
    phpstorm安装xdebug
    如何将一个列表封装为一个树形结构
    Win10系统桌面图标距离间距变大的问题
    cnpm无法加载文件的问题
    0、springboot
    1、springboot2新建web项目
    Game游戏分析
    netty学习
  • 原文地址:https://www.cnblogs.com/gaoteng/p/4162749.html
Copyright © 2011-2022 走看看