解析AndroidProject 引導頁 GuideActivity

• 效果演示

　　

 

•  佈局文件

guide_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    tools:context=".ui.activity.GuideActivity">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/vp_guide_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="30dp" />

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_marginBottom="30dp">

        <me.relex.circleindicator.CircleIndicator3
            android:id="@+id/cv_guide_indicator"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            app:ci_drawable="@drawable/guide_indicator_selected"
            app:ci_drawable_unselected="@drawable/guide_indicator_unselected" />

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/btn_guide_complete"
            style="@style/ButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:minWidth="160dp"
            android:text="瞭解詳情"
            android:visibility="invisible" />

    </FrameLayout>

</FrameLayout>

GuideAcitvity.java

public final class GuideActivity extends AppActivity {

    private ViewPager2 mViewPager;
    private CircleIndicator3 mIndicatorView;
    private View mCompleteView;

    private GuideAdapter mAdapter;

    @Override
    protected int getLayoutId() {
        return R.layout.guide_activity;
    }

    @Override
    protected void initView() {
        mViewPager = findViewById(R.id.vp_guide_pager);
        mIndicatorView = findViewById(R.id.cv_guide_indicator);
        mCompleteView = findViewById(R.id.btn_guide_complete);
        setOnClickListener(mCompleteView);
    }

    @Override
    protected void initData() {
        mAdapter = new GuideAdapter(this);
        mAdapter.addItem(R.drawable.guide_1_bg);
        mAdapter.addItem(R.drawable.guide_2_bg);
        mAdapter.addItem(R.drawable.guide_3_bg);
        mViewPager.setAdapter(mAdapter);
        mViewPager.registerOnPageChangeCallback(mCallback);
        mIndicatorView.setViewPager(mViewPager);
    }

    @SingleClick
    @Override
    public void onClick(View view) {
        if (view == mCompleteView) {
            HomeActivity.start(getContext());
            finish();
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        mViewPager.unregisterOnPageChangeCallback(mCallback);
    }

    private final ViewPager2.OnPageChangeCallback mCallback = new ViewPager2.OnPageChangeCallback() {

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            if (mViewPager.getCurrentItem() == mAdapter.getItemCount() - 1 && positionOffsetPixels > 0) {
                mIndicatorView.setVisibility(View.VISIBLE);
                mCompleteView.setVisibility(View.INVISIBLE);
            }
        }

        @Override
        public void onPageScrollStateChanged(int state) {
            if (state == ViewPager2.SCROLL_STATE_IDLE) {
                boolean last = mViewPager.getCurrentItem() == mAdapter.getItemCount() - 1;
                mIndicatorView.setVisibility(last ? View.INVISIBLE : View.VISIBLE);
                mCompleteView.setVisibility(last ? View.VISIBLE : View.INVISIBLE);
            }
        }
    };
}

 

• ViewPager2

博文參考：

 官方viewPage2
 探索取代ViewPager的ViewPager2

⭐viewPage2基於RecycleView ，自然用法也相類似。引導頁實現方式，創建一個Adapter，itemview內放置ImageView，綁定每頁的引導頁圖片。

 

核心代碼

mAdapter = new GuideAdapter(this);
        mAdapter.addItem(R.drawable.guide_1_bg);
        mAdapter.addItem(R.drawable.guide_2_bg);
        mAdapter.addItem(R.drawable.guide_3_bg);
        mViewPager.setAdapter(mAdapter);

⭐有關AndroidProject GuideAdatper extends AppAdapter ,extends BaseAdatper 進行一些處理，主要功能是爲了實現圖片與item佈局的綁定，此處代碼省略。

 

• CircleIndicator3 指示器

　　引入依賴

// 指示器框架：https://github.com/ongakuer/CircleIndicator
    implementation 'me.relex:circleindicator:2.1.4'

　　核心代碼

	indicator.setViewPager(viewpager);

 

• 末頁隱藏指示器顯示按鈕

　　registerOnPageChangeCallback 頁面切換回調

private final ViewPager2.OnPageChangeCallback mCallback = new ViewPager2.OnPageChangeCallback() {

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            if (mViewPager.getCurrentItem() == mAdapter.getItemCount() - 1 && positionOffsetPixels > 0) {
                mIndicatorView.setVisibility(View.VISIBLE);
                mCompleteView.setVisibility(View.INVISIBLE);
            }
        }

        @Override
        public void onPageScrollStateChanged(int state) {
            if (state == ViewPager2.SCROLL_STATE_IDLE) {
                boolean last = mViewPager.getCurrentItem() == mAdapter.getItemCount() - 1;
                mIndicatorView.setVisibility(last ? View.INVISIBLE : View.VISIBLE); //指示器
                mCompleteView.setVisibility(last ? View.VISIBLE : View.INVISIBLE);//按鈕
            }
        }
    };

mViewPager.registerOnPageChangeCallback(mCallback);