你的位置:首页 > 操作系统

[操作系统]ViewPager+GridView实现横向滑动 仿大众点评


先看演示效果:

 

1  ViewPager类提供了多界面切换的新效果。

新效果有如下特征: 
[1] 当前显示一组界面中的其中一个界面。 
[2] 当用户通过左右滑动界面时,当前的屏幕显示当前界面和下一个界面的一部分。 

[3]滑动结束后,界面自动跳转到当前选择的界面中

2 介绍里面几个比较重要的方法与接口

    1,OnPageChangeListener  ViewPager页面进行切换监听接口  其中我们经常要实现public void onPageSelected(int arg0),public void onPageScrolled(int arg0, float arg1, int arg2),public void onPageScrollStateChanged(int arg0)着三个方面,其中第一个方法是更多的用到;

    2,setCurrentItem(int item),来设置跳转到当前的页面;

    3,要显示ViewPager,当然还少不了PagerAdapter类,进行适配;其中我们经常也要实现以下方法才可以:public void destroyItem(View arg0, int arg1, Object arg2),public int getCount(),public Object instantiateItem(View arg0, int arg1),public boolean isViewFromObject(View arg0, Object arg1),具体的使用方法等会看例子就ok了

 3 例子代码

java代码

package mm.shandong.com.testviewpagergrid;import android.content.res.TypedArray;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.GridView;import android.widget.ImageView;import android.widget.RadioButton;import android.widget.RadioGroup;import android.widget.TextView;import android.widget.Toast;import java.util.ArrayList;import java.util.List;import mm.shandong.com.testviewpagergrid.entity.Catogray;public class TestViewpagerGridActivity extends AppCompatActivity {  ViewPager viewPagerHomeFragment;  List<Catogray> catogarys;  String[] catogary_names;  int[] catogary_resourceIds;  LayoutInflater layoutInflater;  List<View> gridViews;  RadioGroup radioGroup_index_fragment;  @Override  protected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_test_viewpager_grid);    catogary_names = getResources().getStringArray(R.array.catogary_names);    TypedArray typedArray = getResources().obtainTypedArray(R.array.catogary_resourceIds);    catogary_resourceIds = new int[typedArray.length()];    for (int i = 0; i < typedArray.length(); i++) {      catogary_resourceIds[i] = typedArray.getResourceId(i, 0);    }    catogarys = new ArrayList<Catogray>();    viewPagerHomeFragment = (ViewPager) findViewById(R.id.viewPagerHomeFragment);    layoutInflater = getLayoutInflater();    radioGroup_index_fragment =         (RadioGroup) findViewById(R.id.radioGroup_index_fragment);    for (int i = 0; i < catogary_names.length; i++) {      Catogray catogary = new Catogray();      catogary.setName(catogary_names[i]);      catogary.setImage_source(catogary_resourceIds[i]);      catogarys.add(catogary);    }    initViewPager();  }  public void initViewPager() {    gridViews = new ArrayList<View>();    ///定义第一个GridView    GridView gridView1 =        (GridView) layoutInflater.inflate(R.layout.grid_fragment_home, null);    MyGridViewAdapter myGridViewAdapter1 = new MyGridViewAdapter(0, 8);    gridView1.setAdapter(myGridViewAdapter1);    ///定义第二个GridView    GridView gridView2 = (GridView)        layoutInflater.inflate(R.layout.grid_fragment_home, null);    MyGridViewAdapter myGridViewAdapter2 = new MyGridViewAdapter(1, 8);    gridView2.setAdapter(myGridViewAdapter2);    ///定义第三个GridView    GridView gridView3 = (GridView)        layoutInflater.inflate(R.layout.grid_fragment_home, null);    MyGridViewAdapter myGridViewAdapter3 = new MyGridViewAdapter(2, 8);    gridView3.setAdapter(myGridViewAdapter3);    gridViews.add(gridView1);    gridViews.add(gridView2);    gridViews.add(gridView3);   ///定义viewpager的PagerAdapter    viewPagerHomeFragment.setAdapter(new PagerAdapter() {      @Override      public boolean isViewFromObject(View arg0, Object arg1) {        // TODO Auto-generated method stub        return arg0 == arg1;      }      @Override      public int getCount() {        // TODO Auto-generated method stub        return gridViews.size();      }      @Override      public void destroyItem(ViewGroup container, int position,                  Object object) {        // TODO Auto-generated method stub        container.removeView(gridViews.get(position));        //super.destroyItem(container, position, object);      }      @Override      public Object instantiateItem(ViewGroup container, int position) {        // TODO Auto-generated method stub        container.addView(gridViews.get(position));        return gridViews.get(position);      }    });    ///注册viewPager页选择变化时的响应事件    viewPagerHomeFragment.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {      @Override      public void onPageScrollStateChanged(int position) {        // TODO Auto-generated method stub      }      @Override      public void onPageScrolled(int arg0, float arg1, int arg2) {        // TODO Auto-generated method stub      }      @Override      public void onPageSelected(int position) {        // TODO Auto-generated method stub        RadioButton radioButton = (RadioButton)            radioGroup_index_fragment.getChildAt(position);        radioButton.setChecked(true);      }    });  }  ///定影GridView的Adapter  public class MyGridViewAdapter extends BaseAdapter {    private int page;    private int count;    public MyGridViewAdapter(int page, int count) {      this.page = page;      this.count = count;    }    @Override    public int getCount() {      // TODO Auto-generated method stub      return 8;    }    @Override    public Catogray getItem(int position) {      // TODO Auto-generated method stub      return catogarys.get(page * count + position);    }    @Override    public long getItemId(int position) {      // TODO Auto-generated method stub      return 0;    }    @Override    public View getView(int position, View convertView, ViewGroup parent) {      // TODO Auto-generated method stub      ViewHolder viewHolder = null;      final Catogray catogary = catogarys.get(page * count + position);      if (convertView == null) {        viewHolder = new ViewHolder();        convertView = layoutInflater.inflate(R.layout.grid_fragment_home_item, null);        viewHolder.grid_fragment_home_item_img =            (ImageView) convertView.findViewById(R.id.grid_fragment_home_item_img);        viewHolder.grid_fragment_home_item_txt =            (TextView) convertView.findViewById(R.id.grid_fragment_home_item_txt);        convertView.setTag(viewHolder);      } else {        viewHolder = (ViewHolder) convertView.getTag();      }      viewHolder.grid_fragment_home_item_img.setImageResource(catogary.getImage_source());      viewHolder.grid_fragment_home_item_txt.setText(catogary.getName());      viewHolder.grid_fragment_home_item_img.          setOnClickListener(new View.OnClickListener() {        @Override        public void onClick(View view) {          // TODO Auto-generated method stub          Toast.makeText(TestViewpagerGridActivity.this,              catogary.getName(), Toast.LENGTH_SHORT).show();        }      });      return convertView;    }  }  public class ViewHolder {    public ImageView grid_fragment_home_item_img;    public TextView grid_fragment_home_item_txt;  }}

  

Demo下载
最后,以上例子都来源与安卓无忧,请去应用宝或者豌豆荚下载:http://android.myapp.com/myapp/detail.htm?apkName=com.shandong.mm.androidstudy,源码例子文档一网打尽。