安卓用ViewPager实现APP的引导页和小圆点

移动开发 2018-08-05 05:16:12 阅读次数: 0

在模拟器上显示效果大概如下：

大概思路和代码如下：

1、首先创建一个layout布局文件，

<?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=".ViewPagerFragmentActivity">

    <!--实现滑动布局的控件-->
    <android.support.v4.view.ViewPager
        android:id="@+id/myViewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!--根据显示页面显示不同小圆点的控件-->
    <LinearLayout
        android:id="@+id/dot_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="40dip"
        android:gravity="center"
        android:orientation="horizontal"></LinearLayout>

</RelativeLayout>

2、创建四个布局文件，一个布局文件一张图片

我这里四个布局文件名称，以便下面好理解：fmain.xml、fphone.xml、ffriend.xml、fme.xml。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--第一张图片-->
    <ImageView
        android:id="@+id/bookapp1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@drawable/bookapp1" />

</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!--第二张图片-->
    <ImageView
        android:id="@+id/bookapp2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@drawable/bookapp2" />

</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!--第三张图片-->
    <ImageView
        android:id="@+id/bookapp3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@drawable/bookapp3" />

</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!--第四张图片-->
    <ImageView
        android:id="@+id/bookapp4"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@drawable/bookapp4" />

    <Button
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="107dp"
        android:background="#80ecebeb"
        android:text="立即体验"
        android:textSize="20dp"/>

</RelativeLayout>

3、然后创建四个相对应的JAVA类，继承Fragment，

四个JAVA类名跟布局文件名一致，fmain.java、fphone.java、ffriend.java、fme.java。

package main;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import zking.com.android7.R;

/**
 * 第一个页面的Fragment的JAVA类
 */
public class Fmain extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
        View v = inflater.inflate(R.layout.fmain, null);
        //得到第一张图片的控件对象
        ImageView bookapp1 = v.findViewById(R.id.bookapp1);
        return v;
    }
}


package main;

import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import zking.com.android7.R;

/**
 * 第二个页面的Fragment的JAVA类
 */
public class Fphone extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
        View v = inflater.inflate(R.layout.fphone, null);
        //得到第二张图片的控件对象
        ImageView bookapp2 = v.findViewById(R.id.bookapp2);
        return v;
    }
}

package main;

import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import zking.com.android7.R;

/**
 * 第三个页面的Fragment的JAVA类
 */
public class Ffriend extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
        View v = inflater.inflate(R.layout.ffriend, null);
        //得到第三张图片的控件对象
        ImageView bookapp3 = v.findViewById(R.id.bookapp3);
        return v;
    }
}

package main;

import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import zking.com.android7.R;

/**
 * 第四个页面的Fragment的JAVA类
 */
public class Fme extends Fragment {
    
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
        View v = inflater.inflate(R.layout.fme, null);
        //得到第四张图片的控件对象
        ImageView bookapp4 = v.findViewById(R.id.bookapp4);
        return v;
    }
}

4、创建外部资源的布局文件，文件名为：myselect.xml

怎样创建？

 切换到Project模式-->选中当前项目 new Android Rescourse File-->type为Drawable，root为select(必须小写)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--未选中的图片-->
    <item android:drawable="@drawable/smile" android:state_selected="false" />
    <!--已选中的图片-->
    <item android:drawable="@drawable/happy" android:state_selected="true" />
</selector>

5、创建一个Activity，文件名为：ViewPagerFragmentActivity

package zking.com.android7;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.LinearLayout;

import java.util.ArrayList;
import java.util.List;

import main.Ffriend;
import main.Fmain;
import main.Fme;
import main.Fphone;

public class ViewPagerFragmentActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {

    private List<Fragment> fragmentList;
    private ViewPager myViewPager;
    private ViewPagerFragmentActivity.myFragmentPagerAdapter myFragmentPagerAdapter;
    private ImageView[] dotViews;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_viewpagerfragment);

        //把Fragment添加到List集合里面
        fragmentList = new ArrayList<>();
        fragmentList.add(new Fmain());
        fragmentList.add(new Fphone());
        fragmentList.add(new Ffriend());
        fragmentList.add(new Fme());


        //实例化适配器
        myFragmentPagerAdapter = new myFragmentPagerAdapter(getSupportFragmentManager(), fragmentList);
        //得到ViewPager对象
        myViewPager = findViewById(R.id.myViewPager);
        //为ViewPager设置适配器
        myViewPager.setAdapter(myFragmentPagerAdapter);
        myViewPager.setOnPageChangeListener(this);

        //初始化显示第一个页面
        myViewPager.setCurrentItem(0);


        //生成相应数量的导航小圆点
        LinearLayout layout = findViewById(R.id.dot_layout);
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
        //设置小圆点左右之间的间隔
        params.setMargins(10, 0, 10, 0);


        //得到页面个数
        dotViews = new ImageView[fragmentList.size()];
        for (int i = 0; i < fragmentList.size(); i++) {
            ImageView imageView = new ImageView(this);
            imageView.setLayoutParams(params);
            imageView.setImageResource(R.drawable.myselector);
            if (i == 0) {
                //默认启动时，选中第一个小圆点
                imageView.setSelected(true);
            } else {
                imageView.setSelected(false);
            }
            //得到每个小圆点的引用，用于滑动页面时，（onPageSelected方法中）更改它们的状态。
            dotViews[i] = imageView;
            //添加到布局里面显示
            layout.addView(imageView);
        }

    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    /**
     * 当前滑动显示页面的索引值，可以根据这个值，来设置相应小圆点的状态。
     * @param position
     */
    @Override
    public void onPageSelected(int position) {
        for (int i = 0; i < dotViews.length; i++) {
            if (position == i) {
                dotViews[i].setSelected(true);
            } else {
                dotViews[i].setSelected(false);
            }
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }


    /**
     * 创建Fragment的适配器
     */
    class myFragmentPagerAdapter extends FragmentPagerAdapter {
        List<Fragment> fragmentList;

        public myFragmentPagerAdapter(FragmentManager fm, List<Fragment> fragmentList) {
            super(fm);
            this.fragmentList = fragmentList;
        }

        /**
         * 显示第几个页面
         * @param position
         * @return
         */
        @Override
        public Fragment getItem(int position) {
            return fragmentList.get(position);
        }

        /**
         * 有几个页面
         * @return
         */
        @Override
        public int getCount() {
            return fragmentList.size();
        }
    }


}

 

猜你喜欢

转载自blog.csdn.net/qq_42246139/article/details/81394702
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022