转载请注明出处，谢谢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>
里面有一个viewPager控件和LinearLayout控件，其中LinearLayout是装小圆圈的
接下来是三个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>
我们可以看到前面两个layout就直接是个图片做背景，第三个我只是加了一个透明的按钮，模仿下面的“立即进入”按钮。（在这里，如果你有更好的方法，可以分享一下哈）
接下来是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);
}
}
关于Preference存储和取出数据这些操作，我想我不用多说了吧。
主要功能都是在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
时间： 2024-08-23 20:36:06