第一步java
在xml中android
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.practise3.MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/vp_guide"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<Button
android:id="@+id/btn_start"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="60dp"
android:background="#666"
android:padding="5dp"
android:text="进入主页面"
android:visibility="invisible"/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="20dp">
<LinearLayout
android:id="@+id/ll_dot_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<View
android:layout_width="10dp"
android:layout_height="10dp"
android:background="#ff1e00"/>
<View
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_marginLeft="10dp"
android:background="#ff0000"/>
<View
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_marginLeft="10dp"
android:background="#ff0000"/>
</LinearLayout>
<View
android:id="@+id/view_red_dot"
android:layout_width="10dp"
android:layout_height="10dp"
android:background="#21cb18"/>
</RelativeLayout>
</RelativeLayout>
第二步app
在Mainactivity中ide
package com.example.practise3;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
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 java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
————————————————————————————————————————————————————————————————————————————————————————————————————————
private static final String TAG = "GuideActivity";
/**
* 功能引导页展现的图片集合
*/
private static int[] mImageIds = new int[]{R.mipmap.l,
R.mipmap.m, R.mipmap.n,R.mipmap.p,};
/**
* 功能引导页
*/
private ViewPager mVpGuide;
/**
* 功能引导页展现的 ImageView 集合
*/
private List<ImageView> mImageList;
private Button mBtnStart;
/**
* 小灰点的父控件
*/
private LinearLayout mDotGroup;
/**
* 小红点
*/
private View mRedDot;
/**
* 相邻小灰点之间的距离
*/
private int mDotDistance;
——————————————————————————————————————————————————————————————————————————————————————————————————————————————
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
initView();
}
private void initView() {
mVpGuide = (ViewPager) findViewById(R.id.vp_guide);
mBtnStart = (Button) findViewById(R.id.btn_start);
mDotGroup = (LinearLayout) findViewById(R.id.ll_dot_group);
mRedDot = findViewById(R.id.view_red_dot);
mImageList = new ArrayList<>();
// 将要展现的 3 张图片存入 ImageView 集合中
for (int i = 0; i < mImageIds.length; i++) {
ImageView image = new ImageView(this);
// 将图片设置给对应的 ImageView
image.setBackgroundResource(mImageIds[i]);
mImageList.add(image);
}
mDotGroup.getViewTreeObserver().addOnGlobalLayoutListener(
new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
// OnGlobalLayoutListener可能会被屡次触发，
// 所以在获得了高度以后，要将 OnGlobalLayoutListener 注销掉
mDotGroup.getViewTreeObserver()
.removeGlobalOnLayoutListener(this);
// 计算小灰点之间的距离
mDotDistance = mDotGroup.getChildAt(1).getLeft()
- mDotGroup.getChildAt(0).getLeft();
Log.d(TAG, "小红距离：" + mDotDistance);
}
});
mVpGuide.setAdapter(new GuideAdapter());
mVpGuide.setOnPageChangeListener(new GuidePageChangeListener());
mBtnStart.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 按钮一旦被点击，更新 SharedPreferences
// PrefUtils.setBoolean(MainActivity.this, PrefUtils.GUIDE_SHOWED, true);
// 跳转到主页面
startActivity(new Intent(MainActivity.this, Main2Activity.class));
finish();
}
});
}
/**
* 适配器
*/
class GuideAdapter extends PagerAdapter {
@Override
public int getCount() {
return mImageList.size();
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(mImageList.get(position));
return mImageList.get(position);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(mImageList.get(position));
}
}
/**
* 滑动监听
*/
class GuidePageChangeListener implements ViewPager.OnPageChangeListener {
@Override
public void onPageScrollStateChanged(int arg0) {
}
// 页面滑动时回调此方法
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
// 页面滑动过程当中，小红点移动的距离
int distance = (int) (mDotDistance * (positionOffset + position));
Log.d(TAG, "小红点移动的距离：" + distance);
// 获取小红点的布局参数
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) mRedDot
.getLayoutParams();
// 修改小红点的左边缘和父控件(RelativeLayout)左边缘的距离
params.leftMargin = distance;
// 修改小红点的布局参数
mRedDot.setLayoutParams(params);
}
// 某个页面被选中时回调此方法
@Override
public void onPageSelected(int position) {
// 若是是最后一个页面，按钮可见，不然不可见
if (position == mImageIds.length - 1) {
mBtnStart.setVisibility(View.VISIBLE);
} else {
mBtnStart.setVisibility(View.INVISIBLE);
}
}
}
}