ViewPager实现微博引导页功能

来源：互联网发布：昆明理工大学网络教学编辑：程序博客网时间：2024/05/16 13:43

最近做项目要用到ViewPager , 所以就去网上找博文看看，然后自己就动手做了个小demo，写这篇博文的目的是加深自己的印象吧。好了，废话不多说，先看看效果吧！
这里写图片描述

先来说下整理思路吧，基本上网上都有过了。
1. 从SharedPreferences中获取是否是第一次进入微博的flag。
2. 如果是第一次，则2秒后进入微博引导页，否则进入微博主页
3. 在微博引导页的最后一页显示进入微博的按钮，点击后实现2个功能：a1): 设置SharedPreferences中的flag为false，那么下次进入微博就直接进主页了。
a2): 进入微博主页。

下面开始上代码了，首先看看主布局文件，如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <ImageView         android:layout_width="match_parent"        android:layout_height="match_parent"        android:src="@drawable/welcome_android"        /></LinearLayout>

很简单，就是一个ImageView ，用来显示微博首页。

引导页的布局如下：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <android.support.v4.view.ViewPager        android:id="@+id/id_viewpager"        android:layout_width="match_parent"        android:layout_height="match_parent" />    <Button        android:id="@+id/id_enter_weibo"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center_horizontal"        android:layout_marginBottom="70dp"        android:layout_marginTop="1000dp"        android:background="#ff0000"        android:gravity="center"        android:text="进入微博"        android:textColor="#ffffff"        android:textSize="45sp"        android:textStyle="bold"        android:visibility="invisible" />    <LinearLayout        android:id="@+id/id_point_groupe"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_gravity="bottom"        android:layout_marginBottom="10dp"        android:gravity="center_horizontal"        android:orientation="horizontal" >    </LinearLayout></FrameLayout>

上面的布局文件也很明了，最上面是viewpager，最先面的LinearLayout是用来动态的添加指示器”圆点“的。

接着看看设置SharedPreferences的工具类，代码如下：

public class Utils {    public final static String FIRST_FLAG = "IS_FIRST_ENTER_WEIBO";    public static boolean setFlag(Context context,String key, boolean value){        SharedPreferences sf = PreferenceManager.getDefaultSharedPreferences(context);        Editor editor = sf.edit();        editor.putBoolean(key, value);        return editor.commit();    }    public static boolean getFlag(Context context,String key, boolean defValue){        SharedPreferences sf = PreferenceManager.getDefaultSharedPreferences(context);        boolean value = sf.getBoolean(key, defValue);        return value;    }}

我用的是getDefaultSharedPreferences方法，它会将文件存放在 /data/data/com.example.viewpagerdemo/shared_prefs/com.example.viewpagerdemo_preferences.xml , 由于是用默认的方法，所以文件名是包名+“_preferences”，这个可以从源码中看出来：

public static SharedPreferences getDefaultSharedPreferences(Context context) {        return context.getSharedPreferences(getDefaultSharedPreferencesName(context),                getDefaultSharedPreferencesMode());    }

其中第一个参数就是文件名：我们看看getDefaultSharedPreferencesName（context）方法，如下:

private static String getDefaultSharedPreferencesName(Context context) {        return context.getPackageName() + "_preferences";    }

从这句” context.getPackageName()+ “_preferences”“可以看出来了吧。

下面上MainWeiboActivity.java，如下：

public class MainWeiboActivity extends Activity {    private static final int GO_HOME = 10;    private static final int GO_GUIDE = 11;    // 延迟3秒    private static final long GUIDE_DELAY_MILLIS = 2000;    Handler mHandler = new Handler() {        public void handleMessage(Message msg) {            switch (msg.what) {            case GO_HOME:                Intent intent = new Intent(MainWeiboActivity.this, WeiboActivity.class);                startActivity(intent);                break;            case GO_GUIDE:                Log.d("...", " guide ");                Intent in = new Intent(MainWeiboActivity.this, WeiboGuideActivity.class);                startActivity(in);                break;            default:                break;            }        };    };    @Override    protected void onCreate(Bundle savedInstanceState) {        // TODO Auto-generated method stub        super.onCreate(savedInstanceState);        requestWindowFeature(Window.FEATURE_NO_TITLE);        setContentView(R.layout.weibo_tab01);        init();    }    private void init() {        //首先从 SharedPreferences 文件中获取 flag标志位，表示是否第一次进入微博，默认值设为true        boolean isFirstEnter = Utils.getFlag(MainWeiboActivity.this,                Utils.FIRST_FLAG, true);        Log.d("zjt", "isFirstEnter = "+isFirstEnter);        if (isFirstEnter) {// 如果是第一次进入微博，那么直接进入微博引导页面            // Message msg = mHandler.obtainMessage();            // msg.what = GO_GUIDE;            mHandler.sendEmptyMessageDelayed(GO_GUIDE, GUIDE_DELAY_MILLIS);// 延时2秒        } else {// 否则，直接进入微博主页            mHandler.sendEmptyMessageDelayed(GO_HOME, GUIDE_DELAY_MILLIS);// 延时2秒        }    }}

注释很清楚，就不解释了。

接下来看看引导页WeiboGuideActivity.java文件：

public class WeiboGuideActivity extends Activity {    private List<View> mViews = new ArrayList<View>();    private ViewPager mViewPager;    private LinearLayout mPointLayout;    private LayoutInflater mInflater;    private ImageView [] mPointImageViews;    private Button enterWb;    @Override    protected void onCreate(Bundle savedInstanceState) {        // TODO Auto-generated method stub        super.onCreate(savedInstanceState);        // requestWindowFeature(Window.FEATURE_NO_TITLE);        setContentView(R.layout.weibo_guide_layout);        mInflater = LayoutInflater.from(this);        initView();    }    private void initView() {        mViewPager = (ViewPager) findViewById(R.id.id_viewpager);        mPointLayout = (LinearLayout) findViewById(R.id.id_point_groupe);        enterWb = (Button) findViewById(R.id.id_enter_weibo);        View view1 = mInflater.inflate(R.layout.weibo_tab02, null);        View view2 = mInflater.inflate(R.layout.weibo_tab03, null);        View view3 = mInflater.inflate(R.layout.weibo_tab04, null);        View view4 = mInflater.inflate(R.layout.weibo_tab05, null);        mViews.add(view1);        mViews.add(view2);        mViews.add(view3);        mViews.add(view4);        addPointImg();        mViewPager.setAdapter(new PagerAdapter() {            @Override            public void destroyItem(ViewGroup container, int position,                    Object object) {                // TODO Auto-generated method stub                container.removeView(mViews.get(position));            }            @Override            public Object instantiateItem(ViewGroup container, int position) {                // TODO Auto-generated method stub                View view = mViews.get(position);                container.addView(view);                //Log.d("--------------", "position = "+position);                return view;            }            @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 mViews.size();            }        });        mViewPager.setOnPageChangeListener(new OnPageChangeListener() {            @Override            public void onPageSelected(int arg0) {                // TODO Auto-generated method stub                Log.d("xxx", " arg0 =  "+arg0);                setPointBacground();                //滑动至的页面小点设为亮色                mPointImageViews[arg0].setImageResource(R.drawable.guide_round_current);                if(arg0 == mViews.size()-1){                    enterWb.setVisibility(View.VISIBLE);                    enterWb.setOnClickListener(new OnClickListener() {                        @Override                        public void onClick(View v) {                            // TODO Auto-generated method stub                            //引导页最后一个页面点击进入微博按钮后，首先需要修改SharedPreferences文件中的 flag值，设为false表示非第一次进入                            Utils.setFlag(WeiboGuideActivity.this, Utils.FIRST_FLAG, false);                            Intent intent = new Intent(WeiboGuideActivity.this, WeiboActivity.class);                            startActivity(intent);                        }                    });                }else{                    enterWb.setVisibility(View.INVISIBLE);                }            }            @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            }        });    }    /**     * 将所有小点变为暗色     */    public void setPointBacground(){        for (int i = 0; i < mViews.size(); i++) {            mPointImageViews[i].setImageResource(R.drawable.guide_round_default);        }    }    private void addPointImg() {        LinearLayout.LayoutParams pm = new LinearLayout.LayoutParams(                20,                20);        mPointImageViews = new ImageView[mViews.size()];        for (int i = 0; i < mViews.size(); i++) {            ImageView iv = new ImageView(this);            mPointImageViews[i] = iv;            pm.setMargins(20, 0, 0, 0);            if(i==0){                mPointImageViews[i].setImageResource(R.drawable.guide_round_current);            }else{                mPointImageViews[i].setImageResource(R.drawable.guide_round_default);            }            mPointLayout.addView(mPointImageViews[i], pm);        }    }}

我们来看看initView（）方法，主要是用LayoutInflater来将.xml文件解析成View。其中4个View的布局文件都很简单，类似于最上面的主布局文件，这里不再赘述。

里面的addPointImg()方法，主要是更具引导页的数量来设置指示器”圆点“的个数，我们这里是4个。

设置指示器”圆点“方法在setOnPageChangeListener中，首先是通过setPointBacground()方法将所有圆点设置为默认色，然后通过mPointImageViews[arg0].setImageResource(R.drawable.guide_round_current);将滑动至的页面的”圆点“设为亮色。

后面的点击按钮就是在滑动都最后一个引导页时会出现，点击实现之前步骤3所说：
3. 在微博引导页的最后一页显示进入微博的按钮，点击后实现2个功能：a1): 设置SharedPreferences中的flag为false，那么下次进入微博就直接进主页了。
a2): 进入微博主页。

说道这里，基本步骤就完成了。源码地址之后会奉上。谢谢！

资源下载地址：http://download.csdn.net/my

2 0