有过开发经验的程序员都知道这个效果，就是当我们第一次安装一个软件时有一个使用说明的图片切换效果，他是如何实现的呢？今天我们就一起学习一下吧，难度系数1.0，就是只要你仔细分析，都可以学会。废话不多说，下面我们开始本篇的介绍。
本篇我需要使用到ViewPager，对于ViewPager的介绍，就不再详述，网上关于ViewPager的介绍很多，大家可以自行去了解。
再进行动画效果制作之前我们先实现一个图片的切换效果。
布局文件：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity" > <com.example.android_viewpager.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="match_parent"> </com.example.android_viewpager.ViewPager> </RelativeLayout> |
我们的Activity:
public class MainActivity extends Activity { private ViewPager mViewPager;//系统提供的 int [] imageIds = {R.drawable.guide_image1, R.drawable.guide_image2, R.drawable.guide_image3}; List<ImageView> listImager = new ArrayList<ImageView>(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mViewPager = (ViewPager) findViewById(R.id.viewPager);//调用系统提供的 mViewPager.setAdapter(new PagerAdapter() { @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView(listImager.get(position)); } @Override public Object instantiateItem(ViewGroup container, int position) { ImageView imagerView = new ImageView(MainActivity.this); imagerView.setImageResource(imageIds[position]); imagerView.setScaleType(ScaleType.CENTER_CROP);//设置样式 container.addView(imagerView); listImager.add(imagerView); return imagerView; } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == arg1; } @Override public int getCount() { return imageIds.length; } }); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.main, menu); return true; } } |
