Android进阶之路 - 蒙版引导页

在一些app中除了首次进入应用时出现的引导页之外,同时也在用户首次使用的时候会有部分引导!

第一部分引导页主要是介绍自己的产品,第二部分引导页主要是教用户操作我们的app -。- ~

公共配置

  • build(app)
//效果1依赖
compile 'com.github.huburt-Hu:NewbieGuide:v1.0.2'
//效果2依赖
compile 'com.github.huburt-Hu:NewbieGuide:v2.1.0'
  • build (project)

/**其实主要加入 maven { url 'https://jitpack.io' } 
  因为项目初建不包含maven库依赖*/

allprojects {
    repositories {
        google()
        jcenter()
        maven { url 'https://jitpack.io' }
    }
}

目前效果有俩种 ,一种为单页引导,一种为多页引导;

Effect 1:
Android进阶之路 - 蒙版引导页_第1张图片
因为最初是借鉴的一篇博友的文章,在2017年github原作者NewbieGuide的版本为v1.0.2,所以第一个效果我相当于用的是很老的东西了!扩展方面比较差!下面是我使用时遇到的一些缺陷:

  • 同一引导页面,无法满足多处视图进行高亮显示 ~
  • 设置椭圆形时设置shape数值,显示时是无效的~
  • 代码的设计方面只满足了建造模式,其他模式用不多~

MainActivity:

package com.advance.yongliu.guidedemo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.TextView;

import com.app.hubert.library.HighLight;
import com.app.hubert.library.NewbieGuide;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        TextView mView = findViewById(R.id.tv_btn);

        NewbieGuide.with(this)
                //存储sp的键
                .setLabel("1")
                //设置高亮区域的样式,圆形,长方形,椭圆形
                .addHighLight(mView, HighLight.Type.RECTANGLE)
                //设置引导布局与高亮区域
                .setLayoutRes(R.layout.page_view,R.id.iv_konw)
                //设置点击任何区域消失,默认为true
                .setEveryWhereCancelable(false)
                //是否每次都显示引导层,默认false
                .alwaysShow(true)
                .show();
    }
}

MainActivity 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"
    tools:context="com.advance.yongliu.guidedemo.MainActivity">

    <TextView
        android:id="@+id/tv_btn"
        android:layout_marginTop="210dp"
        android:layout_marginRight="11dp"
        android:layout_width="wrap_content"
        android:layout_height="45dp"
        android:layout_alignParentRight="true"
        android:gravity="center"
        android:text="我真的好想你,在每一个夜里~"
        />

RelativeLayout>

引导蒙版xml :page_view


<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

    <ImageView
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:layout_width="37dp"
        android:layout_height="46dp"
        android:layout_marginLeft="203dp"
        android:src="@mipmap/ic_go"
        />

    <ImageView
        android:id="@+id/iv_guide_girl"
        android:layout_width="50dp"
        android:layout_height="120dp"
        android:layout_marginTop="285dp"
        android:layout_marginLeft="69dp"
        android:src="@mipmap/ic_girl"
        />

    <ImageView
        android:id="@+id/iv_text"
        android:layout_width="220dp"
        android:layout_height="74dp"
        android:layout_marginTop="336dp"
        android:layout_toRightOf="@+id/iv_guide_girl"
        android:src="@mipmap/ic_text"
        />

    <ImageView
        android:layout_marginTop="31dp"
        android:layout_marginLeft="120dp"
        android:id="@+id/iv_konw"
        android:layout_width="135dp"
        android:layout_height="49dp"
        android:layout_below="@+id/iv_text"
        android:src="@mipmap/ic_konw"
        />
RelativeLayout>

Effect 2(Demo下载地址):
Android进阶之路 - 蒙版引导页_第2张图片

这里的效果是根据github原作者最新的版本进行设置的,方法和使用方面都扩展性强了很多!当然我这篇博客中肯定没有原作者写的详细 - -~ 主要是这个三方库的使用介绍,写的很详细!所以在这里如果没有解决的问题,那么就跳转GitHub原作者的项目下哦!!!

MainActivity(主要代码) :

package com.advance.yongliu.guidedemo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.widget.TextView;
import android.widget.Toast;

import com.app.hubert.guide.NewbieGuide;
import com.app.hubert.guide.core.Controller;
import com.app.hubert.guide.listener.OnGuideChangedListener;
import com.app.hubert.guide.listener.OnPageChangedListener;
import com.app.hubert.guide.model.GuidePage;
import com.app.hubert.guide.model.HighLight;


public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        TextView mView1 = findViewById(R.id.view1);
        TextView mView2 = findViewById(R.id.view2);

        /**淡入动画*/
        Animation enterAnimation = new AlphaAnimation(0f, 1f);
        enterAnimation.setDuration(600);
        enterAnimation.setFillAfter(true);
        /**淡出动画*/
        Animation exitAnimation = new AlphaAnimation(1f, 0f);
        exitAnimation.setDuration(600);
        exitAnimation.setFillAfter(true);

        /**引导页配置-。- */
        NewbieGuide.with(this)
                //存储sp的键
                .setLabel("1")
                //监听引导层 状态~
                .setOnGuideChangedListener(new OnGuideChangedListener() {
                    @Override
                    public void onShowed(Controller controller) {
                        //引导层显示
                        Toast.makeText(MainActivity.this, "开始进行引导页浏览", Toast.LENGTH_SHORT).show();
                    }

                    @Override
                    public void onRemoved(Controller controller) {
                        //引导层消失(多页切换不会触发)
                        Toast.makeText(MainActivity.this, "引导页已经全部浏览完毕,我在听陈小姐的话", Toast.LENGTH_SHORT).show();
                    }
                })

                .setOnPageChangedListener(new OnPageChangedListener() {
                    @Override
                    public void onPageChanged(int i) {

                    }
                })
                .alwaysShow(true)
                .addGuidePage(
                        GuidePage.newInstance()
                                //设置高亮区域的样式,圆形,长方形,椭圆形
                                .addHighLight(mView1)
                                .addHighLight(mView2, HighLight.Shape.RECTANGLE)
                                //设置引导布局与高亮区域
                                .setLayoutRes(R.layout.page_view1, R.id.iv_view1_konw)
                                //设置点击任何区域消失,默认为true
                                .setEverywhereCancelable(false)
                                //进入动画
                                .setEnterAnimation(enterAnimation)
                                //退出动画
                                .setExitAnimation(exitAnimation)

                )
                .addGuidePage(
                        GuidePage.newInstance()
                                //设置高亮区域的样式,圆形,长方形,椭圆形
                                .addHighLight(mView2, HighLight.Shape.OVAL, 50)
                                //设置引导布局与高亮区域
                                .setLayoutRes(R.layout.page_view2, R.id.iv_view2_konw)
                                //设置点击任何区域消失,默认为true
                                .setEverywhereCancelable(false)
                                //进入动画
                                .setEnterAnimation(enterAnimation)
                                //退出动画
                                .setExitAnimation(exitAnimation)

                )
                //显示引导层(至少需要一页引导页才能显示)
                .show();
    }
}

MainActivity 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"
    tools:context="com.advance.yongliu.guidedemo.MainActivity">

    <TextView
        android:id="@+id/view1"
        android:layout_width="wrap_content"
        android:layout_height="45dp"
        android:layout_alignParentRight="true"
        android:layout_marginRight="11dp"
        android:layout_marginTop="210dp"
        android:gravity="center"
        android:text="我真的好想你,在每一个夜里~"
        />

    <TextView
        android:id="@+id/view2"
        android:layout_width="wrap_content"
        android:layout_height="45dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:text="陈小姐的话~"
        />
RelativeLayout>

page_view1, page_view2填充的引导页布局(每个人布局不同,这个其实不必看)


<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

    <ImageView
        android:id="@+id/iv_guide_girl"
        android:layout_width="50dp"
        android:layout_height="120dp"
        android:layout_marginTop="285dp"
        android:layout_marginLeft="69dp"
        android:src="@mipmap/ic_girl"
        />

    <ImageView
        android:id="@+id/iv_text"
        android:layout_width="220dp"
        android:layout_height="74dp"
        android:layout_marginTop="336dp"
        android:layout_toRightOf="@+id/iv_guide_girl"
        android:src="@mipmap/ic_text"
        />

    <ImageView
        android:layout_marginTop="31dp"
        android:layout_marginLeft="120dp"
        android:id="@+id/iv_view1_konw"
        android:layout_width="135dp"
        android:layout_height="49dp"
        android:layout_below="@+id/iv_text"
        android:src="@mipmap/ic_konw"
        />
RelativeLayout>

所遇问题:

  • 高亮区域,椭圆形方法展示(样式自选)
  //内边距撑多大,看自己需求
  addHighLight(mView2, HighLight.Shape.OVAL, 50)
  • 设置引导页的背景色(我认为也可以在引导页的xml下设置,但是可能没有这个效果好)
//设置背景色,建议使用有透明度的颜色
setBackgroundColor(getResources().getColor(R.color.testColor))
  • 多处高亮视图展示
//使用addHighLight方法,可直接设置view,这里可设置高亮形状,如果不设置的话,默认是长方形
.addHighLight(mView1)
.addHighLight(mView2, HighLight.Shape.RECTANGLE)
  • 设置引导页显示次数,例如只有第一次使用app显示,或者每次都显示,或者你想让引导页总共展示几次!
//控制次数  例如现在只会显示3此引导页,除非你删了app重新安装
setShowCounts(3)
  • 多页引导动画切换

步骤1 :copy 到类内,放在引导页设置之前,不然无法调用

        //淡入动画
        Animation enterAnimation = new AlphaAnimation(0f, 1f);
        enterAnimation.setDuration(600);
        enterAnimation.setFillAfter(true);
        //淡出动画
        Animation exitAnimation = new AlphaAnimation(1f, 0f);
        exitAnimation.setDuration(600);
        exitAnimation.setFillAfter(true);

步骤2 :需要使用动画就进行设置,不需要就注释

  //进入动画
  .setEnterAnimation(enterAnimation)
  //退出动画
  .setExitAnimation(exitAnimation)

你可能感兴趣的:(#,项目开发知识点归纳,#,三方框架)