功能的落到实处,mui框架移动支付初体验详解

一、 前言

一、沉浸式状态栏

只要页面顶端是图片,一般会把境况栏改成透明。

先是能够检查测试下当前条件是或不是援助沉浸式状态栏,检查实验语句:

//是否支持沉浸式状态栏
alert(plus.navigator.isImmersedStatusbar());

默许是不支持的,会弹出false.
想让意况帮助,须求修改项目下的陈设文件manifest.json

"plus":{
    "statusbar": {
        "immersed": true
       },
       ...
}

修改造成后,会弹出true.效果如下:

美高梅开户网址 1

终端援救:

  • Android肆.四及以上系统扶助;

  • iOS七.0及以上系统帮忙。

前  言

美高梅开户网址 2某音乐播放器

  状态栏正是手提式有线电话机显示器最顶上部分的区域,包罗了:时限信号、运转商、电量等音讯。日常APP都有属于自身的色彩风格,为了达成总体视觉美观,常常会安装状态栏和标题栏的色调设置成壹致。

二、状态栏全屏

全屏并非状态栏透明或变色,而是未有状态栏,相当于看不见电量、时域信号那条了。
设置语句:

//参数:true - 全屏;false - 不全屏
plus.navigator.setFullscreen(true);

职能如下:

美高梅开户网址 3

顶点匡助:
不曾极限连串限制

博主近些日子在触发移动应用软件,学习了多少个小本领,和大家享受一下。

  • 如图某音乐播放器,这些效应正是所谓的”沉浸式”效果。
  • Android与ios效果互仿早已不是哪些稀奇奇怪的事,作者猜差不多这几个功能来自ios吧,讲真的,那体验认为真不错噢。
  • 有争辨说这种成效不可能称之为沉浸式,叫透明状态栏更方便,笔者也认为那和沉浸式的含义不太壹致。
  • 唯独大家都那样叫了,那就那样呗。

  图例:

三、状态栏背景观

修改背景象一般用来页面最上端背景象为纯色的风貌,修改成和页面1致的背景象,使页面更协调。

修改语句:

//设置系统状态栏背景色
plus.navigator.setStatusBarBackground('#6495ED'); 

意义如下:

美高梅开户网址 4

极限协助:

  • Android伍及以上系统协理;

  • iOS柒.0及以上系统帮衬。

功能的落到实处,mui框架移动支付初体验详解。1. 境况栏设置

  美高梅开户网址 5

四、状态栏文字颜色

与背景色调度同样,借使背景图颜色不当,会形成前景的功率信号栏文字颜色与背景太临近,看不清前景,此时必要调度前景色。
前景观的使用限制越多些,只可以设置黑或白,设置语句:

//参数:dark - 黑色; light - 白色
plus.navigator.setStatusBarStyle('light');

功能如下:
美高梅开户网址 6

终点辅助:

  • Android七头有HTC和黑莓帮忙,Android6及以上全部安卓协助;

  • iOS七及以上援助

现行反革命展开绝大好些个APP,状态栏都以与应用软件一体,不止美丽,而且与总体和谐。

  • 美高梅开户网址,从四.四后系统扩展了晶莹剔透状态栏的表征WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS假设加多上那性格格后,那么布局中的内容DecorView就能够自动填充到状态栏。全部的兑现都以依赖这一个特性,就也正是那个时候状态栏会私下认可空出来,然后开采者能够自定义view来填充这几个中度的.
  • 落实的历程中也许还要选用android:fitsSystemWindows="true",那天性格很注重。其含义:view能够依附系统窗口(如status
    bar,软键盘)来调动和睦的布局,要是值为true,就能调节view的paingding属性来给system
    windows留出空间….

 

博主是个中度恐怖症病人,顶端充裕小黑条实在让自己不痛快。

那么将来来看望实际达成情势呢


先是,大家在HBuilder上新建3个移动APP项目

美高梅开户网址 7一般页面都是谐和定义个类标题栏

 

1.1沉浸式状态栏(状态栏透明)

从贯彻效益上,这里大致分为三种

 

一般整个页面是图片时,会使事态栏透明。

  • 运用那一个开源库SystemBarTint

     /** * 状态栏颜色设置方法 * @param context * @param color */ public static void smartTintManager(Activity context, int color){ if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { Window window = context.getWindow(); window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); // 创建状态栏的管理实例 SystemBarTintManager tintManager = new SystemBarTintManager; // 激活状态栏设置 tintManager.setStatusBarTintEnabled; tintManager.setStatusBarTintColor; } }
    
    1. 在对应的页面包车型地铁根布局中增多android:fitsSystemWindows="true",且根布局中无法安装完整的大背景象,不然事态栏着色就能够被掩盖
    2. 调用下面方法设置具体的颜料(依附开源库,当中就三个中坚类,能够一贯把极度类拷贝到项目中)
  • 此处重要讲一下切实可行的兑现原理

     private void setupStatusBarView(Context context, ViewGroup decorViewGroup) { mStatusBarTintView = new View; LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, mConfig.getStatusBarHeight; params.gravity = Gravity.TOP; if (mNavBarAvailable && !mConfig.isNavigationAtBottom { params.rightMargin = mConfig.getNavigationBarWidth(); } mStatusBarTintView.setLayoutParams; mStatusBarTintView.setBackgroundColor(DEFAULT_TINT_COLOR); mStatusBarTintView.setVisibility(View.GONE); decorViewGroup.addView(mStatusBarTintView); }
    

    通读这段代码,很轻易见到,通过动态变化一个view,然后这些view宽是MATCH_PARENT,中度是系统状态栏的莫斯中国科学技术大学学;然后为那个动态变化的view设置1个背景颜色;最终将那些view增添到decorViewGroup其1view容器中,那再看看这一个view到底是什么人

     /** * Constructor. Call this in the host activity onCreate method after its * content view has been set. You should always create new instances when * the host activity is recreated. * * @param activity The host activity. */ @TargetApi public SystemBarTintManager(Activity activity) { Window win = activity.getWindow(); //获得DecorView根布局容器 ViewGroup decorViewGroup = (ViewGroup) win.getDecorView(); ..... if (mStatusBarAvailable) { // 这个view容器是decorViewGroup setupStatusBarView(activity, decorViewGroup); } if (mNavBarAvailable) { setupNavBarView(activity, decorViewGroup); } }
    

    瞩目看下边三个自己手动加多的声明,可知,这种做法观念正是地方栏透明后,向根布局decorViewGroup中增加多少个和状态栏等惊人的view。至于你让这些view是何等颜色,那就随你心境了。

贰、状态栏状态类型

首先,检查评定当前条件是或不是援助沉浸式状态栏。检查实验语句:

将气象栏设置为半晶莹剔透的,此时现身的标题是下面的剧情会占用了状态栏。如若我们在activity的根布局增加android:fitsSystemWindows=”true”那么此时情形栏依然足以望见的,并不曾据为己有。那这本本性的职能就在此了。

  1. 默认
  2. 翻脸(设置颜色)
  3. 透明(沉浸式)
  4. 消失(全屏)
<script type="text/javascript">
  document.addEventListener('plusready', function(){
    //是否支持沉浸式状态栏
    alert(plus.navigator.isImmersedStatusbar());

  });
</script>

那儿大家借助状态栏的冲天,为上边包车型客车原委设置一个padding-top距离(因为状态栏半透明后,下边的内容会据有原有的状态栏,那么将其设置2个padding的场所栏中度就能够)这样设置后,在那几个view的背景的padding下,原有的气象栏中度填充了千篇1律的背景象,那么那样的话就貌似所谓的沉浸式了

 

暗中同意是不支持的,会弹出false。想让景况帮衬,须要修改项目下的布置文件manifest.json

这种艺术轻巧,正是气象栏半晶莹剔透后,用上边包车型地铁内容来适合的填写(因为私下认可半透明会是被占用)代码如下:


在项目下有个manifest.json文件,展开后,张开代码视图:

@SuppressLint("InlinedApi")public static void setImmerseLayout(Activity context, View view) { if (context == null || view == null) { return; } if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { Window window = context.getWindow(); window.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS, WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); int statusBarHeight = getStatusBarHeight(context.getBaseContext; view.setPadding(0, statusBarHeight, 0, 0); }}/** * 用于获取状态栏的高度。 使用Resource对象获取 * * @return 返回状态栏高度的像素值。 */public static int getStatusBarHeight(Context context) { int result = 0; int resourceId = context.getResources().getIdentifier("status_bar_height", "dimen", "android"); if (resourceId > 0) { result = context.getResources().getDimensionPixelSize(resourceId); } return result;}

 

美高梅开户网址 8

  • 对这一个view设置一个padding_top,而以此padding的相距刚好是状态栏的惊人,那么那一个view的背景就填充到了境况栏了。

  • 值得注意的是:其1题目栏的莫斯中国科学技术大学学确定即使wrap_content,因为若是是实际的冲天,然后在装置个paddingtop的话,那么就能够把部分标题栏的内容挤出去了,不完全了。

  • 由此一般的做法是将原本的题目栏外面在嵌套1个<FrameLayout />,然后将标题栏背景设置成<FrameLayout />的背景象

     <FrameLayout android: android:layout_width="match_parent" android:background="@color/common_theme_color" android:layout_height="wrap_content">
    

 

在代码视图”plus”下加多

有关沉浸式效果的贯彻格局就啰嗦这么多了.其余,关于艾德itText及全屏Dialog等完结沉浸式难题,早先时期在更新,其实就是可怜android:fitsSystemWindows="true"的利落设置。招待交换。

3、状态栏变色

    "statusbar": {
      "immersed": true
    },  

下壹篇会达成叁个效率:页面顶端是图表,滑动渐变标题栏

  一.效用如图:美高梅开户网址 9

如图所示:

美高梅开户网址 10滑动渐变二.gif

  贰.根据色调设置情形栏文字颜色,文字颜色只提供三种值:light(深青莲)、dark(镉绿)

美高梅开户网址 11

  三.设置标题栏背景颜色

修改产生后,会弹出true,效果如下:

  4.装置景况栏背景颜色,颜色值为1六进制

美高梅开户网址 12

  示例代码:

终端协助:

美高梅开户网址 13美高梅开户网址 14

  • Android4.肆及以上系统扶助;
  • iOS柒.0及以上系统支持
1 <link href="css/mui.min.css" rel="stylesheet"/>
2 .mui-bar{ background-color: red;}
3 </link>
4 <script>        
5 mui.plusReady(function(){             
6 plus.navigator.setStatusBarStyle('light');  
7 plus.navigator.setStatusBarBackground('#FF0000');             
8 });    
9 </script>    

一.二状态栏全屏

View Code

情景栏全屏是不曾状态栏,不出示电量、信号那一条。

  注意事项:

以此意义是在JS文件中投入语句:

  背景象终端扶助仅:Android五及以上系统协理;iOS7.0及以上系统帮忙。

<script type="text/javascript">
  document.addEventListener('plusready', function(){
    //参数:true - 全屏;false - 不全屏
    plus.navigator.setFullscreen(true);

  });
</script>

  文字色终端补助仅:Android七唯有金立和中兴协助,Android陆及以上全部安卓协理;iOS7及以上帮忙。

效用如下:

 

美高梅开户网址 15


一.三动静栏背景观

  

修改背景观一般用于页面顶上部分背景观为纯色的景观,修改成和页面1致的背景观,使页面更协调。

四、状态栏透明(沉浸式)

//设置系统状态栏背景色
plus.navigator.setStatusBarBackground('#6495ED');

  壹.功能如图:

Android平台不援助此功用,如有大神,请多多指点。

  美高梅开户网址 16

贰. 毛玻璃效果

          (将背景图片和状态栏、标题栏贯通了)

图片模糊化能够给人朦胧美的作用。点一下在先没提到的图片模糊效果:

 

css属性filter:

   

filter: blur(16px);

  二.利用实战(登入分界面)

blur()中的像素是破绽百出程度。

  需要描述:将背景设置成图片,图片能够适应差异器材的分配率(响应式),将状态栏的背景设置成透明,背景图片覆盖情形栏至屏幕顶端。  

3. 轻巧易行利用mui快捷搭建页面

美高梅开户网址 17美高梅开户网址 18

日前最麻烦本人的情事栏难题消除了,页面布局就好办了。用mui模板能够长足搭建出来。

 <style>       
    html,body{height: 100%;width: 100%;}  
    body{  
      background:url(image/background.png)no-repeat;   
      background-size:100% 100%;                  
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image/background.png',sizingMethod='scale');  
    }            
    </style>

以XX音乐为例:

安装页面背景

二.一导入文本

 

  <script src="js/mui.min.js"></script>
  <link href="css/mui.min.css" rel="external nofollow" rel="stylesheet"/>
  <link rel="stylesheet" href="css/bofang.css" rel="external nofollow" />

美高梅开户网址 19美高梅开户网址 20

2.2HTML代码

mui.plusReady(function(){             
    plus.navigator.setStatusBarStyle('light');               
});

下边HTML代码为利用的mui框架部分和上述事态栏相关部分,那块mui是有关区域轮播部分

本着背景象的色彩设置情状栏文字的水彩

顶上部分img是背景图,外层包裹的div特别有必不可缺,overflow属性要灵活,技艺有周详的功用。

 

因为APP的header部分用的固化,所以页面主体部分要加高度为7四px左右的padding-top

美高梅开户网址 21美高梅开户网址 22

  <div class="mui-slider">
       <div class="mui-slider-group">
         <div class="mui-slider-item">
          第一个轮播区域
         </div>
         <div class="mui-slider-item">
          <p class="singer">

            G-DRAGON

          </p>
          <p class="yinxiao">
            <img src="img/player_btn_sq_hlight.png"/>
            <img src="img/player_btn_mv_normal.png"/>
            <img src="img/player_btn_dts_on.png"/>
          </p>

          <div class="datu">
            <img src="img/GD.jpg"/>
          </div>

          <p class="geci">A Boy - G-DRAGON</p>


         </div>
         <div class="mui-slider-item">
          第二个轮播区域
         </div>
       </div>
       <div class="mui-slider-indicator">
        <div class="mui-indicator"></div>
        <div class="mui-indicator mui-active"></div>
        <div class="mui-indicator"></div>
       </div>
    </div>
"plus": {
    "statusbar": {
        "immersed": true
    }
}

主要css代码:

开采应用的manifest.json文件,切换来代码视图,在plus
-> statusbar 下加多immersed节点并设置值为true

*{
  padding: 0px;
  margin: 0px;
}
body{
  overflow: hidden;
  height: 100vh;
}
#background{
  overflow: hidden;
  text-align: right;
}
#background #backImg{
  margin-left: -120px;
  height: 99vh;
  filter: blur(16px);
}
.mui-bar-nav{
  top: 30px;
  background-color: rgba(0,0,0,0);
  box-shadow: 0 0px 0px #ccc;
}
.mui-bar-nav .mui-title{
  color: white;
  font-size: 20px;
  font-weight: normal;
  line-height: 50px;
}
#continer{
  width: 100%;
  height: 100vh;
  position: relative;
  top: -100vh;
  z-index: 5;
  padding-top: 80px;
  background-color: rgba(0,0,0,0.7);
  text-align: center;
  color: white;
}

 

末端不相同样大小的图纸居中对齐那或多或少还一时没想起来。这里就要动用弹性布局的交叉轴对齐格局:

   叁.沉浸式延伸的难题

#continer .footer1{
  margin-bottom: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}

   由于沉浸式格局是在manifest.json文件配置,作为了一个一定全局的安装,沉浸式的装置恐怕只是指向部分页面,那么对别的的页面都牵连了。

来得下效果:

   导致的作用如图:

美高梅开户网址 23

  美高梅开户网址 24

美高梅开户网址 25

              (状态栏的中度被忽视)

小q有话说

  化解代码:

博主写博客也是想加强和谐,还请大神指教。

  mui.plusReady(function(){                      
    plus.webview.currentWebview().setStyle({
        statusbar:{background:'#ff0000'},top:0,bottom: 0
  });
 });

别的,框架确实好用,然则博主感到,照旧得把原生代码先精通好。

  background属性,设置状态栏的背景观。

上述正是本文的全体内容,希望对大家的上学抱有帮忙,也希望我们多多支持脚本之家。

 

你或然感兴趣的篇章:

  • 应用MUI框架模拟手提式有线电话机端的下拉刷新和上拉加载效用

 

 

五、 全屏展现(未有状态栏)

在动用中可调用5+ API动态改动使用是或不是全屏显示的场所:

function fullscreen(){
        // 设置应用全屏显示!
        plus.navigator.setFullscreen(true);
}
function unfullscreen(){
        // 设置应用非全屏显示!
        plus.navigator.setFullscreen(false);
}
function isfullscreen(){
        // 查询应用当前是否全屏显示!
        console.log( "是否全屏:"+(plus.navigator.isFullscreen()?"是":"否") );
}

 


 

 

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图