zoukankan      html  css  js  c++  java
  • Android欢迎页面以及引导页面

    开发环境:Windows 10 x64,Android Studio 3.0

    很多APP都会在启动主界面(MainActivity)之前显示一个短暂的欢迎页面,设置微博,知乎,百度之类APP还是在欢迎页面上显示广告。

    尝试着做一个欢迎页面,会短暂停留三秒后转到主界面。

    创建了WelcomeActivity,然后在自动生成的activity_welcome.xml布局上随便写一个布局。

    回到WelcomeActivity.java,将OnCreate修改如下:

    @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_welcome);
    
            Handler handler = new Handler();
            //当计时结束,跳转至主界面
            handler.postDelayed(new Runnable() {
                @Override
                public void run() {
                    Intent intent = new Intent(WelcomeActivity.this, MainActivity.class);
                    startActivity(intent);
                    WelcomeActivity.this.finish();
                }
            }, 3000);
        }

    MainActivity是app的主界面。

    为了让app启动的时候显示现实Welcome页面,我们还需要修改一下AndroidManifest.xml文件:

    <activity
                android:name=".WelcomeActivity"
                android:theme="@style/Theme.AppCompat.Light.NoActionBar">
                <intent-filter>
                    <action android:name="android.intent.action.MAIN" />
    
                    <category android:name="android.intent.category.LAUNCHER" />
                </intent-filter>
            </activity>

    ---------------------------------------------------------------------------------------------------------------------------------------------------------

    至于引导页面,一般出现在app安装后首次使用的时候。

    我们先创建一个item_guide.xml文件,作为引导页面的布局文件。

    <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">
    
        <ImageView
            android:id="@+id/item_guide_iv_lunch"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="fitXY"/>                    全屏的图片
    
        <RadioGroup
            android:id="@+id/item_guide_rg_indicate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:orientation="horizontal"
            android:layout_margin="20dp">                   引导页面下端的一组RadioButton,会显示当前是第几页的引导页
    
        </RadioGroup>
    
        <Button
            android:id="@+id/item_guide_btn_start"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:visibility="gone"
            android:text="立即开始!"></Button>                 按钮,出现在最后一个页面
    </RelativeLayout>

    为了不同引导页让RadioButton显示不同的状态,我们需要顶一个selector

    在drawable文件夹添加三个文件:launch_guide_radio_btn.xml, icon_point_c.png, icon_point_n.png 文件内容分别如下:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_checked="true" android:drawable="@drawable/icon_point_c" />
        <item android:drawable="@drawable/icon_point_n" />
    </selector>

      

    然后,我们需要定义一个Adapter

    public class LaunchSimpleAdapter extends PagerAdapter {
    
        private LayoutInflater mInflater;
        private Context mContext;
        private ArrayList<View> mViewList = new ArrayList<View>();
    
        public LaunchSimpleAdapter(Context context, int[] imageArray) {
            mInflater = LayoutInflater.from(context);
            mContext = context;
            for (int i=0; i<imageArray.length; i++) {
                View view = mInflater.inflate(R.layout.item_guide, null);
                ImageView iv_launch = (ImageView) view.findViewById(R.id.item_guide_iv_lunch);
                RadioGroup rg_indicate = (RadioGroup) view.findViewById(R.id.item_guide_rg_indicate);
                Button btn_start = (Button) view.findViewById(R.id.item_guide_btn_start);
                iv_launch.setImageResource(imageArray[i]);
                for (int j=0; j<imageArray.length; j++) {
                    RadioButton radio = new RadioButton(mContext);
                    radio.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));   //android.view.ViewGroup.LayoutParams
                    radio.setButtonDrawable(R.drawable.launch_guide_radio_btn);
                    radio.setPadding(10, 10, 10, 10);
                    rg_indicate.addView(radio);
                }
                ((RadioButton)rg_indicate.getChildAt(i)).setChecked(true);
                if (i == imageArray.length-1) {
                    btn_start.setVisibility(View.VISIBLE);
                    btn_start.setOnClickListener(new OnClickListener() {
                        @Override
                        public void onClick(View v) {
                            Toast.makeText(mContext, "Welcome to XXX App", Toast.LENGTH_SHORT).show();
                        }
                    });
                }
                mViewList.add(view);
            }
        }
    
        @Override
        public int getCount() {
            return mViewList.size();
        }
    
        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {
            return arg0 == arg1;
        }
    
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(mViewList.get(position));
        }
    
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            container.addView(mViewList.get(position));
            return mViewList.get(position);
        }
    
    }

    最后,我们需要创建GuideActivity

    <?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"
        >
    
        <android.support.v4.view.ViewPager
            android:id="@+id/vp_launch"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    
    </RelativeLayout>
    public class GuideActivity extends AppCompatActivity {
    
        private int[] lanuchImageArray = {
                R.drawable.guide_1, R.drawable.guide_2, R.drawable.guide_3, R.drawable.guide_4};
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_guide);
    
            ViewPager vp_launch = (ViewPager) findViewById(R.id.vp_launch);
            LaunchSimpleAdapter adapter = new LaunchSimpleAdapter(this, lanuchImageArray);
            vp_launch.setAdapter(adapter);
            vp_launch.setCurrentItem(0);
        }
    }

    这样,一个最建议的引导页面就完成了。当然,现在的引导页面不是全屏的。如果希望全屏,我们可以做如下修改:

    在values/styles.xml页面添加一个样式:

    <!-- 引导页-->
        <style name="FullScreen" parent="Theme.AppCompat.Light.NoActionBar">
            <item name="android:windowFullscreen">true</item>  //设置全屏
            <item name="android:windowNoTitle">true</item> //设置没有状态栏
            <item name="android:textSize">20sp</item>
            <item name="android:textStyle">bold|italic</item>
        </style>

    然后在AndroidManifest.xml修改一下:

    <activity
                android:name=".GuideActivity"
                android:theme="@style/FullScreen">
            </activity>

    参考文章:

    【Android】如何实现启动APP时引导页、欢迎页功能之(一)引导页功能的实现

    Android 欢迎界面停留3秒的实现

    你所不知道的Android启动页(欢迎界面)

     Android:Welcome,一个容易使用和扩展的引导页控件

  • 相关阅读:
    office 2007 验证失败的解决方法
    google开不了(解决办法)
    Mobilenet V1
    Windows10系统下IDECLion的安装与配置
    单目相机成像过程
    C++中如何在函数中返回局部变量的指针/引用/地址?
    ResNeXt论文阅读笔记.md
    Mobilenet V2
    Xception
    InceptionV4
  • 原文地址:https://www.cnblogs.com/AlvinLiang/p/8695246.html
Copyright © 2011-2022 走看看