文档章节

技术分享_半透明引导页

kris0317
 kris0317
发布于 2017/03/29 13:18
字数 578
阅读 46
收藏 2

 

导航1导航2

 

半透明引导页 

 

MeFragment:

 /**
     * 显示引导页
     *
     * @param view
     * @param savedInstanceState
     */
    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        getActivity().getWindow()
                .getDecorView()
//使用getViewTreeObserver().addOnGlobalLayoutListener()视图树来获得宽度或者高度
                .getViewTreeObserver()
//当在一个视图树中全局布局发生改变或者视图树中的某个视图的可视状态发生改变时,所要调用的回调函数的接口类
                .addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
                    @Override
                    public void onGlobalLayout() {
                        getActivity().getWindow()
                                    .getDecorView()
                                    .getViewTreeObserver()
                                    .removeOnGlobalLayoutListener(this);
                        showGuideView();
                    }
                });
    }

 

GuideView:

本系统能够快速的为一个Activity里的任何一个View控件创建一个遮罩式的导航页。

首先它需要一个目标View或者它的id,我们通过findViewById来得到这个View,计算它在屏幕上的区域targetRect,通过这个区域,开始绘制一个覆盖整个Activity的遮罩,可以定义遮罩的颜色和透明度,然而目标View被绘制成透明从而实现高亮的效果。接下来是在相对于这个targetRect的区域绘制一些图片或者文字。我们把这样一张图片或者文字抽象成一个Component接口,设置文字或者图片,所有的图片文字都是相对于targetRect来定义的。可以设定额外的x,y偏移量,可以对遮罩系统设置可见状态的发生变化时的监听回调,可以对遮罩系统设置开始和结束时的动画效,另外,我们可以不对整个Activity覆盖遮罩,而是对某一个View覆盖遮罩。

usage:

public class SimpleComponent implements Component {

    @Override
    public View getView(LayoutInflater inflater) {
         LinearLayout ll = new LinearLayout(inflater.getContext());
         LinearLayout.LayoutParams param =
                 new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
         ll.setOrientation(LinearLayout.VERTICAL);
         ll.setLayoutParams(param);
         TextView textView = new TextView(inflater.getContext());
         textView.setText(R.string.welcome);
         textView.setTextColor(inflater.getContext().getResources().getColor(R.color.color_white));
         textView.setTextSize(20);
         ImageView imageView = new ImageView(inflater.getContext());
         imageView.setImageResource(R.mipmap.arrow);
         ll.removeAllViews();
         ll.addView(textView);
         ll.addView(imageView);
         ll.setOnClickListener(new View.OnClickListener() {
             @Override
             public void onClick(View view) {
                 Toast.makeText(view.getContext(), "引导层被点击了", Toast.LENGTH_SHORT).show();
 
             }
         });
         return ll;
    }

        @Override
        public int getAnchor() {
     		return Component.ANCHOR_BOTTOM;
        }

        @Override
        public int getFitPosition() {
     		return Component.FIT_START;
        }

        @Override
        public int getXOffset() {
    		    return 30;
        }

        @Override
        public int getYOffset() {
     		return 0;
        }
    }

 public void showGuideView() {   
     final GuideBuilder builder1 = new GuideBuilder();
     builder1.setTargetView(button1)
             .setAlpha(150)
             .setOverlayTarget(true)//设置目标区域是否高亮显示
             .setOutsideTouchable(false);
     builder1.setOnVisibilityChangedListener(new GuideBuilder.OnVisibilityChangedListener() {
         @Override
         public void onShown() {
             //  Toast.makeText(MutiGuideViewActivity.this, "show", Toast.LENGTH_SHORT).show();
             }
         @Override
         public void onDismiss() {
             button2.post(new Runnable() {
                 @Override
                 public void run() {
                     showGuideView2();
                 }
             });
             // Toast.makeText(MutiGuideViewActivity.this, "dismiss", Toast.LENGTH_SHORT).show();
         }
     });

     builder1.addComponent(new SimpleComponent());
     Guide guide = builder1.createGuide();
     guide.setShouldCheckLocInWindow(false);
     guide.show(MutiGuideViewActivity.this);
 }

 

 

 

 

 

 

 

© 著作权归作者所有

下一篇: 开源分享
kris0317
粉丝 5
博文 4
码字总数 834
作品 0
哈尔滨
程序员
私信 提问
iOS开源项目周报0323

由OpenDigg 出品的iOS开源项目周报第十三期来啦。我们的iOS开源周报集合了OpenDigg一周来新收录的优质的iOS开源项目,方便iOS开发人员便捷的找到自己需要的项目工具等。 CHIPageControl 炫酷...

OpenDigg
2017/03/24
0
0
iOS最好用的引导页

  最近项目结束的时候又要改引导页,之前写的启动页改起来太麻烦了,所以就直接封装一个,功能可能还不是很完善,但是感觉用起来也比较方便,在这里和大家分享一下。   这是github的下载...

红角羚羊
2017/04/01
0
0
AppCan 移动应用开发项目源码分享:嗡嗡旅游App开发

开发者介绍:老家湖北巴东好山好水,神农溪、巴人河、三里城等都是旅游好去处。中秋节回了趟老家,看到家乡的原生态景色吸引了大批游客,由此萌发了想法:用移动技术开发一个App试水,把家乡...

梅朵
2016/02/24
1K
6
Android-微信浏览器/qq浏览器内如何实现调用并打开手机第三方应用?

背景: 公司app有个需求,分享的新闻链接能用自己的app打开浏览,未安装时引导用户安装; 平台:android/ios; 分享SDK:友盟社会化分享SDK 目前方案: android客户端使用intent-filter过滤设...

清风烈酒-
2015/05/13
12.7K
2
怎么让引导不再是无用小透明?

原文出处:腾讯ISUX - 里奥 前言 在接触一款新应用的时候用户常常会看到一些引导页,但在操作的时候直接当透明的就快速滑过或跳过了,这种时候,大家一定会有“这些引导好无用啊”的无力感,...

腾讯ISUX - 里奥
2015/11/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
今天
5
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
今天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
今天
6
0
【技术分享】TestFlight测试的流程文档

上架基本需求资料 1、苹果开发者账号(如还没账号先申请-苹果开发者账号申请教程) 2、开发好的APP 通过本篇教程,可以学习到ios证书申请和打包ipa上传到appstoreconnect.apple.com进行TestF...

qtb999
今天
10
0
再见 Spring Boot 1.X,Spring Boot 2.X 走向舞台中心

2019年8月6日,Spring 官方在其博客宣布,Spring Boot 1.x 停止维护,Spring Boot 1.x 生命周期正式结束。 其实早在2018年7月30号,Spring 官方就已经在博客进行过预告,Spring Boot 1.X 将维...

Java技术剑
今天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部