简介
一般来说，引导页由两部分组成，一部分是背景图；另一部分是页面下 方的一排圆点，其中高亮的圆点表示当前位于第几页，除了背景图与一排圆点之外，最后一页往往有个按钮，它便是进入应用主页的入口。
运行效果
使用到的图片可以换自己喜欢的图片，但是程序里面的图片名称记得修改
以下是我使用的图片
布局文件
引导页的背景图（采用ImageView）、底部的一排圆点（采用RadioGroup）、 最后一页的入口按钮（采用Button）
引导页适配器
- 根据页面项的XML文件构造每页的视图。
- 让当前页码的圆点高亮显示。
- 如果翻到了最后一页，就显示中间的入口按钮
使用碎片Fragment
- 加快启动速度。因为动态注册的碎片，一开始只会加载前两个启动页，对比原来加载所有启动页 无疑大幅减少了加载页的数量，从而提升了启动速度。
- 降低代码耦合。把视图操作剥离到单独的碎片代码，不与适配器代码混合在一起，方便后继的代码 维护工作。
程序代码
布局文件
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>
