目前市面上几乎所有的APP应用在第一次使用时都会有个引导页面,要么用引导用户操作,要么介绍产品优势,要么用来打广告等。引导页面一般是由3-6张图形界面组成,好的引导页面也不失为该app的亮丽风景!今天我也来说说引导页面的设计(当然有N种方法),我只是把我们项目中用到的方法代码贴出来,方便自己做个笔记。
我们实现的原理很简单,就是用一个ViewPager全屏展示一些图片,主要代码如下:
主页面布局:
<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <com.huika.pmall.views.MyViewPager android:id="@+id/whatsnew_viewpager" android:layout_width="fill_parent" android:layout_height="fill_parent" /><!–下面这个LinearLayout是装载图片指导步圆点的–> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:layout_marginBottom="30dp" android:gravity="center_horizontal" android:orientation="horizontal" android:visibility="gone" > <ImageView android:id="@+id/page0" android:layout_width="wrap_content" android:layout_height="wrap_content" android:scaleType="matrix" android:src="@drawable/page_now" /> <ImageView android:id="@+id/page1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:scaleType="matrix" android:src="@drawable/page" /> <ImageView android:id="@+id/page2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:scaleType="matrix" android:src="@drawable/page" /> </LinearLayout></FrameLayout>
主页面代码:
public class GuideViewAct extends Activity implements OnRightEndScrollListener {private MyViewPager mViewPager;private ImageView mPage0;private ImageView mPage1;private ImageView mPage2;@SuppressWarnings("unused")private int currIndex = 0;@Overridepublic void onCreate() {
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.layout_guide_view);
initViews() ;}private void initViews() {mViewPager = (MyViewPager) findViewById(R.id.whatsnew_viewpager);mViewPager.setRightEndScrollListener(this);mViewPager.setOnPageChangeListener(new MyOnPageChangeListener());mPage0 = (ImageView) findViewById(R.id.page0);mPage1 = (ImageView) findViewById(R.id.page1);mPage2 = (ImageView) findViewById(R.id.page2);PagerAdapter mPagerAdapter = new PagerAdapter() {@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0 == arg1;}@Overridepublic int getCount() {return 3;//我们引导页面只有3个}@Overridepublic void destroyItem(View container, int position, Object object) {((ViewPager) container).removeView((View) object);}@Overridepublic View instantiateItem(View container, int position) {LayoutInflater inflater = LayoutInflater.from(container.getContext());
功夫不负有心人。