一、实现的思路
当欢迎页面加载完成的时候(一般为动画),即欢迎页面动画加载完成的时候,从本地存储中取出记录是否是第一次进入,然后进入引导页或者主页,如果是第一次就进入引导页,否则进入主页。
引导页布局使用:viewPager实现,可根据需要添加“开始体验”,“跳过”按钮等,布局中下位置可使用imgae设置其drawable的shape为oval,作为引导页面的指示器点,根据页面的多少实现动态添加,当然也可根据需求实现引导页面的自由滚动。
二、以下是页面布局:
代码语言:javascript复制<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@ id/activity_guide"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.atguigu.beijingnews.activity.GuideActivity">
<android.support.v4.view.ViewPager
android:id="@ id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<Button
android:id="@ id/btn_start_main"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="80dp"
android:background="@drawable/btn_start_main_bg_selector"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:text="开始体验"
android:textColor="@drawable/btn_start_main_textcolor_selector"
android:textSize="20sp"
android:visibility="gone" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="40dp">
<LinearLayout
android:id="@ id/ll_point_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" />
<ImageView
android:id="@ id/iv_red_point"
android:layout_width="10dp"
android:layout_height="10dp"
android:src="@drawable/red_point" />
</RelativeLayout>
</RelativeLayout>
三、引导页面指示点的shape:
代码语言:javascript复制<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<corners android:radius="5dp" />
<solid android:color="@android:color/holo_red_light" />
</shape>
四、欢迎页面代码:
代码语言:javascript复制 //当动画播放结束的时候回调
@Override
public void onAnimationEnd(Animation animation) {
//当动画播放完成进入--主页面或者引导页面
boolean startMain = CacheUtils.getBoolean(WelcomeActivity.this, GuideActivity.START_MAIN);
if (startMain) {
startActivity(new Intent(WelcomeActivity.this, MainActivity.class));
} else {
startActivity(new Intent(WelcomeActivity.this, GuideActivity.class));
}
finish();
}
五、引导页代码:
代码语言:javascript复制package com.atguigu.beijingnews.activity;
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.view.View;
import android.view.ViewGroup;
import android.view.ViewTreeObserver;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import com.atguigu.beijingnews.MainActivity;
import com.atguigu.beijingnews.R;
import com.atguigu.beijingnews.utils.CacheUtils;
import com.atguigu.beijingnews.utils.DensityUtil;
import com.atguigu.beijingnews.utils.LogUtil;
import java.util.ArrayList;
public class GuideActivity extends Activity {
public static final String START_MAIN = "start_main";
private ViewPager viewpager;
private LinearLayout ll_point_group;
private ImageView iv_red_point;
private Button btn_start_main;
private ArrayList<ImageView> imageViews;
/**
* 两点间的间距
*/
private int leftMarg;
private int widthDpi;
/**
* 设置适配器--> 准备数据
*/
private int ids[] = new int[]{
R.drawable.guide_1, R.drawable.guide_2, R.drawable.guide_3
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_guide);
viewpager = (ViewPager) findViewById(R.id.viewpager);
ll_point_group = (LinearLayout) findViewById(R.id.ll_point_group);
iv_red_point = (ImageView) findViewById(R.id.iv_red_point);
btn_start_main = (Button) findViewById(R.id.btn_start_main);
initData();
}
/**
* 初始化引导页的数据
*/
private void initData() {
widthDpi = DensityUtil.dip2px(this, 10);
LogUtil.e(widthDpi "-----------------");
imageViews = new ArrayList<>();
for (int i = 0; i < ids.length; i ) {
ImageView imageView = new ImageView(this);
imageView.setBackgroundResource(ids[i]);
//把图片添加到集合中
imageViews.add(imageView);
//添加灰色的点
ImageView point = new ImageView(this);
point.setImageResource(R.drawable.point_gray);
//设置点的大小
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(widthDpi, widthDpi);
if (i != 0) {
//设置间距
params.leftMargin = widthDpi;
}
point.setLayoutParams(params);
ll_point_group.addView(point);
}
//设置适配器
viewpager.setAdapter(new MyPagerAdapter());
/**
* 求间距
* 构造方法--> 测量(measure--onMeasure)--> layout-->onLayout-->draw-->onDraw
*/
iv_red_point.getViewTreeObserver().addOnGlobalLayoutListener(new MyOnGlobalLayoutListener());
//监听viewPager页面滑动的百分比
viewpager.addOnPageChangeListener(new MyOnPageChangeListener());
//设置点击事件
btn_start_main.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//记录进入引导页面
CacheUtils.putBoolean(GuideActivity.this, START_MAIN, true);
//跳转到主页面
startActivity(new Intent(GuideActivity.this, MainActivity.class));
finish();//关闭引导页面
}
});
}
class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {
/**
* @param position 当前滑动页面的下标位置
* @param positionOffset 滑动了页面的百分比
* @param positionOffsetPixels 滑动了页面多少像数
*/
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
//红点移动的距离 = ViewPager页面的百分比* 间距
// float leftMargin = positionOffset * leftMarg;
//坐标 = 起始位置 红点移动的距离;
float leftMargin = (position positionOffset) * leftMarg;
RelativeLayout.LayoutParams paramgs = (RelativeLayout.LayoutParams) iv_red_point.getLayoutParams();
//距离左边的距离
paramgs.leftMargin = (int) leftMargin;
iv_red_point.setLayoutParams(paramgs);
LogUtil.e("position==" position ",positionOffset==" positionOffset ",positionOffsetPixels==" positionOffsetPixels);
}
@Override
public void onPageSelected(int position) {
if (position == imageViews.size() - 1) {//滑动到最后一个页面显示按钮
//让按钮显示
btn_start_main.setVisibility(View.VISIBLE);
} else {
//按钮隐藏
btn_start_main.setVisibility(View.GONE);
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
}
class MyOnGlobalLayoutListener implements ViewTreeObserver.OnGlobalLayoutListener {
@Override
public void onGlobalLayout() {
iv_red_point.getViewTreeObserver().removeGlobalOnLayoutListener(this);
//间距 = 第一个点距离左边距离 - 第0个点距离左边距离
leftMarg = ll_point_group.getChildAt(1).getLeft() - ll_point_group.getChildAt(0).getLeft();
}
}
class MyPagerAdapter extends PagerAdapter {
@Override
public int getCount() {
return imageViews.size();
}
/**
* @param container viewPager容器
* @param position 创建视图对应的位置
* @return
*/
@Override
public Object instantiateItem(ViewGroup container, int position) {
ImageView imageView = imageViews.get(position);
container.addView(imageView);
return imageView;
}
/**
* @param view
* @param object
* @return
*/
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
}
好了,今天的分享就到这里,大家有什么问题,欢迎与我交流。