Android -- 启动引导页

发布于：2023-01-18 ⋅ 阅读:(183) ⋅ 点赞:(0)

 简介

        一般来说，引导页由两部分组成，一部分是背景图；另一部分是页面下 方的一排圆点，其中高亮的圆点表示当前位于第几页，除了背景图与一排圆点之外，最后一页往往有个按钮，它便是进入应用主页的入口。

运行效果

 

使用到的图片可以换自己喜欢的图片，但是程序里面的图片名称记得修改

以下是我使用的图片

布局文件

        引导页的背景图（采用ImageView）、底部的一排圆点（采用RadioGroup）、 最后一页的入口按钮（采用Button）

引导页适配器

  1. 根据页面项的XML文件构造每页的视图。

  2. 让当前页码的圆点高亮显示。

  3. 如果翻到了最后一页，就显示中间的入口按钮

使用碎片Fragment

  1. 加快启动速度。因为动态注册的碎片，一开始只会加载前两个启动页，对比原来加载所有启动页 无疑大幅减少了加载页的数量，从而提升了启动速度。
  2. 降低代码耦合。把视图操作剥离到单独的碎片代码，不与适配器代码混合在一起，方便后继的代码 维护工作。

程序代码

布局文件

activity_launch_improve.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"
    android:orientation="vertical">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/vp_launch"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />


</LinearLayout>

fragment_launch.xml

<?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">

    <!-- 这是引导图片的图像视图 -->
    <ImageView
        android:id="@+id/iv_launch"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY" />

    <!-- 这里容纳引导页底部的一排圆点 -->
    <RadioGroup
        android:id="@+id/rg_indicate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:orientation="horizontal"
        android:paddingBottom="20dp" />

    <!-- 这是最后一页的入口按钮 -->
    <Button
        android:id="@+id/btn_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="立即开始美好生活"
        android:textColor="#ff3300"
        android:textSize="22sp"
        android:visibility="gone" />
</RelativeLayout>

工具类


import android.content.Context;
import android.widget.Toast;

public class ToastUtil {

    public static void show(Context ctx, String desc) {
        Toast.makeText(ctx, desc, Toast.LENGTH_SHORT).show();
    }

}

Fragment碎片程序

LaunchFragment.java

import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.RadioButton;
import android.widget.RadioGroup;

import androidx.fragment.app.Fragment;

import com.kcs.highcontrol.R;
import com.kcs.highcontrol.utils.ToastUtil;


public class LaunchFragment extends Fragment {

    public static LaunchFragment newInstance(int count, int position, int image_id) {
        LaunchFragment fragment = new LaunchFragment();
        Bundle args = new Bundle();
        args.putInt("count", count);
        args.putInt("position", position);
        args.putInt("image_id", image_id);
        fragment.setArguments(args);
        return fragment;
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        Context context = getContext();
        Bundle arguments = getArguments();
        int count = arguments.getInt("count", 0);
        int position = arguments.getInt("position", 0);
        int imageId = arguments.getInt("image_id", 0);

        View view = LayoutInflater.from(context).inflate(R.layout.item_launch, container, false);
        ImageView iv_launch = view.findViewById(R.id.iv_launch);
        RadioGroup rg_indicate = view.findViewById(R.id.rg_indicate);
        Button btn_start = view.findViewById(R.id.btn_start);
        iv_launch.setImageResource(imageId);

        // 每个页面都分配一组对应的单选按钮
        for (int j = 0; j < count; j++) {
            RadioButton radio = new RadioButton(context);
            radio.setLayoutParams(new ViewGroup.LayoutParams(
                    ViewGroup.LayoutParams.WRAP_CONTENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT
            ));
            radio.setPadding(10,10,10,10);
            rg_indicate.addView(radio);
        }

        // 当前位置的单选按钮要高亮显示，比如第二个引导页就高亮第二个单选按钮
        ((RadioButton)rg_indicate.getChildAt(position)).setChecked(true);

        // 如果是最后一个引导页，则显示入口按钮，以便用户点击按钮进入主页
        if (position == count - 1){
            btn_start.setVisibility(View.VISIBLE);
            btn_start.setOnClickListener(v -> {
                ToastUtil.show(context, "欢迎您开启美好生活");
            });
        }

        return view;
    }
}

启动程序

LaunchImproveActivity.java
import android.os.Bundle;

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;

import com.kcs.highcontrol.adapter.LaunchImproveAdapter;

public class LaunchImproveActivity extends AppCompatActivity {

    /**
     * 声明引导页面的图片数组
     */
    private int[] lanuchImageArray = {R.drawable.guide_bg1,
            R.drawable.guide_bg2, R.drawable.guide_bg3, R.drawable.guide_bg4};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_launch_improve);
        ViewPager vp_launch = findViewById(R.id.vp_launch);
        LaunchImproveAdapter adapter = new LaunchImproveAdapter(getSupportFragmentManager(), lanuchImageArray);
        vp_launch.setAdapter(adapter);
    }
}

适配器

LaunchImproveAdapter.java

import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;

import com.kcs.highcontrol.fragment.LaunchFragment;


public class LaunchImproveAdapter extends FragmentPagerAdapter {


    private final int[] mImageArray;

    public LaunchImproveAdapter(@NonNull FragmentManager fm, int[] imageArray) {
        super(fm, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT);
        this.mImageArray = imageArray;
    }

    @NonNull
    @Override
    public Fragment getItem(int position) {
        return LaunchFragment.newInstance(mImageArray.length, position, mImageArray[position]);
    }

    @Override
    public int getCount() {
        return mImageArray.length;
    }
}

修改主题

在 themes.xml 中添加

<!--Material Design -->
    <style name="AppCompatTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

colors.xml

 <color name="colorPrimary">#008577</color>
 <color name="colorPrimaryDark">#00574B</color>
 <color name="colorAccent">#D81B60</color>

启动配置

        <activity
            android:name=".LaunchImproveActivity"
            android:theme="@style/AppCompatTheme"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布