关闭

[置顶] Android引导蒙层,安卓新手引导图,引导图层,支持椭圆,圆形,矩形多种形状,一行代码快速搞定

标签: Android引导蒙层安卓新手引导图引导图层
7981人阅读 评论(8) 收藏 举报
分类:

新手引导视图,初次打开页面时显示。 支持圆形,椭圆,矩形等多种图形 提示部分支持图片和文字提示


github源码地址:https://github.com/qiushi123/GuideView-master


先看效果图



使用步骤。

使用起来特别简单,只需要把GuideView这个类复制到你的项目中就可以了

package com.laxian.guideview;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Gravity;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private ImageButton menu;
    private Button btnTest;
    private Button btnTest2;
    private GuideView guideView;
    private GuideView guideView3;
    private GuideView guideView2;

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

        menu = (ImageButton) findViewById(R.id.ib_menu);
        btnTest = (Button) findViewById(R.id.btn_test);
        btnTest2 = (Button) findViewById(R.id.btn_test2);

    }

    private void setGuideView() {

        // 使用图片
        final ImageView iv = new ImageView(this);
        iv.setImageResource(R.drawable.img_new_task_guide);
        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        iv.setLayoutParams(params);

        // 使用文字
        TextView tv = new TextView(this);
        tv.setText("欢迎使用");
        tv.setTextColor(getResources().getColor(R.color.white));
        tv.setTextSize(30);
        tv.setGravity(Gravity.CENTER);

        // 使用文字
        final TextView tv2 = new TextView(this);
        tv2.setText("欢迎使用2");
        tv2.setTextColor(getResources().getColor(R.color.white));
        tv2.setTextSize(30);
        tv2.setGravity(Gravity.CENTER);


        guideView = GuideView.Builder
                .newInstance(this)
                .setTargetView(menu)//设置目标
                .setCustomGuideView(iv)
                .setDirction(GuideView.Direction.LEFT_BOTTOM)
                .setShape(GuideView.MyShape.CIRCULAR)   // 设置圆形显示区域,
                .setBgColor(getResources().getColor(R.color.shadow))
                .setOnclickListener(new GuideView.OnClickCallback() {
                    @Override
                    public void onClickedGuideView() {
                        guideView.hide();
                        guideView2.show();
                    }
                })
                .build();


        guideView2 = GuideView.Builder
                .newInstance(this)
                .setTargetView(btnTest)
                .setCustomGuideView(tv)
                .setDirction(GuideView.Direction.LEFT_BOTTOM)
                .setShape(GuideView.MyShape.ELLIPSE)   // 设置椭圆形显示区域,
                .setBgColor(getResources().getColor(R.color.shadow))
                .setOnclickListener(new GuideView.OnClickCallback() {
                    @Override
                    public void onClickedGuideView() {
                        guideView2.hide();
                        guideView3.show();
                    }
                })
                .build();


        guideView3 = GuideView.Builder
                .newInstance(this)
                .setTargetView(btnTest2)
                .setCustomGuideView(tv2)
                .setDirction(GuideView.Direction.LEFT_BOTTOM)
                .setShape(GuideView.MyShape.RECTANGULAR)   // 设置矩形显示区域,
                .setRadius(80)          // 设置圆形或矩形透明区域半径,默认是targetView的显示矩形的半径,如果是矩形,这里是设置矩形圆角大小
                .setBgColor(getResources().getColor(R.color.shadow))
                .setOnclickListener(new GuideView.OnClickCallback() {
                    @Override
                    public void onClickedGuideView() {
                        guideView3.hide();
                        guideView.show();
                    }
                })
                .build();

        guideView.show();
    }

    @Override
    protected void onResume() {
        super.onResume();
        setGuideView();
    }
}



















2
0
查看评论

关于android新手引导的开源使用

做APP的时候难免用到新手引导的效果。 先放一张效果的图片吧。虽然丑了点,讲究实用吧。 本人在开发的时候,使用了github这位同学的开源代码,这里推荐一下开源的github的地址:点击打开链接 将github下载的导入自己的项目,然后gradle配置成功后,就...
  • qq_21139343
  • qq_21139343
  • 2017-01-18 14:57
  • 1188

分享一个好用的android新手引导

https://github.com/LuckyJayce/GuideHelper.git 在github上发现的,感觉挺好用的。 第一步:创建一个guiderhelper final GuideHelper guideHelper = new GuideHelper(MainActivity...
  • u013259400
  • u013259400
  • 2016-10-08 17:37
  • 402

android新手引导图

  • 2017-01-20 16:52
  • 30.42MB
  • 下载

android实现App新手引导功能

直接上图看效果: 好了,看到了效果图,简单讲一下。 可以实现activity,fragment上任何控件的引导功能,可以自己任意改变样式。 特别注意在fragment里的方法有点不一样,要注意下。 源码下载地址:  http://download.csdn.net/...
  • zzq272804553
  • zzq272804553
  • 2017-01-20 17:01
  • 1448

android首次进入App新手引导

在android App开发的时候,往往在首次进入应用要给用户一个引导,今天我就来实现这个功能,算作是自己的一个笔记,以后忘记了可以翻来看看,下面我们就来实现它吧.public class LaunchActivity extends BaseActivity { private ViewPage...
  • u012528368
  • u012528368
  • 2016-09-21 14:42
  • 317

Android 新手引导蒙层效果实现

先上效果图:这个效果一开始我是想直接让UI给个切图,后来发现这样不行,适配很差,达不到效果。所以就自己动手写代码,其实思路也很简单:在这个布局的父布局上面再手动添加一个view(通常LinearLayout比较方便),然后把这个linearlayout的背景设置成#88000000,之后就是给这个l...
  • u013299273
  • u013299273
  • 2017-01-06 14:40
  • 2682

新手引导蒙层

关于这个,gitgub上有一篇还是不错的,传送门:https://github.com/binIoter/GuideView,感兴趣的小伙伴可以去看一下。 使用的话先倒库,这里就不多说了,会报错,修改了一下库的build.gradule就OK了~~下面看代码:MainActivitypackage...
  • AndroidStudioo
  • AndroidStudioo
  • 2016-09-14 15:58
  • 2510

Android打造不一样的新手引导页面(一)

Android打造不一样的新手引导页面(一)本篇博客主要讲解怎样自定义一个circleIndicator控件?下一遍博客主要讲解怎样更改ViewPager切换的效果, 预计明天晚上之前更新。效果图如下1)首先我们先来看一下要怎样使用我们的circleIndicator控件其实很简单,值需要两个步骤1...
  • gdutxiaoxu
  • gdutxiaoxu
  • 2016-08-20 22:03
  • 3860

Android app新手引导高亮提示,简单易用

Android app新手引导高亮提示,简单易用
  • qq_35549248
  • qq_35549248
  • 2017-05-20 14:45
  • 518

Android打造不一样的新手引导页面(二)

Android打造不一样的新手引导页面(二)本系列主要分为两篇博客Android打造不一样的新手引导页面(一) Android打造不一样的新手引导页面(二) 关于页面导航器的,可以查看我的这一篇博客仿网易新闻的顶部导航指示器上一篇博客主要讲解怎样自定义一个CirclePageIndicator控件这...
  • gdutxiaoxu
  • gdutxiaoxu
  • 2016-08-21 22:59
  • 2172
    个人资料
    • 访问:252773次
    • 积分:2955
    • 等级:
    • 排名:第14096名
    • 原创:55篇
    • 转载:0篇
    • 译文:0篇
    • 评论:128条
    最新评论