ToolBar与AppcompatAcitivity实现浸入式Statusbar效果
toolbar是android sdk API21新增的组件,下面是谷歌官方的介绍文档:
A standard toolbar for use within application content.
A Toolbar is a generalization of action
for use within application layouts. While an action bar is traditionally part of an
barsActivity's
opaque
window decor controlled by the framework, a Toolbar may be placed at any arbitrary level of nesting within a view hierarchy. An application may choose to designate a Toolbar as the action bar for an Activity using the setActionBar()
method.
Toolbar supports a more focused feature set than ActionBar. From start to end, a toolbar may contain a combination of the following optional elements:
- A navigation button. This may be an Up arrow, navigation menu toggle, close, collapse, done or another glyph of the app's choosing. This button should always be used to access other navigational destinations within the
container of the Toolbar and its signified content or otherwise leave the current context signified by the Toolbar. The navigation button is vertically aligned within the Toolbar'sminimum
, if set.
height - A branded logo image. This may extend to the height of the bar and can be arbitrarily wide.
- A title and subtitle. The title should be a signpost for the Toolbar's current position in the navigation hierarchy and the content contained there. The subtitle, if present should indicate any extended information about
the current content. If an app uses a logo image it should strongly consider omitting a title and subtitle. - One or more custom views. The application may add arbitrary child views to the Toolbar. They will appear at this position within the layout. If a child view's
Toolbar.LayoutParams
indicates
aGravity
value
ofCENTER_HORIZONTAL
the
view will attempt to center within the available space remaining in the Toolbar after all other elements have been measured. - An
action
. The menu of actions will pin to the end of the Toolbar offering a few frequent,
menu
important or typical actions along with an optional overflow menu for additional actions. Action buttons are vertically aligned within the Toolbar'sminimum
, if set.
height
In modern Android UIs developers should lean more on a visually distinct color scheme for toolbars than on their application icon. The use of application icon plus title as a standard layout is discouraged on API 21 devices and newer.
上面的介绍的重点是,toolbar是api21 新增的组件,其主要用来弥补actionbar带来的不足,其继承自viewgroup,自由的属性包括导航按钮(类似向上按钮),logo图片,标题和子标题,一个或者多个自定义view,菜单。
其中有一句介绍尤为介绍 An application may choose to designate a Toolbar as the action bar for an Activity using the setActionBar()
method.我们可以在任何activity中使用toolbar作为actiobar,但是api21之前只能使用setSupportActionbar(),相应的主题也要设置为NoActionbar(不要怀疑就是这样干,没错儿),about
toolbar的好,我会娓娓道来(么么哒)
具体介绍详见sdk/docs/reference/android/widget/Toolbar.html
下面介绍一下AppCompatAcitivity
官方介绍:You can add an ActionBar
to
your activity when running on API level 7 or higher by extending this class for your activity and setting the activity theme toTheme.AppCompat
or
a similar theme.
其主要用来向低版本的sdk提供添加actionbar的功能,并且提供Theme.AppCompat(就是谷歌推荐的Theme.Material)这样的主题,保证低版本也能获得高版本的效果。
详细介绍见:yourSDKpath/sdk/docs/reference/android/support/v7/app/AppCompatActivity.html
谷歌在新出的22.1 library 还包含了如下的组件,他们最大的特点就是可以在组件之中使用android:theme:来控制组件的样式
AppCompatAutoCompleteTextView
AppCompatButton
AppCompatCheckBox
AppCompatCheckedTextView
AppCompatEditText
AppCompatMultiAutoCompleteTextView
AppCompatRadioButton
AppCompatRatingBar
AppCompatSpinner
AppCompatTextView
在介绍了如此多的好东西之后,我们开始步入正题,如何使用toolbar 与AppCompatAcitivity实现浸入式Statusbar效果。
首先使用AndroidStudio构建project。
第二步添加依赖库:
选择open module settings》app》dependency,点击下方的加号自行选择 'com.android.support:appcompat-v7:22.1.1'
第三步:修改系统自带主题
将原有的values /style修改为:
- <pre name="code" class="html"><resources>
- <style name="ActionBarTheme" parent="Theme.AppCompat.NoActionBar">
- <item name="windowActionBar">false</item>
- <item name="android:windowNoTitle">true</item>
- <!-- toolbar(actionbar)颜色 -->
- <item name="colorPrimary">#673AB7</item>
- <!-- 窗口的背景颜色 -->
- <item name="colorPrimaryDark">@android:color/holo_blue_bright</item>
- </style>
- ;/resources>
之所以这样修改是为了能够使用toolbar,所以我们需要将主题设置为
- Theme.AppCompat.NoActionBar否则会因冲突造成程序crash。
然后我们在相同目录下新建一个folder named:values-v19,此包的作用是提供在api19+以上的效果
我们在其中复制style文件并修改:
- <resources>
- <style name="ActionBarTheme" parent="Theme.AppCompat.NoActionBar">
- <item name="windowActionBar">false</item>
- <item name="android:windowNoTitle">true</item>
- <!-- toolbar(actionbar)颜色 -->
- <item name="colorPrimary">#673AB7</item>
- <!-- 状态栏颜色 -->
- <item name="colorPrimaryDark">@android:color/holo_blue_bright</item>
- </style>
- </resources>
其中的状态栏颜色只会在api19 以上才会生效。
第四步创建布局文件:
- <?xml version="1.0" encoding="utf-8"?>
- <android.support.v7.widget.Toolbar
- xmlns:android="http://schemas.android.com/apk/res/android"
- android:id="@+id/toolbar"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:background="@android:color/holo_blue_bright"
- android:theme="@style/ThemeOverlay.AppCompat.Dark"
- android:popupTheme="@style/ThemeOverlay.AppCompat.Dark"
- android:minHeight="?attr/actionBarSize">
- </android.support.v7.widget.Toolbar>
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout
- xmlns:android="http://schemas.android.com/apk/res/android"
- android:orientation="vertical"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:fitsSystemWindows="true">
- <include layout="@layout/toobar"></include>
- <android.support.v7.widget.AppCompatCheckedTextView
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:text="Hello World, MyActivity"/>
- </LinearLayout>
第五步:使用AppcompatAcitivity与toolbar
- public class MainActivity extends AppCompatActivity {
- private Toolbar mToolbar;
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
- // this.getWindow().setBackgroundDrawableResource(getResources().getColor(android.R.color.holo_blue_bright));
- // 设定状态栏的颜色,当版本大于4.4时起作用
- if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
- SystemBarTintManager tintManager = new SystemBarTintManager(this);
- tintManager.setStatusBarTintEnabled(true);
- tintManager.setStatusBarTintResource(android.R.color.holo_blue_bright);
- }
- mToolbar = (Toolbar) findViewById(R.id.toolbar);
- mToolbar.setTitle("主标题");// 标题的文字需在setSupportActionBar之前,不然会无效
- setSupportActionBar(mToolbar);
- }
- }
这样的话我们就可以实现了浸入式的效果,在项目中我使用了一个开源的工程SystemBarTintManager,这个资源会在我会贴在源码之中。
然后贴出运行效果:
诸位可能以为我们的追求到此就结束了,其实还未完成。对于这个toolbar我们还未把玩一番,看到其继承自viewgroup,于是我好奇在其中添加了一个子view,发现竟然能够运行成功
- <?xml version="1.0" encoding="utf-8"?>
- <android.support.v7.widget.Toolbar
- xmlns:android="http://schemas.android.com/apk/res/android"
- android:id="@+id/toolbar"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:background="@android:color/holo_blue_bright"
- android:theme="@style/ThemeOverlay.AppCompat.Dark"
- android:popupTheme="@style/ThemeOverlay.AppCompat.Dark"
- android:minHeight="?attr/actionBarSize">
- <TextView
- android:layout_width="match_parent"
- android:layout_height="40dp"
- android:text="123"/>
- </android.support.v7.widget.Toolbar>
标题栏居然显示了123,之前设置title就此失效了,之后我又放入一个新的LinearLayout,也能正确布局,如果有子布局会使得setTitile方法失效,而 mToolbar.setNavigationIcon方法却不受其影响。
如果我们想要模拟actionbar上面的导航按钮类似向上这样的效果,需要在java代码中进行配置mToolbar.setNavigationIcon,xml会因为api版本问题得不到解决。如果不想使用actionbar,我们可以将toolbar注释掉,状态栏的颜色一样是可控的。么么哒,转载请注明出处
ToolBar与AppcompatAcitivity实现浸入式Statusbar效果的更多相关文章
- 手机端的tab切换,响应式切换效果
之前写过这些tab切换的效果,无论网页上还是手机端,网上也有很多的例子,这个好像是我参考网上,也不知道是哪里的了.总结了一下,就当保存下来了把. <!DOCTYPE html > < ...
- Android中的沉浸式状态栏效果
无意间了解到沉浸式状态栏,感觉贼拉的高大上,于是就是试着去了解一下,就有了这篇文章.下面就来了解一下啥叫沉浸式状态栏.传统的手机状态栏是呈现出黑色条状的,有的和手机主界面有很明显的区别.这一样就在一定 ...
- Toolbar融入状态栏实现沉浸式遇到的问题
这里写一个纠结我一下午的问题,目的是写一个toolbar和状态栏相融合的沉浸式的样子,遇到各种各样的问题,还好最后慢慢解决了. 一.首先在活动中将状态栏设为透明 @Override protected ...
- js原生实现链式动画效果
// 1. css样式 div { width: 100px; height: 100px; background: olivedrab; position: absolute; left: 0px; ...
- 【android开发笔记】为Button的背景图片添加边框式样式效果
现在做的项目遇到一个问题,设计给过来的图片只有一种状态,但是实现的需求是要求有两个状态,另一种选状态为图片背景加边框.如图: 刚开使用使用ImageView ,ImageViewButton 效果不是 ...
- SQL-Oracle内实现柱形图式的效果
在SQL SERVER内有一个函数replicate()可以实现柱形图效果,本质上是利用字符重复出现的次数来控制柱形图的长短,效果如图: 如果要在Oracle内实现相同的效果,则需要自己写一个函数: ...
- 微信小程序之实现页面缩放式侧滑效果
效果图: 实现原理:点击按钮,往需要动画的div中添加或移除拥有动画效果的class. 由于微信小程序中不能操作page这个根节点,所以,只有用一个div(view)来模仿page根节点. 1.结构 ...
- android 4.4以上能够实现的沉浸式状态栏效果
仅仅有android4.4以及以上的版本号才支持状态栏沉浸效果 先把程序执行在4.4下面的手机上,看下效果: 在4.4以上的效果: watermark/2/text/aHR0cDovL2Jsb2cuY ...
- css实现响应式九宫格效果
1. 首先看下九宫格的效果图: 2. html代码比较简单,如下: <div class="main"> <div class="box1"& ...
随机推荐
- [HNOI2009]无归岛
Description Neverland是个神奇的地方,它由一些岛屿环形排列组成,每个岛上都生活着之中与众不同的物种.但是这些物种都有一个共同的生活习性:对于同一个岛上的任意两个生物,他们有且仅有一 ...
- HDU 2082 找单词
Problem Description 假 设有x1个字母A, x2个字母B,..... x26个字母Z,同时假设字母A的价值为1,字母B的价值为2,..... 字母Z的价值为26.那么,对于给定的字 ...
- [POI2006]ORK-Ploughing
Description Byteasar想耕种他那块矩形的田,他每次能耕种矩形的一边(上下左右都行),在他每次耕完后,剩下的田也一定是矩形,每块小区域边长为1,耕地的长宽分别为m和n,不幸的是Byte ...
- ●BZOJ 4566 [Haoi2016]找相同字符
题链: http://www.lydsy.com/JudgeOnline/problem.php?id=4566题解: 广义后缀自动机 对两个串同时建立一个广义后缀自动机. 同时统计出每个状态对两个串 ...
- UVA1349:Optimal Bus Route Design
题意:给定一个有向带权图,找若干个环,使得每个点属于且仅属于一个环,要求使得环权值之和最小 题解:发现这题中每个点属于且仅属于一个环,这时候"仅"这种恰好的含义,让我们想到了匹配问 ...
- ●BZOJ 1767 [Ceoi2009]harbingers
题链: http://www.lydsy.com/JudgeOnline/problem.php?id=1767 题解: 斜率优化DP,单调栈,二分 定义 DP[i] 表示从 i 节点出发,到达根所花 ...
- POJ 3261 可重叠k次最长重复子串
Milk Patterns Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 13127 Accepted: 5842 Ca ...
- 服务器使用nginx做代理,通过HttpServletRequest获取请求用户真实IP地址
首先,在nginx配置中添加如下配置 server { listen ; server_name www.wenki.info; #要访问的域名 charset utf8; location / { ...
- DELL、HP、IBM X86服务器命名规则
DELL.HP.IBM X86服务器命名规则 各大服务器厂家对于自己的服务器命名都有一定的规则,通常会根据服务器的外观(如塔式.机架式.刀片等).处理器(如Intel或者AMD等).架构等信息来命名. ...
- mybatis源码解读(一)——初始化环境
本系列博客将对mybatis的源码进行解读,关于mybatis的使用教程,可以查看我前面写的博客——传送门. 为了便于后面的讲解,我们这里首先构造一个统一环境.也可以参考mybatis官网. 1.数据 ...