转载请注明出处,谢谢http://blog.csdn.net/harryweasley/article/details/42079167
先说下思路:1.利用Preference存储数据,来记录是否是第一次打开软件
2.利用ViewPager实现几个图片之间的切换,在每个图片下方用代码画圆圈,圆圈会跟着图片的改变而改变。
3.在最后一张图片,添加button点击事件,进入正式界面。
程序虽然很简单,但是很实用。
看下效果图:
我们会看到圆圈的点会根据图片改变而改变。
下面开始讲解:
首先是activity_main.xml文件
<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" tools:context=".MainActivity" > <android.support.v4.view.ViewPager android:id="@+id/guide_viewPager" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@android:color/transparent" /> <LinearLayout android:id="@+id/linearlayout" android:layout_width="match_parent" android:layout_height="30dp" android:layout_alignParentBottom="true" android:gravity="center_horizontal" android:orientation="horizontal" > </LinearLayout> </RelativeLayout>
接下来是三个pager_layout1.xml,pager_layout2.xml,pager_layout3.xml
<?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="match_parent" android:gravity="center" android:background="@drawable/guide1" android:orientation="vertical" > </LinearLayout>
<?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" android:background="@drawable/guide2" android:orientation="vertical" > </RelativeLayout>
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/guide3" android:gravity="center" android:orientation="vertical" > <Button android:id="@+id/guide_enter" android:layout_width="match_parent" android:layout_height="100dp" android:layout_gravity="center_horizontal|bottom" android:layout_marginBottom="0dp" android:background="@android:color/transparent" /> </FrameLayout>
接下来是PreferenceUtil类,存储isShow的值
package com.example.guiddemo; import android.content.Context; import android.content.SharedPreferences; public class PreferenceUtil { /** * 是否显示欢迎界面,true表示显示,false表示不显示 */ public static final String SHOW_GUIDE = "showguide"; /** * 保存到Preference */ public static void setBoolean(Context context, String key, boolean value) { // 得到SharedPreferences SharedPreferences preferences = context.getSharedPreferences( "preference", Context.MODE_PRIVATE); SharedPreferences.Editor editor = preferences.edit(); editor.putBoolean(key, value); editor.commit(); } /** * 从Preference取出数据 */ public static boolean getBoolean(Context context, String key) { SharedPreferences preferences = context.getSharedPreferences( "preference", Context.MODE_PRIVATE); // 返回key值,key值默认值是false return preferences.getBoolean(key, false); } }
主要功能都是在MainActivity里,我的代码里写了详细的注释的
package com.example.guiddemo; import java.util.ArrayList; import java.util.List; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.view.Gravity; import android.view.LayoutInflater; import android.view.View; import android.view.View.OnClickListener; import android.view.ViewGroup.LayoutParams; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.TextView; public class MainActivity extends Activity { /** * 是否显示引导界面 */ boolean isShow = false; /** * ViewPager对象 */ private ViewPager mViewPager; /** * 装载小圆圈的LinearLayout */ private LinearLayout indicatorLayout; /** * ViewPager的每个页面集合 */ private List<View> views; /** * ViewPager下面的小圆圈 */ private ImageView[] mImageViews; /** * PagerAdapter对象 */ private MyPagerAdapter myPagerAdapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // 得到Preference存储的isShow数据 isShow = PreferenceUtil.getBoolean(this, PreferenceUtil.SHOW_GUIDE); //isShow=false;调试的时候用的 if (isShow) { initLog(); } else { initView(); } } /** * 进入登录界面 */ private void initLog() { startActivity(new Intent(this, LogActivity.class)); finish(); } /** * 进入引导界面 */ private void initView() { mViewPager = (ViewPager) findViewById(R.id.guide_viewPager); indicatorLayout = (LinearLayout) findViewById(R.id.linearlayout); LayoutInflater inflater = LayoutInflater.from(this); views = new ArrayList<View>(); views.add(inflater.inflate(R.layout.pager_layout1, null)); views.add(inflater.inflate(R.layout.pager_layout2, null)); views.add(inflater.inflate(R.layout.pager_layout3, null)); myPagerAdapter = new MyPagerAdapter(this, views); mImageViews = new ImageView[views.size()]; drawCircl(); mViewPager.setAdapter(myPagerAdapter); mViewPager.setOnPageChangeListener(new GuidePageChangeListener()); } /** * 画圆圈 */ private void drawCircl() { int num = views.size(); for (int i = 0; i < num; i++) { //实例化每一个mImageViews[i] mImageViews[i] = new ImageView(this); if (i == 0) { // 默认选中第一张照片,所以将第一个小圆圈变为icon_carousel_02 mImageViews[i].setImageResource(R.drawable.icon_carousel_02); } else { mImageViews[i].setImageResource(R.drawable.icon_carousel_01); } // 给每个小圆圈都设置间隔 mImageViews[i].setPadding(7, 7, 7, 7); LinearLayout.LayoutParams params = new LinearLayout.LayoutParams( LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); params.gravity = Gravity.CENTER_VERTICAL; // 让每一个小圆圈都在LinearLayout的CENTER_VERTICAL(中间垂直) indicatorLayout.addView(mImageViews[i], params); } } /** * * @author Harry 页面改变监听事件 */ private class GuidePageChangeListener implements OnPageChangeListener { public void onPageScrollStateChanged(int arg0) { } public void onPageScrolled(int arg0, float arg1, int arg2) { } /** * 页面有所改变,如果是当前页面,将小圆圈改为icon_carousel_02,其他页面则改为icon_carousel_01 */ public void onPageSelected(int arg0) { for (int i = 0; i < mImageViews.length; i++) { if (arg0 != i) { mImageViews[i] .setImageResource(R.drawable.icon_carousel_01); } else { mImageViews[arg0] .setImageResource(R.drawable.icon_carousel_02); } } } } class MyPagerAdapter extends PagerAdapter { private List<View> mViews; private Activity mContext; public MyPagerAdapter(Activity context, List<View> views) { this.mViews = views; this.mContext = context; } @Override public int getCount() { return mViews.size(); } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == arg1; } @Override public int getItemPosition(Object object) { return super.getItemPosition(object); } @Override public void destroyItem(View arg0, int arg1, Object arg2) { ((ViewPager) arg0).removeView(mViews.get(arg1)); } /** * 实例化页卡,如果变为最后一页,则获取它的button并且添加点击事件 */ @Override public Object instantiateItem(View arg0, int arg1) { ((ViewPager) arg0).addView(mViews.get(arg1), 0); if (arg1 == mViews.size() - 1) { TextView enterBtn = (TextView) arg0 .findViewById(R.id.guide_enter); enterBtn.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // 将isShow保存为true,并进入登录界面 PreferenceUtil.setBoolean(mContext, PreferenceUtil.SHOW_GUIDE, true); initLog(); } }); } return mViews.get(arg1); } } }
关于ViewPager相关知识,大家可以看这个博客,该博主讲的很详细
http://blog.csdn.net/wangjinyu501/article/details/8169924
我的demo下载地址:
http://download.csdn.net/detail/harryweasley/8278633
原文地址:http://blog.csdn.net/harryweasley/article/details/42079167