如何在一个APP中加入欢迎页,以及引导页

我们知道,一般刚打开一个APP的时候,都会出现一个欢迎页,比如下面这个界面,但是这个界面一般是不需要显示太长时间的,而且这个界面之后一般还会有一个带有广告的界面,那个界面可以根据需要停留一段时间。同时,当第一次安装一个APP的时候,一般会出现一个可以滑动的引导界面,用于提示用户该版APP的主要功能。当然,做的好更能吸引用户的眼球,增加点击量。



















实现欢迎页和引导页需要三个Activity,一个是实现欢迎页的Activity,在这个类中我们除了加入欢迎页还会加入广告页,一般打开APP是最先进入的是这个Activity,命名为SplashActivity。第二个是实现引导页的Activity,如果第一次安装APP才会跳到这个Activity,第二次打开就不会跳到这了,所以在这里需要一个判断,判断是否是第一次进入该APP的,命名为GuideActivity。第三个是主界面的MainActivity,这就不多说了。下面是这几个Activity的代码,在Android Studio中实现的。

1.SplashActivity

注意,这里需要在Manifest.xml文件中进行设置,将SplashActivity设置为最先打开的activity.

<activity
    android:name=".SplashActivity">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

public class SplashActivity extends AppCompatActivity {
    private static final int TIME=5000;
    private static final int GO_MAIN=100;
    private static final int GO_GUIDE=101;

    Handler mhandler=new Handler() {
        @Override
        public void handleMessage(Message msg) {
            switch (msg.what){
                case GO_MAIN:
                    goMain();
                    break;
                case GO_GUIDE:
                    goGuide();
                    break;
            }
        }
    };



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

    }

    private void init() {
        SharedPreferences sf=getSharedPreferences("data", MODE_PRIVATE);//判断是否是第一次进入
        boolean isFirstIn=sf.getBoolean("isFirstIn", true);
        SharedPreferences.Editor editor=sf.edit();
        if(isFirstIn){     //若为true,则是第一次进入
            editor.putBoolean("isFirstIn", false);
            mhandler.sendEmptyMessageDelayed(GO_GUIDE,TIME);//将欢迎页停留5秒,并且将message设置为跳转到                                                             引导页SplashActivity,跳转在goGuide中实现
        else{
            mhandler.sendEmptyMessageDelayed(GO_MAIN,TIME);//将欢迎页停留5秒,并且将message设置文跳转到                                                                   MainActivity,跳转功能在goMain中实现
        }
        editor.commit();

    }

    private void goMain() {
        Intent intent=new Intent(SplashActivity.this,MainActivity.class);
        startActivity(intent);
        finish();

    }
    private void goGuide() {
        Intent intent=new Intent(SplashActivity.this,GuideActivity.class);
        startActivity(intent);
        finish();
    }


}
2.GuideActivity

public class GuideActivity extends AppCompatActivity {
    private ViewPager viewPager;//需要ViewPaeger
    private PagerAdapter mAdapter;//需要PagerAdapter适配器
    private List<View> mViews=new ArrayList<>();//准备数据源
    private Button bt_home;//在ViewPager的最后一个页面设置一个按钮,用于点击跳转到MainActivity
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_guide);
        initView();//初始化view
    }

    private void initView() {
        viewPager= (ViewPager) findViewById(R.id.view_pager);

        LayoutInflater inflater=LayoutInflater.from(this);//将每个xml文件转化为View
        View guideOne=inflater.inflate(R.layout.guidance01, null);//每个xml中就放置一个imageView
        View guideTwo=inflater.inflate(R.layout.guidance02,null);
        View guideThree=inflater.inflate(R.layout.guidance03,null);

        mViews.add(guideOne);//将view加入到list中
        mViews.add(guideTwo);
        mViews.add(guideThree);

        mAdapter=new PagerAdapter() {
            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                View view=mViews.get(position);//初始化适配器,将view加到container中
                container.addView(view);
                return view;
            }

            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                View view=mViews.get(position);
                container.removeView(view);//将view从container中移除
            }

            @Override
            public int getCount() {
                return mViews.size();
            }

            @Override
            public boolean isViewFromObject(View view, Object object) {
                return view==object;//判断当前的view是我们需要的对象
            }
        };

        viewPager.setAdapter(mAdapter);

        bt_home= (Button) guideThree.findViewById(R.id.to_Main);
        bt_home.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent=new Intent(GuideActivity.this,MainActivity.class);
               startActivity(intent);
                finish();
            }
        });
    }
}

使用ViewPager实现引导页图片的滑动效果,注意在滑动到最后一个界面时(即guideThree时),会在这个界面加入一个Button按钮,设置点击事件以便于点击该按钮能够进入MainActivity界面。guidance01.xml,guidance02.xml,guidance03.xml如下所示。

guidance01.xml:

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

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

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/splash_three"/>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="20dp">
    <Button
        android:id="@+id/to_Main"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0000"
        android:text="进入主页"/>
    </LinearLayout>
</RelativeLayout>
注意在guidance03.xml文件中,只能使用RelativeLayout,下面的布局才能显示出来。

activity_guide.xml 文件如下:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.example.cnlive.viewpager.MainActivity"
    tools:showIn="@layout/activity_main">

   <android.support.v4.view.ViewPager
       android:id="@+id/view_pager"
       android:layout_width="match_parent"
       android:layout_height="wrap_content">
   </android.support.v4.view.ViewPager>
    <Button
        android:id="@+id/to_Main"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="进入首页"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="70dp"
        android:layout_centerHorizontal="true"/>
</RelativeLayout>

加入了一个Viewpager和一个Button按钮,Button按钮是为了点击后直接能够跳转到MainActivity。

3. MainActivity

加入APP主要布局和逻辑即可。

  • 5
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值