Android stdio制作轮播图式带背景音乐的引导页

转载请注明原作者和原文链接

一款app如果要想吸引别人眼球，那么在第一次启动时展示出精美的引导页就是必不可少的，本次将会介绍如何制作滑动轮播图式带背景音乐的引导页。

先来看看引导页成果展示↓

移动开发项目之引导页演示

一、AndroidManifest注册事件

养成一个良好习惯，在创建完Activity事件后，先在app下的AndroidManifest.xml中注册我们界面以免运行不了。

        <!--引导页-->
        <activity
            android:name="com.example.ui.IndexActivity"
            android:theme="@style/AppThemeFull">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <!--引导-->
        <activity
            android:name="com.example.ui.GuideActivity"
            android:launchMode="singleTask"
            android:theme="@style/AppThemeFull" />

intent-filter中设置IndexActivity为启动Application时先启动的Activity

二、启动页

由于UI线程不允许阻塞，也因此不允许子线程直接操作UI线程的View控件，所以对于已经由子线程运行得出的结果如果要呈现给用户，就需要使用到线程间的数据传递，通过handleMessage方法达到此目的。在Oncreate方法中设置进入引导页的延迟时间为2s。

IndexActivity代码如下

public class IndexActivity extends AppCompatActivity {
     

    private static final int SKIP_MAIN = 1000;

    private Handler mHandler = new Handler(new Handler.Callback() {
     
        @Override
        public boolean handleMessage(Message message) {
     
            switch (message.what) {
     
                case SKIP_MAIN:
                    startMain();
                    break;
            }
            return false;
        }
    });

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

        mHandler.sendEmptyMessageDelayed(SKIP_MAIN, 2 * 1000);
    }

    //跳转
    private void startMain() {
     

        Intent intent = new Intent();

        //跳转到引导页
        intent.setClass(this, GuideActivity.class);

        startActivity(intent);
        finish();
    }
}

三、引导页

GuideActivity代码如下

  public class GuideActivity extends BaseUIActivity implements View.OnClickListener {
     

    private ImageView iv_music_switch;
    private TextView tv_guide_skip;
    private ImageView iv_guide_point_1;
    private ImageView iv_guide_point_2;
    private ImageView iv_guide_point_3;
    private ViewPager mViewPager;

    private View view1;
    private View view2;
    private View view3;

    private List<View> mPageList = new ArrayList<>();
    private BasePageAdapter mPageAdapter;

    private ImageView iv_guide_star;
    private ImageView iv_guide_night;
    private ImageView iv_guide_smile;

    private MediaPlayerManager mGuideMusic;

    private ObjectAnimator mAnim;

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

        initView();
    }

    private void initView() {
     
        iv_music_switch = (ImageView) findViewById(R.id.iv_music_switch);
        tv_guide_skip = (TextView) findViewById(R.id.tv_guide_skip);
        iv_guide_point_1 = (ImageView) findViewById(R.id.iv_guide_point_1);
        iv_guide_point_2 = (ImageView) findViewById(R.id.iv_guide_point_2);
        iv_guide_point_3 = (ImageView) findViewById(R.id.iv_guide_point_3);
        mViewPager = (ViewPager) findViewById(R.id.mViewPager);

        iv_music_switch.setOnClickListener(this);
        tv_guide_skip.setOnClickListener(this);

        view1 = View.inflate(this, R.layout.layout_pager_guide_1, null);
        view2 = View.inflate(this, R.layout.layout_pager_guide_2, null);
        view3 = View.inflate(this, R.layout.layout_pager_guide_3, null);

        mPageList.add(view1);
        mPageList.add(view2);
        mPageList.add(view3);

        //预加载
        mViewPager.setOffscreenPageLimit(mPageList.size());

        mPageAdapter = new BasePageAdapter(mPageList);
        mViewPager.setAdapter(mPageAdapter);

        //帧动画
        iv_guide_star = view1.findViewById(R.id.iv_guide_star);
        iv_guide_night = view2.findViewById(R.id.iv_guide_night);
        iv_guide_smile = view3.findViewById(R.id.iv_guide_smile);

        //播放帧动画
        AnimationDrawable animStar = (AnimationDrawable) iv_guide_star.getBackground();
        animStar.start();

        AnimationDrawable animNight = (AnimationDrawable) iv_guide_night.getBackground();
        animNight.start();

        AnimationDrawable animSmile= (AnimationDrawable) iv_guide_smile.getBackground();
        animSmile.start();

        //小圆点逻辑
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
     
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
     
            }

            @Override
            public void onPageSelected(int position) {
     
                seletePoint(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {
     

            }
        });

        //歌曲的逻辑
        startMusic();
    }

    /**
     * 播放音乐
     */
    private void startMusic() {
     

        mGuideMusic = new MediaPlayerManager();
        mGuideMusic.setLooping(true);
        AssetFileDescriptor file = getResources().openRawResourceFd(R.raw.guide);
        mGuideMusic.startPlay(file);

        mGuideMusic.setOnComplteionListener(new MediaPlayer.OnCompletionListener() {
     
            @Override
            public void onCompletion(MediaPlayer mp) {
     
                mGuideMusic.startPlay(file);
            }
        });

        //旋转动画
        mAnim = AnimUtils.rotation(iv_music_switch);
        mAnim.start();
    }

    /**
     * 动态选择小圆点
     * @param position
     */
    private void seletePoint(int position) {
     
        switch (position){
     
            case 0:
                iv_guide_point_1.setImageResource(R.drawable.img_guide_point_p);
                iv_guide_point_2.setImageResource(R.drawable.img_guide_point);
                iv_guide_point_3.setImageResource(R.drawable.img_guide_point);
                break;
            case 1:
                iv_guide_point_1.setImageResource(R.drawable.img_guide_point);
                iv_guide_point_2.setImageResource(R.drawable.img_guide_point_p);
                iv_guide_point_3.setImageResource(R.drawable.img_guide_point);
                break;
            case 2:
                iv_guide_point_1.setImageResource(R.drawable.img_guide_point);
                iv_guide_point_2.setImageResource(R.drawable.img_guide_point);
                iv_guide_point_3.setImageResource(R.drawable.img_guide_point_p);
                break;
        }
    }

    @Override
    public void onClick(View view) {
     
        switch (view.getId()){
     
            case R.id.iv_music_switch:
                if(mGuideMusic.MEDIA_STATUS == MediaPlayerManager.MEDIA_STATUS_PAUSE){
     
                    mAnim.start();
                    mGuideMusic.continuePlay();
                    iv_music_switch.setImageResource(R.drawable.img_guide_music);
                }else if(mGuideMusic.MEDIA_STATUS == MediaPlayerManager.MEDIA_STATUS_PLAY){
     
                    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
     
                        mAnim.pause();
                    }
                    mGuideMusic.pausePlay();
                    iv_music_switch.setImageResource(R.drawable.img_guide_music_off);
                }
                break;
        }
    }

    @Override
    protected void onDestroy() {
     
        super.onDestroy();
        mGuideMusic.stopPlay();
    }
}

四、右上角BGM图标旋转工具类

public class AnimUtils {
     
    /**
     * 旋转动画
     */
    public static ObjectAnimator rotation(View view) {
     
        ObjectAnimator mAnim = ObjectAnimator.ofFloat(view, "rotation", 0f, 360f);
        mAnim.setDuration(2 * 1000);
        mAnim.setRepeatMode(ValueAnimator.RESTART);
        mAnim.setRepeatCount(ValueAnimator.INFINITE);
        mAnim.setInterpolator(new LinearInterpolator());
        return mAnim;
    }

本次分享到此为止，有问题的可以留言，看到后会马上回复的！
谢谢大家阅读

完整代码下载：https://download.csdn.net/download/huisoul/20065677