作者: 夏至,欢迎转载,也请保留这段申明,谢谢。
http://www.jianshu.com/p/dfc188f130fd
今天讲一个比较简单的东西,那就是每一个app在第一次启动的时候,都会出现的引导界面;刚开始的时候我还想自定义下面的一些小圆点;然后网上查了一下,发现有更简单的方式,简直简单得令人发指。好吧,废话不多说,先上效果图:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kLp8oNFY-1580091638907)(https://dn-mhke0kuv.qbox.me/265ca8d77d6be0ae3652.gif)]
图片拿慕课网的,viewpager也添加了官网的动画效果,最后一页用一个 显示一个Button,最后点击跳转到主界面。整体上还是没啥难点,下面是分析:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1nf5ukAR-1580091638908)(https://dn-mhke0kuv.qbox.me/68a7e0d05870755b6ba4)]
##1、延时启动检测
这点没啥好说的,直接一个定时器即可,至于是否为第一次启动,则用sharedpreference来检测:
Timer timer = new Timer();
timer.schedule(new TimerTask() {
@Override
public void run() {
SharedPreferences preferences = getSharedPreferences("guide",MODE_PRIVATE);
boolean isfirst = preferences.getBoolean("isfirst",false);
if (!isfirst) {
startActivity(new Intent(SplseActivity.this, GuideActivity.class));
SharedPreferences.Editor editor =
getSharedPreferences("guide",MODE_PRIVATE).edit();
editor.putBoolean("isfirst",true);
editor.commit();
finish();
}else{
startActivity(new Intent(SplseActivity.this,MainActivity.class));
finish();
}
}
},2000);
2、圆点的绘制
上面圆点的绘制,其实很简单,我们的思路就是viewpager滑动到哪一个界面,就让它绘制成红色就可以了,所以,我们完全可以用shade属性和selector属性帮我们绘制完成。圆点如下:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="@color/colorAccent"/>
<size android:height="10dp"
android:width="10dp"/>
</shape>
效果如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e0fD5PSW-1580091638910)(https://dn-mhke0kuv.qbox.me/cf6b95b8ec70801d6f25)]
然后,我们只要新建多一个,把颜色改成白色,然后用 selector 就可以改变不同的颜色了:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/point_select" android:state_selected="true"/>
<item android:drawable="@drawable/point_normal" android:state_selected="false"/>
</selector>
至于多少个圆点,我们用动态的方式,即图片有多少张,这里就有多少个点;我们就可以使用setlayoutparmas的方式,设置我们的视图了。
首先看开机引导的主视图:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#2233"
tools:context="com.rachel.guildproject.MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/guide_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<Button
android:id="@+id/guide_start"
android:layout_width="200dp"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="@drawable/btn_background"
android:text="开始体验"
android:textColor="#ffffff"
android:textSize="20sp"
android:textStyle="bold"
android:layout_marginBottom="20dp"
android:visibility="gone"/>
<LinearLayout
android:id="@+id/point_ly"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="40dp"
android:orientation="horizontal"/>
</RelativeLayout>
viewpager 就不用讲了,button 则是我们最后一页的按钮,而 LinearLayout 则是我们的圆点绘制的,可以看到这里我把它设置成底部,这样,我们就可以在代码中去填充这些圆点了:
private void initpoint() {
//获取layout
mLayout = (LinearLayout) findViewById(R.id.point_ly);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
//设置每一个view即圆点的对左的偏移量
params.setMargins(15,0,0,0);
//根据图片多少来确定个数
for (int i = 0; i < imgRes.length; i++) {
ImageView imageView = new ImageView(this);
imageView.setImageResource(R.drawable.dot_select);
imageView.setLayoutParams(params); //把上面的控件属性设置到LinearLayout中
if (i == 0){ //默认第一张为红色圆点
imageView.setSelected(true);
}else{
imageView.setSelected(false);
}
//把圆点这个子视图导入我们的LinearLayout里面
mLayout.addView(imageView);
mImageViews.add(imageView);//跟着viewpager变换颜色
}
}
效果如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QwLUG46J-1580091638912)(https://dn-mhke0kuv.qbox.me/fbfc23d11dc804e3c843)]哪,是不是很简单啊,然后我们只要把viewpager填充进去就可以了,viewpager就老生常谈了,我这里就不讲了,我们只要在页面滑动完成之后,改变圆点的颜色就可以了,如下所示:
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
//滑动时改变圆点的状态
for (int i = 0; i < mImageViews.size(); i++) {
if (i == position){
mImageViews.get(i).setSelected(true);
}else{
mImageViews.get(i).setSelected(false);
}
}
//当为最后一个时,显示button,并隐藏圆点
if (position == mImageViews.size() -1){
mLayout.setVisibility(View.GONE);
mButton.setVisibility(View.VISIBLE);
ObjectAnimator animator = ObjectAnimator.ofFloat(mButton,"alpha",0f,1f);
animator.setDuration(1000);
animator.start();
}else{
mLayout.setVisibility(View.VISIBLE);
mButton.setVisibility(View.GONE);
}
}
这样就可以了,好像也没啥好讲的,权当记录吧,另外,学会使用 shade 和 selector 等一些相关属性,也可以让你的UI变得非常好看。
最后附上 demo地址: https://git.oschina.net/zhengshaorui/guideactivity.git