目錄
引言
最近項目中需要引入滑動引導頁，於是，在網上查了一下資料，然後進行了具體的實現。
效果圖
首先寫一個layout佈局來展示引導頁內容，在佈局中放入一個viewpager控件。
具體實現代碼如下
一、Activity頁
/**
* Created by wsl
* on 2019/6/18 12:52
*/
public class EZActivity extends BaseActivity {
private ViewPager viewpager;
private Button btnSubmit;
private ImageView ivPoint1, ivPoint2, ivPoint3, ivPoint4;
private List<ImageView> guidePointList;
private Animation animation01 = null;
/**
* 啓動activity
*
* @param context 上下文
*/
public static void startActivity(Context context) {
Intent intent = new Intent();
intent.setClass(context, EZActivity.class);
context.startActivity(intent);
}
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
//設置是否顯示標題欄
setShowTitle(true);
//設置是否顯示狀態欄
setShowStatusBar(true);
//是否允許屏幕旋轉
setAllowScreenRoate(true);
//以上設置一定要在 super.onCreate(savedInstanceState) 方法之前設置
super.onCreate(savedInstanceState);
}
@Override
protected int initLayout() {
//初始化佈局
return R.layout.activity_ez_layout;
}
@Override
protected void initView() {
guidePointList = new ArrayList<>();
viewpager = findViewById(R.id.viewpager);
btnSubmit = findViewById(R.id.btnSubmit);
ivPoint1 = findViewById(R.id.ivPoint1);
ivPoint2 = findViewById(R.id.ivPoint2);
ivPoint3 = findViewById(R.id.ivPoint3);
ivPoint4 = findViewById(R.id.ivPoint4);
addGuidePointToList();
animation01 = AnimationUtils.loadAnimation(context, R.anim.animation_guide_alpha_0_1);
}
/**
* 添加引導點 到 list
*/
private void addGuidePointToList() {
guidePointList.add(ivPoint1);
guidePointList.add(ivPoint2);
guidePointList.add(ivPoint3);
guidePointList.add(ivPoint4);
}
@Override
protected void initData() {
final List<Integer> list = new ArrayList<>();
list.add(R.drawable.book_1);
list.add(R.drawable.book_2);
list.add(R.drawable.book_3);
list.add(R.drawable.book_4);
final GuideAdapter guideAdapter = new GuideAdapter(context, list);
viewpager.setAdapter(guideAdapter);
viewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
if (position == list.size() - 1) {
btnSubmit.setVisibility(View.VISIBLE);
if (animation01 != null) {
btnSubmit.setAnimation(animation01);
animation01.start();
}
} else {
btnSubmit.setVisibility(View.GONE);
}
setGuidePoint(position);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
// viewpager.setPageTransformer(false, new DepthPageTransformer());
}
/**
* 設置引導點 的狀態 （選中、未選中）
*
* @param position 當前滑動到的位置
*/
private void setGuidePoint(int position) {
for (int i = 0; i < guidePointList.size(); i++) {
if (position == i) {
guidePointList.get(i).setImageResource(R.drawable.shape_guide_point_big);
} else {
guidePointList.get(i).setImageResource(R.drawable.shape_guide_point_small);
}
}
}
/**
* 點擊事件
*/
public OnSingleClickListener onSingleClickListener = new OnSingleClickListener() {
@Override
public void onSingleClick(View view) {
switch (view.getId()) {
default:
break;
}
}
};
@Override
protected void onDestroy() {
super.onDestroy();
}
}
二、layout佈局頁
<?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:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:overScrollMode="never" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|bottom"
android:orientation="vertical">
<Button
android:id="@+id/btnSubmit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="進入主頁"
android:visibility="gone" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="8dp"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:id="@+id/ivPoint1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/margin_5"
android:src="@drawable/shape_guide_point_big" />
<ImageView
android:id="@+id/ivPoint2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/margin_5"
android:src="@drawable/shape_guide_point_small" />
<ImageView
android:id="@+id/ivPoint3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/margin_5"
android:src="@drawable/shape_guide_point_small" />
<ImageView
android:id="@+id/ivPoint4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/margin_5"
android:src="@drawable/shape_guide_point_small" />
</LinearLayout>
</LinearLayout>
</FrameLayout>
三、viewpager適配器代碼
/**
* Created by wsl
* on 2019/9/4 16:35
*/
public class GuideAdapter extends PagerAdapter {
private List<Integer> list;
private Context context;
public GuideAdapter(Context context, List<Integer> list) {
this.context = context;
this.list = list;
}
@Override
public int getCount() {
return list == null ? 0 : list.size();
}
@Override
public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
return view == object;
}
@NonNull
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
ImageView imageView = new ImageView(context);
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
imageView.setImageResource(list.get(position));
container.addView(imageView);
return imageView;
}
@Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
container.removeView((View) object);
}
}
四、資源文件
animation_guide_alpha_0_1.xml文件：
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:duration="1000"
android:fromAlpha="0"
android:toAlpha="1" />
</set>
shape_guide_point_big.xml文件：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FFFFFF" />
<size
android:width="8dp"
android:height="8dp" />
<corners android:radius="4dp" />
</shape>
shape_guide_point_small.xml文件：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FFFFFF" />
<size
android:width="5dp"
android:height="5dp" />
<corners android:radius="2.5dp" />
</shape>
結束語
BaseActivity在之前的文章中有詳細描述，如有需要，請查看之前的文章。
