需要源码或图片集请点赞关注收藏后评论区留言~~~
App引导启动页
翻页视图的应用范围很广,当用户安装一个新应用时,首次启动大多出现欢迎页面,这个引导页面通常要往右翻好几页,才会进入应用主页,这种启动引导页就是通过翻页视图实现的。下面就来动手打造一个属于你的第一个App启动欢迎页把。
它的核心在于页面项的XML布局以及适配器,因此首先要设计页面项的布局,一般来说,引导页由两部分组成,一部分是背景图,一部分是页面下方的一排圆点,其中高亮的圆点表示当前位于第几页。除了背景图与一排圆点之外,最后一页往往有个按钮,它便是应用主页的入口,也是页面项的XML文件至少包含三个控件
1:引导页的背景图
2:底部的一排圆点
3:最后一页的入口按钮
写好了页面项的XML布局,还得编写启动引导页得适配器代码 主要完成三项工作
1:根据页面项得XML文件构造每页的视图
2:让当前页码的圆点高亮显示
3:如果翻到了最后一页,就显示中间的入口按钮
效果如下
最后 代码如下
Java类代码
package com.example.chapter08; import android.os.Bundle; import androidx.appcompat.app.AppCompatActivity; import androidx.viewpager.widget.ViewPager; import com.example.chapter08.adapter.LaunchSimpleAdapter; public class LaunchSimpleActivity 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_simple); // 从布局视图中获取名叫vp_launch的翻页视图 ViewPager vp_launch = findViewById(R.id.vp_launch); // 构建一个引导页面的翻页适配器 LaunchSimpleAdapter adapter = new LaunchSimpleAdapter(this, lanuchImageArray); vp_launch.setAdapter(adapter); // 设置翻页视图的适配器 vp_launch.setCurrentItem(0); // 设置翻页视图显示第一页 } }
适配器代码
package com.example.chapter08.adapter; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.View.OnClickListener; import android.view.ViewGroup; import android.view.ViewGroup.LayoutParams; import android.widget.Button; import android.widget.ImageView; import android.widget.RadioButton; import android.widget.RadioGroup; import android.widget.Toast; import androidx.viewpager.widget.PagerAdapter; import com.example.chapter08.R; import java.util.ArrayList; import java.util.List; public class LaunchSimpleAdapter extends PagerAdapter { private List<View> mViewList = new ArrayList<View>(); // 声明一个引导页的视图列表 // 引导页适配器的构造方法,传入上下文与图片数组 public LaunchSimpleAdapter(final Context context, int[] imageArray) { for (int i = 0; i < imageArray.length; i++) { // 根据布局文件item_launch.xml生成视图对象 View view = LayoutInflater.from(context).inflate(R.layout.item_launch, null); 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(imageArray[i]); // 设置引导页的全屏图片 // 每个页面都分配一个对应的单选按钮 for (int j = 0; j < imageArray.length; j++) { RadioButton radio = new RadioButton(context); // 创建一个单选按钮 radio.setLayoutParams(new LayoutParams( LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)); radio.setButtonDrawable(R.drawable.launch_guide); // 设置单选按钮的图标 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(context, "欢迎您开启美好生活", Toast.LENGTH_SHORT).show(); } }); } mViewList.add(view); // 把该图片对应的页面添加到引导页的视图列表 } } // 获取页面项的个数 public int getCount() { return mViewList.size(); } // 判断当前视图是否来自指定对象 public boolean isViewFromObject(View view, Object object) { return view == object; } // 从容器中销毁指定位置的页面 public void destroyItem(ViewGroup container, int position, Object object) { container.removeView(mViewList.get(position)); } // 实例化指定位置的页面,并将其添加到容器中 public Object instantiateItem(ViewGroup container, int position) { container.addView(mViewList.get(position)); return mViewList.get(position); } }
XML文件如下
<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>
item_launchXML
<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>
创作不易 觉得有帮助请点赞关注收藏~~~