状态栏1---状态栏响应滚动事件

1 ToolBar介绍
toolbar,这是用来取代过去 actionbar 的控件,而现在于 material design 中也对之有一个统一名称:app bar,在未来的 android app 中,就以 toolbar 这个元件来实作之。
这里写图片描述

1.1 分为三个部分
风格 (style)
界面 (layout)
程序 (java)

1.1.1 风格style
风格要调整的地方有二

一在 res/values/styles.xml中

二在 /res/values-v21/styles.xml中

1.1.2 界面(Layout)
在 activity_main.xml 里面添加 Toolbar 控件:

<android.support.v7.widget.Toolbar
  android:id="@+id/toolbar"
  android:layout_height="?attr/actionBarSize"
  android:layout_width="match_parent" >

</android.support.v7.widget.Toolbar>

1.1.3 程序Java
在 MainActivity.java 中加入 Toolbar 的声明:

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

1.2 自定义颜色
这里写图片描述

上图是将本阶段要完成的结果画面做了标示,结合下面的描述希望大家能明白。

colorPrimaryDark(状态栏底色):在风格 (styles) 或是主题 (themes) 里进行设定。
App bar 底色
这个设定分为二,若你的 android app 仍是使用 actionbar ,则直接在风格 (styles) 或是主题 (themes) 里进行设定 colorPrimary 参数即可;
可若是采用 toolbar 的话,则要在界面 (layout) 里面设定 toolbar 控件的 background 属性。
navigationBarColor(导航栏底色):
仅能在 API v21 也就是 Android 5 以后的版本中使用, 因此要将之设定在 res/values-v21/styles.xml 里面。

1.3 控件
这里写图片描述
大抵来说,预设常用的几个元素就如图中所示,接着就依序来说明之:

setNavigationIcon
即设定 up button 的图标,因为 Material 的介面,在 Toolbar这里的 up button样式也就有別于过去的 ActionBar 哦。
setLogo
APP 的图标。
setTitle
主标题。
setSubtitle
副标题。
setOnMenuItemClickListener
设定菜单各按鈕的动作。

1.4 总结
这里写图片描述
这里按照图中从上到下的顺序做个简单的说明:

colorPrimaryDark

状态栏背景色。
在 style 的属性中设置。
textColorPrimary

App bar 上的标题与更多菜单中的文字颜色。
在 style 的属性中设置。
App bar 的背景色

Actionbar 的背景色设定在 style 中的 colorPrimary。
Toolbar 的背景色在layout文件中设置background属性。
colorAccent

各控制元件(如:check box、switch 或是 radoi) 被勾选 (checked) 或是选定 (selected) 的颜色。
在 style 的属性中设置。
colorControlNormal

各控制元件的预设颜色。
在 style 的属性中设置
windowBackground

App 的背景色。
在 style 的属性中设置
navigationBarColor

导航栏的背景色,但只能用在 API Level 21 (Android 5) 以上的版本
在 style 的属性中设置

响应滚动事件
我们必须使用一个容器布局:AppBarLayout来让Toolbar响应滚动事件。
注意:根据官方的谷歌文档,AppBarLayout目前必须是第一个嵌套在CoordinatorLayout里面的子view(现在貌似不是这样子,正确的理解是:AppBarLayout必须是CoordinatorLayout的直接子View)。

然后,我们需要定义AppBarLayout与滚动视图之间的联系。在RecyclerView或者任意支持嵌套滚动的view比如NestedScrollView上添加app:layout_behavior。support library包含了一个特殊的字符串资源@string/appbar_scrolling_view_behavior,它的值为android.support.design.widget.AppBarLayout$ScrollingViewBehavior ,指向AppBarLayout.ScrollingViewBehavior,用来通知AppBarLayout 这个特殊的view何时发生了滚动事件,这个behavior需要设置在触发滚动事件的view之上。
当CoordinatorLayout发现RecyclerView中定义了这个属性,它会搜索自己所包含的其他view,看看是否有view与这个behavior相关联。AppBarLayout.ScrollingViewBehavior描述了RecyclerView与AppBarLayout之间的依赖关系。RecyclerView的任意滚动事件都将触发AppBarLayout或者AppBarLayout里面view的改变。

AppBarLayout里面定义的view只要设置了app:layout_scrollFlags属性,就可以在RecyclerView滚动事件发生的时候被触发:

app:layout_scrollFlags属性里面必须至少启用scroll这个flag,这样这个view才会滚动出屏幕,否则它将一直固定在顶部。可以使用的其他flag有:

enterAlways: 一旦向上滚动这个view就可见。
enterAlwaysCollapsed: 顾名思义,这个flag定义的是何时进入(已经消失之后何时再次显示)。假设你定义了一个最小高度(minHeight)同时enterAlways也定义了,那么view将在到达这个最小高度的时候开始显示,并且从这个时候开始慢慢展开,当滚动到顶部的时候展开完。
exitUntilCollapsed: 同样顾名思义,这个flag时定义何时退出,当你定义了一个minHeight,这个view将在滚动到达这个最小高度的时候消失。
记住,要把带有scroll flag的view放在前面,这样收回的view才能让正常退出,而固定的view继续留在顶部。

此时,你应该注意到我们的Toolbar能够响应滚动事件了。
这里写图片描述

因为不会截动态图,所以就找了个图,代码中只是数据不一样,将就这看吧,哈哈~

注:另外,ScrollingViewBehavior除了能处理滚动行为,还能使设置了app:layout_behavior=”@string/appbar_scrolling_view_behavior”的view显示在AppBarLayout的下面。而不是叠加在AppBarLayout上。

activity_main.xml布局文件

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/content_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"></android.support.v7.widget.Toolbar>

    </android.support.design.widget.AppBarLayout>


    <android.support.v7.widget.RecyclerView
        android:id="@+id/rvToDoList"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />


</android.support.design.widget.CoordinatorLayout>

item_num.xml 适配器布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/id_num"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="1"
        android:textColor="#630"
        android:textSize="30dp" />

</LinearLayout>

MainActivity.java

package com.example.administrator.coordinatordemo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {
    private RecyclerView rvToDoList;
    private ArrayList<String> mDatas;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initViews();
        initDatas();
        rvToDoList.setLayoutManager(new LinearLayoutManager(this));
        rvToDoList.setAdapter(new MyAdapter());
    }

    public void initViews() {
        rvToDoList = (RecyclerView) findViewById(R.id.rvToDoList);
    }

    public void initDatas() {
        mDatas = new ArrayList<String>();
        for (int i = 'A'; i < 'z'; i++) {
            mDatas.add("" + (char) i);
        }
    }


    class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {


        @Override
        public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            MyViewHolder viewHolder = new MyViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.item_num, parent, false));
            return viewHolder;
        }

        @Override
        public void onBindViewHolder(MyViewHolder holder, int position) {
            holder.tv.setText(mDatas.get(position));
        }

        @Override
        public int getItemCount() {
            return mDatas.size();
        }

        class MyViewHolder extends RecyclerView.ViewHolder {

            TextView tv;

            public MyViewHolder(View view) {
                super(view);
                tv = (TextView) view.findViewById(R.id.id_num);
            }
        }
    }
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Vue.js是一种JavaScript框架,用于构建用户界面。它具有简单易用的语法和强大的响应式能力。Vue官网提供了一个响应式官网的模板,使开发者可以非常方便地创建自己的官网。 这个模板提供了一个完整的官网结构,包括主页、文档、示例、社区等模块。主页展示了Vue的特点和优势,吸引开发者的关注。文档模块详细介绍了Vue的使用方法和API文档,让开发者能够迅速上手并深入学习Vue的各种功能。示例模块展示了一些实际的应用场景,帮助开发者理解Vue的实际使用方式。社区模块提供了一个交流平台,开发者可以在这里提问、分享和讨论问题。 这个模板使用了Vue的核心概念——响应式数据。开发者只需在模板中编写数据和模板的绑定关系,在数据发生变化时,模板会自动根据新的数据重新渲染,达到响应式的效果。这样的设计使得开发者可以专注于数据的处理,而不需要手动操作DOM。 除了响应式数据,模板还支持组件化开发。开发者可以通过编写组件来实现模块的复用和可维护性。Vue的组件系统具有灵活的组件通信和组件复用方式,可以帮助开发者更好地组织和管理代码。 总之,Vue的响应式官网模板是一个强大而实用的工具,使得开发者可以方便地构建自己的官网,并享受到Vue带来的响应式和组件化开发的优势。无论是新手还是有经验的开发者,都能从这个模板中获得很多帮助和启发。 ### 回答2: Vue.js是一种用于构建用户界面的渐进式JavaScript框架。官网模板是Vue.js官方提供的用于创建响应式网站的标准模板。这个模板包含了一些常见的网站页面组件,如导航栏、侧边栏、内容区域等,开发者可以根据自己的需求进行定制和修改。 官网模板使用Vue的响应式原理,通过数据绑定的方式实现视图和数据的实时同步更新。当数据发生改变时,模板中绑定的相应视图也会被更新。这种方式使得开发者可以更加方便地管理和修改数据,提高了开发效率。 官网模板还提供了一些常用的功能组件,如轮播图、滚动导航等,这些组件已经构建好,只需要根据自己的需求添加和修改相关内容即可。另外,官网模板也提供了一些常用的UI样式,如按钮、表格等,这些样式可以帮助开发者快速构建出具有统一风格的网站页面。 除了基本的页面组件和功能组件外,官网模板还提供了一些常用的路由和状态管理功能,这使得开发者能够更好地管理网站的导航和页面状态。同时,官网模板还支持国际化功能,可以根据用户的语言环境自动切换显示内容,提高了网站的可用性。 总而言之,Vue.js响应式官网模板是一种方便快捷的开发工具,它提供了大量的页面组件、功能组件和样式,支持路由和状态管理,并具有响应式的特性,使得开发者能够更加轻松地创建出现代化的响应式网站。 ### 回答3: Vue.js是一个用于构建用户界面的渐进式JavaScript框架。它提供了一种响应式的数据绑定机制,使得在数据发生变化时,视图可以实时更新。官网模板是Vue.js官方提供的一个示例模板,展示了Vue.js的一些核心概念和用法。 官网模板主要包含了几个重要的部分: 1. 导航栏:位于页面的顶部,提供了一些常用链接,如文档、教程、示例等。导航栏的内容可以根据需要进行修改和扩展。 2. 主体内容:官网模板的主要部分,展示了Vue.js的一些核心概念和用法,以及相关的示例代码和解释。主体内容部分可以根据具体需求进行修改和定制。 3. 侧边栏:位于页面的左侧,提供了一些额外的导航链接,如API文档、生态系统等。侧边栏的内容也可以根据需要进行修改和扩展。 官网模板的设计风格简洁清晰,能够直观地展示Vue.js的特点和优势。通过阅读官网模板,开发者可以快速了解Vue.js的基本概念,学习其使用方法,并在实际开发中运用到自己的项目中。 总之,Vue.js官网模板是一个很好的学习和参考资源,能够帮助开发者快速入门Vue.js,并提供了丰富的示例代码和解释,使开发者能够更好地理解和运用Vue.js的响应式机制。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值