第一步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);
}
}
}
}