看图先:
页面中填充内容是随机关键词飞入和飞出动画效果,随后会更新,现在请先无视吧
首先是 导入jar包 下载地址: android-support-v4.jar
布局文件里添加viewPager布局
- <android.support.v4.view.ViewPager
- android:id="@+id/search_viewpager"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_gravity="center" >
- </android.support.v4.view.ViewPager>
再创建两个item布局用于填充在ViewPager里
然后就是Activity了,主要写了左右滑动切换页面,还有一个小图片随页面切换 位移的动画效果
- public class SearchAllcityActivity extends Activity {
- private KeywordsFlow keywordsFlow;
- private ViewPager viewPager;
- private ImageView imageView;
- private List<View> lists = new ArrayList<View>();
- private ViewPagerAdapter adapter;
- private Bitmap cursor;
- private int offSet;
- private int currentItem;
- private Matrix matrix = new Matrix();
- private int bmWidth;
- private Animation animation;
- private Button shuaxin_sq, shuaxin_fl;
- public void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.search_allcity);
- // 随页面滑动图片
- imageView = (ImageView) findViewById(R.id.viewpaget_img);
- // 热门商圈和热门分类 页面添加到viewPager集合
- lists.add(getLayoutInflater().inflate(R.layout.search_hot_shangqu, null));
- lists.add(getLayoutInflater().inflate(R.layout.search_hot_fenlei, null));
- // 初始化滑动图片位置
- initeCursor();
- adapter = new ViewPagerAdapter(lists);
- viewPager = (ViewPager) findViewById(R.id.search_viewpager);
- viewPager.setAdapter(adapter);
- // ViewPager滑动监听器
- viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
- @Override
- public void onPageSelected(int arg0) {
- // TODO Auto-generated method stub
- // 当滑动时,顶部的imageView是通过animation缓慢的滑动
- switch (arg0) {
- case 0:
- if (currentItem == 1) {
- animation = new TranslateAnimation(offSet * 2 + bmWidth, 0, 0,0);
- } else if (currentItem == 2) {
- animation = new TranslateAnimation(offSet * 4 + 2 * bmWidth, 0,0, 0);
- }
- break;
- case 1:
- if (currentItem == 0) {
- animation = new TranslateAnimation(0, offSet * 2 + bmWidth, 0,0);
- } else if (currentItem == 2) {
- animation = new TranslateAnimation(4 * offSet + 2 * bmWidth,offSet * 2 + bmWidth, 0, 0);
- }
- break;
- }
- currentItem = arg0;
- animation.setDuration(500);
- animation.setFillAfter(true);
- imageView.startAnimation(animation);
- }
- @Override
- public void onPageScrolled(int arg0, float arg1, int arg2) {
- // TODO Auto-generated method stub
- }
- @Override
- public void onPageScrollStateChanged(int arg0) {
- // TODO Auto-generated method stub
- }
- });
- }
- /**
- * 计算滑动的图片的位置
- */
- private void initeCursor() {
- cursor = BitmapFactory.decodeResource(getResources(),R.drawable.viewpager_img);
- bmWidth = cursor.getWidth();
- DisplayMetrics dm;
- dm = getResources().getDisplayMetrics();
- offSet = (dm.widthPixels - 2 * bmWidth) / 4;
- matrix.setTranslate(offSet, 0);
- imageView.setImageMatrix(matrix); // 需要iamgeView的scaleType为matrix
- currentItem = 0;
- }
- }
public class SearchAllcityActivity extends Activity { private KeywordsFlow keywordsFlow; private ViewPager viewPager; private ImageView imageView; private List<View> lists = new ArrayList<View>(); private ViewPagerAdapter adapter; private Bitmap cursor; private int offSet; private int currentItem; private Matrix matrix = new Matrix(); private int bmWidth; private Animation animation; private Button shuaxin_sq, shuaxin_fl; public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.search_allcity); // 随页面滑动图片 imageView = (ImageView) findViewById(R.id.viewpaget_img); // 热门商圈和热门分类 页面添加到viewPager集合 lists.add(getLayoutInflater().inflate(R.layout.search_hot_shangqu, null)); lists.add(getLayoutInflater().inflate(R.layout.search_hot_fenlei, null)); // 初始化滑动图片位置 initeCursor(); adapter = new ViewPagerAdapter(lists); viewPager = (ViewPager) findViewById(R.id.search_viewpager); viewPager.setAdapter(adapter); // ViewPager滑动监听器 viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageSelected(int arg0) { // TODO Auto-generated method stub // 当滑动时,顶部的imageView是通过animation缓慢的滑动 switch (arg0) { case 0: if (currentItem == 1) { animation = new TranslateAnimation(offSet * 2 + bmWidth, 0, 0,0); } else if (currentItem == 2) { animation = new TranslateAnimation(offSet * 4 + 2 * bmWidth, 0,0, 0); } break; case 1: if (currentItem == 0) { animation = new TranslateAnimation(0, offSet * 2 + bmWidth, 0,0); } else if (currentItem == 2) { animation = new TranslateAnimation(4 * offSet + 2 * bmWidth,offSet * 2 + bmWidth, 0, 0); } break; } currentItem = arg0; animation.setDuration(500); animation.setFillAfter(true); imageView.startAnimation(animation); } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { // TODO Auto-generated method stub } @Override public void onPageScrollStateChanged(int arg0) { // TODO Auto-generated method stub } }); } /** * 计算滑动的图片的位置 */ private void initeCursor() { cursor = BitmapFactory.decodeResource(getResources(),R.drawable.viewpager_img); bmWidth = cursor.getWidth(); DisplayMetrics dm; dm = getResources().getDisplayMetrics(); offSet = (dm.widthPixels - 2 * bmWidth) / 4; matrix.setTranslate(offSet, 0); imageView.setImageMatrix(matrix); // 需要iamgeView的scaleType为matrix currentItem = 0; } }
最后,不能忘了ViewPager的Adapter
- public class ViewPagerAdapter extends PagerAdapter{
- List<View> viewLists;
- public ViewPagerAdapter(List<View> lists)
- {
- viewLists = lists;
- }
- @Override
- public int getCount() { //获得size
- // TODO Auto-generated method stub
- return viewLists.size();
- }
- @Override
- public boolean isViewFromObject(View arg0, Object arg1) {
- // TODO Auto-generated method stub
- return arg0 == arg1;
- }
- @Override
- public void destroyItem(View view, int position, Object object) //销毁Item
- {
- ((ViewPager) view).removeView(viewLists.get(position));
- }
- @Override
- public Object instantiateItem(View view, int position) //实例化Item
- {
- ((ViewPager) view).addView(viewLists.get(position), 0);
- return viewLists.get(position);
- }
- }