Android 学习笔记 App引导页(fragment+Viewpager+RadioButton(小圆点))的简单实现

实现目标：

简单实现App 常见的引导页,使用 fragment+viewpager 的方法.

实现内容：

1.Viewpager的使用
2.fragment结合Viewpager的使用

实现：

1.创建新项目:

2.创建GuideActivity引导页:

3.因为GuideActivity是App进入首个打开的页面 所以要在 清单中设置.

       <activity android:name=".GuideActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".MainActivity">
        </activity>

4.对GuideActivity页面进行编辑.在xml文件中添加Viewpager用于存放fragment也就是每一张引导页:

设置id并且是铺满全屏幕的就好了,因为是引导页中的图片也是一整张屏幕.

5.接着创建三个fragment :

并且在每一个fragment中添加一个imageView作此引导页的图片.

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/one"
        android:scaleType="fitXY"/>

另外两个同上.
6.接着要对此VIewpager的使用创建一个适配器(ViewpagerAdapter):

public class ViewpagerAdapter extends FragmentPagerAdapter {
    private List<Fragment> list; //接受Fragment

    public ViewpagerAdapter(FragmentManager fm,List<Fragment> list) {
        super(fm);
        this.list = list;
    }
    
    @Override
    public Fragment getItem(int position) {
        return list.get(position);
    }

    @Override
    public int getCount() {
        return list.size();   //显示多少页面 "接受的list中Fragment的多少" 
    }
}

7.在GuideActivity.java中进行编辑:

public class GuideActivity extends AppCompatActivity {
    private ViewPager mview;
    private List<Fragment> fragmentList = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_guide);
         mview = findViewById(R.id.gui_view);
         initfragment();
    }

    private void initfragment() {
         fragmentList.add(new oneFragment());
         fragmentList.add(new twoFragment());
         fragmentList.add(new threeFragment());
         ViewpagerAdapter viewpagerAdapter = new ViewpagerAdapter(getSupportFragmentManager(),fragmentList);
         mview.setAdapter(viewpagerAdapter);
    }
}

8.完成以上操作效果:

左右可以滑动.但是作为引导页是美观的 所在java代码中添加全屏代码

   getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);

加完全屏代码后效果为;

PS:(可以发现 上方还有个标题栏 还是没有我们要的效果.所以我们要把标题栏去掉.
一般我们去除标题栏的方法是,把Activity继承的AppCompatActivity,直接改为Activity就可以去除标题栏.
但是当该Activity中存在Fragment时,如此种情况时,直接改为Activity, getSupportFragmentManager()会失去焦点.所以我们把Activity直接继承于FragmentActivity.)

效果:

此方法也可结合RadioButton 在下方添加用于提示的小圆点:
在GuideActivity.xml中

    <RadioGroup
        android:id="@+id/guide_btn_group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true">
        <RadioButton
            android:id="@+id/radiobuttonone"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/guide_btn"
            android:button="@null"
            android:checked="true"
            />
        <RadioButton
            android:id="@+id/radiobuttontwo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/guide_btn"
            android:button="@null"
            />
        <RadioButton
            android:id="@+id/radiobuttonthree"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/guide_btn"
            android:button="@null"
            />
    </RadioGroup>

GuideActivity.java:

public class GuideActivity extends FragmentActivity {
    private ViewPager mview;
    private RadioGroup mrg;
    private List<Fragment> fragmentList = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_guide);
         mview = findViewById(R.id.gui_view);
         mrg = findViewById(R.id.guide_btn_group);
         getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
         initfragment();
         intRadio();
    }

    private void intRadio() {
        mview.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }
            @Override
            public void onPageSelected(int position) {
                ((RadioButton)mrg.getChildAt(position)).setChecked(true);
            }
            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });
    }

    private void initfragment() {
         fragmentList.add(new oneFragment());
         fragmentList.add(new twoFragment());
         fragmentList.add(new threeFragment());
         ViewpagerAdapter viewpagerAdapter = new ViewpagerAdapter(getSupportFragmentManager(),fragmentList);
         mview.setAdapter(viewpagerAdapter);
    }
}

效果:

简单的引导页制作完成.

学习产出：

1.学习了简单的Viewpager的使用.
2.学习了简单的Viewpager+Fragment的使用
3.学习了简单的Viewpager的适配器的使用