文档章节

优雅地实现 Android Toolbar 及沉浸式状态栏(二)

XngPro
 XngPro
发布于 2017/02/09 19:34
字数 1353
阅读 29
收藏 0
点赞 0
评论 0

前面一篇已经简单地介绍了Toolbar及沉浸式状态栏的实现方式,这篇作为对前面的一些补充,希望能够帮助到你
文字介绍不多,主要内容在注释里写明了,仔细阅读代码应该能很好地理解。

使用Toolbar需要依赖appcompat-v7
* 使用Android Studio的童鞋请在app module的build.gradle中添加

dependencies {
    compile 'com.android.support:appcompat-v7:24.1.1'

版本号酌情选择即可
* 使用Eclipse的童鞋请先添加appcompat-v7作为你的项目的library,不清楚的请百度、Google。

隐藏Actionbar

为了方便去除Actionbar,这里采用自定义theme
继承自”Theme.AppCompat.Light.NoActionBar”的方式,以下罗列了需要用到的style。

styles.xml

 <!--Custom base application theme-->
    <style name="CAppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!--Toolbar 导航按钮(返回按钮)样式--> <item name="toolbarNavigationButtonStyle">@style/mToolbarNavigationButtonStyle</item> </style>

    <!--Toolbar Navigation Button Sytle-->
    <style name="mToolbarNavigationButtonStyle" parent="@style/Widget.AppCompat.Toolbar.Button.Navigation"> <item name="android:minWidth">40dp</item> <item name="android:padding">0dp</item> <item name="android:scaleType">centerInside</item> </style>

    <!--Custom Toolbar Style -->
    <style name="mToolbarStyle" parent="@style/Widget.AppCompat.Toolbar"> <!-- 设置该属性解决Toolbar左边空白 默认为16dp--> <item name="contentInsetStart">0dp</item> <item name="contentInsetStartWithNavigation">0dp</item> <item name="titleMargin">0dp</item> <!--Toolbar Button min Height.Suggest use 0dp, also can use your Toolbar's Height--> <item name="android:minHeight">0dp</item> <!--Toolbar Button Max height. Suggest use size <= your custom Toolbar's Height--> <item name="maxButtonHeight">100dp</item> </style>

    <!--Custom Toolbar Theme -->
    <style name="mToolbarTheme" parent="@style/ThemeOverlay.AppCompat.ActionBar"> <!-- Toolbar 标题文字颜色 包括navigation searchicon颜色--> <item name="android:textColorPrimary">@android:color/white</item> <item name="android:padding">0dp</item> </style>

    <!-- Toolbar 弹出菜单样式 -->
    <style name="mToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat.Light"> <!-- 菜单背景色 --> <item name="android:colorBackground">@android:color/black</item> <!-- 菜单文字色 --> <item name="android:textColor">@android:color/holo_blue_dark</item> <!-- 菜单字体 --> <item name="android:textSize">20sp</item> </style>

    <!-- Toolbar 标题样式 -->
    <style name="mToolbarTitle" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title"> <item name="android:textSize">14sp</item> </style>

在AndroidManifest.xml中修改application theme

<application
        android:name=".MyApplication"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/CAppTheme">

Toolbar布局

include_layout_toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    style="@style/mToolbarStyle"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@android:color/holo_blue_bright"
    app:popupTheme="@style/mToolbarPopupTheme"
    app:theme="@style/mToolbarTheme"
    app:titleTextAppearance="@style/mToolbarTitle">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <View
            android:id="@id/toolbar_left_view"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_alignParentLeft="true"/>


        <ImageView
            android:id="@id/toolbar_left_img"
            android:layout_width="50dp"
            android:layout_height="match_parent"
            android:layout_toRightOf="@id/toolbar_left_view"
            android:scaleType="centerInside"
            android:src="@drawable/ic_action_settings"
            android:visibility="gone"/>

        <TextView
            android:id="@id/toolbar_left_tv"
            android:layout_width="50dp"
            android:layout_height="match_parent"
            android:layout_toRightOf="@id/toolbar_left_img"
            android:gravity="center"
            android:text="left_tv"
            android:visibility="gone"/>

        <TextView
            android:id="@id/toolbar_center_tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:text="@string/app_name"
            android:textSize="16sp"
            android:visibility="gone"/>

        <ImageView
            android:id="@id/toolbar_center_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:maxWidth="100dp"
            android:visibility="gone"/>

        <TextView
            android:id="@id/toolbar_right_tv"
            android:layout_width="50dp"
            android:layout_height="match_parent"
            android:layout_toLeftOf="@id/toolbar_right_img"
            android:gravity="center"
            android:text="right"
            android:visibility="gone"/>

        <ImageView
            android:id="@id/toolbar_right_img"
            android:layout_width="50dp"
            android:layout_height="match_parent"
            android:layout_toLeftOf="@id/toolbar_right_view"
            android:scaleType="centerInside"
            android:src="@drawable/ic_action_settings"
            android:visibility="gone"/>

        <View
            android:id="@id/toolbar_right_view"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_alignParentRight="true"/>

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

BaseActivity布局

activity_base.xml

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

    <include layout="@layout/include_layout_toolbar" />

</LinearLayout>

BaseActivity

public class BaseActivity extends AppCompatActivity {
    private static final String TAG = "BaseActivity";
    /** * Root view */
    private LinearLayout mRootLayout;
    /** * Toolbar instance */
    protected Toolbar mToolbar;

    public Toolbar getToolbar() {
        return mToolbar;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.setContentView(R.layout.activity_base);
        if (!isTaskRoot()) {
        /* If this is not the root activity,finish it.*/
            Intent intent = getIntent();
            String action = intent.getAction();
            if (intent.hasCategory(Intent.CATEGORY_LAUNCHER) && Intent.ACTION_MAIN.equals(action)) {
                //Logger.w("Activity is not the root. Finishing Activity instead of launching.");
                Log.w(TAG, "Activity is not the root. Finishing Activity instead of launching.");
                finish();
                return;
            }
        }
    }

    @Override
    public void setContentView(int layoutId) {
        setContentView(View.inflate(this, layoutId, null));
    }

    @Override
    public void setContentView(View view) {
        mRootLayout = (LinearLayout) findViewById(R.id.root_layout);
        if (mRootLayout == null) {
            return;
        }
        mRootLayout.addView(view,
                new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
        initToolbar();
    }

    /** * 初始化Toolbar */
    private void initToolbar() {
        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        if (mToolbar != null) {
            showToolbar(true);
            //mToolbar.inflateMenu(R.menu.main);
            /** 设置支持ActionBar,也可以不使用ActionBar */
            //setSupportActionBar(mToolbar);
            /** 去除ActionBar默认Title显示,可以不使用ActionBar */
            // getSupportActionBar().setDisplayShowTitleEnabled(false);
            //getSupportActionBar().setDisplayHomeAsUpEnabled(true);
            //mToolbar.setNavigationOnClickListener(null);

        }
    }

    /** * 显示Toolbar * * @param show true:显示,false:隐藏 */
    public void showToolbar(boolean show) {
        if (mToolbar == null) {
            Log.e(TAG, "Toolbar is null.");
        } else {
            int paddingTop = mToolbar.getPaddingTop();
            int paddingBottom = mToolbar.getPaddingBottom();
            int paddingLeft = mToolbar.getPaddingLeft();
            int paddingRight = mToolbar.getPaddingRight();
            int statusHeight = ScreenUtil.getStatusHeight(this);
            ViewGroup.LayoutParams params = mToolbar.getLayoutParams();
            int height = params.height;
            /** * 利用状态栏的高度,4.4及以上版本给Toolbar设置一个paddingTop值为status_bar的高度, * Toolbar延伸到status_bar顶部 **/
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
                setTranslucentStatus(show);
                if (show) {
                    paddingTop += statusHeight;
                    height += statusHeight;
                } else {
                    paddingTop -= statusHeight;
                    height -= statusHeight;
                }
            }
            params.height = height;
            mToolbar.setPadding(paddingLeft, paddingTop, paddingRight, paddingBottom);
            mToolbar.setVisibility(show ? View.VISIBLE : View.GONE);
        }
    }

    /** * 设置透明状态栏 * 对4.4及以上版本有效 * * @param on */
    @TargetApi(Build.VERSION_CODES.KITKAT)
    private void setTranslucentStatus(boolean on) {
        Window win = getWindow();
        WindowManager.LayoutParams winParams = win.getAttributes();
        final int bits = WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS;
        if (on) {
            winParams.flags |= bits;
        } else {
            winParams.flags &= ~bits;
        }
        win.setAttributes(winParams);
    }
}

获取状态栏高度

   /** * 获得状态栏的高度 * * @param context * @return px */
    public static int getStatusHeight(Context context) {

        int statusHeight = -1;
        try {
            Class<?> clazz = Class.forName("com.android.internal.R$dimen");
            Object object = clazz.newInstance();
            int height = Integer.parseInt(clazz.getField("status_bar_height").get(object).toString());
            statusHeight = context.getResources().getDimensionPixelSize(height);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return statusHeight;
    }

overflowmenu

要使用overflowmenu,需要在res->menu中定义items,我们新建一个main.xml,内容如下:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.elonlink.toolbardemo.MainActivity" >

    <item
        android:id="@+id/ab_search"
        android:orderInCategory="10"
        android:title="action_search"
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        app:showAsAction="never"
        android:title="@string/action_settings"/>
    <item
        android:id="@+id/action_settings1"
        android:orderInCategory="100"
        app:showAsAction="never"
        android:title="@string/action_settings"/>
</menu>

MainActivity布局

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.elonlink.toolbardemo.MainActivity">

</RelativeLayout> 

MainActivity

public class MainActivity extends BaseActivity implements OnClickListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        /** 设置支持ActionBar,这样就能正常显示overflowmenu了,否则设置了menu也无法在Toolbar中显示和使用 */
        setSupportActionBar(mToolbar);
        /** 去除ActionBar默认Title显示*/
        getSupportActionBar().setDisplayShowTitleEnabled(false);
    }

 @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.action_settings:
                Toast.makeText(MainActivity.this,"action_settings!",Toast.LENGTH_SHORT);
                break;
            default:
                break;
        }
        return super.onOptionsItemSelected(item);
    }
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            default:
                break;
        }
    }
}

© 著作权归作者所有

共有 人打赏支持
XngPro
粉丝 0
博文 36
码字总数 8369
作品 0
Android 沉浸式状态栏 以及 伪沉浸式状态栏

小菜最近在调整页面状态栏的效果,主要包括沉浸式状态栏和伪沉浸状态栏(同事唠嗑给定义的玩的)。 前段时间整理过一篇 Android 沉浸式状态栏的多种样式,现在小菜在稍微的补充一下,都是在日常...

阿策神奇 ⋅ 05/21 ⋅ 0

Android状态栏实现沉浸式模式

因为Android官方从来没有给出过沉浸式状态栏这样的命名,只有沉浸式模式(Immersive Mode)这种说法。而有些人在没有完全了解清楚沉浸模式到底是什么东西的情况下,就张冠李戴地认为一些系统...

津乐 ⋅ 04/20 ⋅ 0

实现沉浸式状态栏 + scrollView顶部伸缩 + actionBar渐变完美结合,打造属于自己的View

最近需求要做一个拉缩渐变的状态栏,往上拉的时候,需要显示actionBar,这个过程是渐变的,顶部的图片背景能实现拉缩,并且还要实现状态栏沉浸式 效果如如下: 实现状态栏的透明化 实现Scrol...

codeGoogle ⋅ 2017/12/15 ⋅ 0

android沉浸状态栏实现、地图多线路规划、Retrofit+RxJava+Jsoup+Mvp模式资讯类App等源码

Android精选源码 Android各种沉浸式状态栏实现源码(http://www.apkbus.com/thread-598927-1-1.html) Android自定义View实现炫酷的星期日期选择控件源码(http://www.apkbus.com/thread-59893...

逆鳞龙 ⋅ 05/08 ⋅ 0

控件解析与实战

通用适配器,支持 ListView、GridView 支持多视图 解决 CompoundButton 滑动错乱 数据排序 数据过滤 RecyclerView 详细解释 RecyclerView 是一个高度的解耦,异常的灵活的 View,通过设置它提...

掘金官方 ⋅ 2017/12/07 ⋅ 0

使用FT添加Fragment时,replace能正确实现布局的透明状态栏,而add则会向上偏移直接顶掉状态栏

使用FT添加Fragment时,replace能实现布局的透明状态栏,而add则会直接顶掉状态栏 备注:我是在Fragment的布局中实现透明状态栏和Toolbar 实现透明状态栏(沉浸式?)的方案: Fragment的布局...

一剑围城 ⋅ 2017/03/22 ⋅ 0

使用FT添加Fragment时,replace能实现布局的透明状态栏,而add则会直接向上偏移顶掉状态栏

使用FT添加Fragment时,replace能实现布局的透明状态栏,而add则会直接向上偏移顶掉状态栏 备注:我是在Fragment的布局中实现透明状态栏和Toolbar 实现透明状态栏(沉浸式?)的方案: Frag...

一剑围城 ⋅ 2017/03/22 ⋅ 1

这不是沉浸式状态栏

前言 首先请大家看几张图: 以上的效果,一般我们统称为沉浸式状态栏。其实,这种叫法不是很准确,而且也没有沉浸式状态栏这一说,只有沉浸模式。以上几种情况,可以称为透明状态栏或者状态栏...

宇是我 ⋅ 2017/08/03 ⋅ 0

android开发常用工具类、高仿客户端、附近厕所、验证码助手、相机图片处理等源码

Android精选源码 android开发过程经常要用的工具类源码(http://www.apkbus.com/thread-599826-1-1.html) Android类似QQ空间个人主页下拉头部放大的布局效果(http://www.apkbus.com/thread-5...

逆鳞龙 ⋅ 05/29 ⋅ 0

教程分享:如何实现Android沉浸式状态栏——教你让你的状态栏变个色!

一、概述 近期注意到QQ新版使用了沉浸式状态栏,ok,先声明一下:本篇博客效果下图: 关于这个状态栏变色到底叫「Immersive Mode」/「Translucent Bars」有兴趣可以去了解下。 恩,接下来正题...

科技创造 ⋅ 2015/09/27 ⋅ 2

没有更多内容

加载失败,请刷新页面

加载更多

下一页

懒惰根本就不存在

简评:芝加哥大学心理学教授,懒惰根本就不存在。(本文表面讲行为心理学实则讲教育) 金句:以好奇而不是判断来回应一个人的无效行为,是非常有帮助的。 本文「我」代表原作者 E Price。 自...

极光推送 ⋅ 25分钟前 ⋅ 0

Excel提取单元格中最后一个“.”后面的数据

java.lang.String ----- String =TRIM((MID(SUBSTITUTE(B2,".",REPT(" ",99)),(LEN(B2)-LEN(SUBSTITUTE(B2,".","")))*99,99)))...

klog ⋅ 27分钟前 ⋅ 0

mac远程桌面

下载安装remote-desktop-mac Mac beta 客户端 mac通过远程桌面访问windows服务器。

亚林瓜子 ⋅ 32分钟前 ⋅ 0

firrtl

动手---sbt(2)之后,再回头看 chisel第一个实验,根据 https://github.com/freechipsproject/firrtl 发现firrtl没有执行sbt assembly命令,重新执行这个命令,结果成功。如下图: joe@joe-As...

whoisliang ⋅ 36分钟前 ⋅ 0

NIO

一、通道(Channel):用于源节点与目标节点的连接。在 Java NIO 中负责缓冲区中数据的传输。Channel 本身不存储数据,因此需要配合缓冲区进行传输。 二、通道的主要实现类 java.nio.channel...

stars永恒 ⋅ 36分钟前 ⋅ 0

Android悬浮窗的实现

0. 前言   现在很多应用都使用到悬浮窗,例如微信在视频的时候,点击Home键,视频小窗口仍然会在屏幕上显示。这个功能在很多情况下都非常有用。那么今天我们就来实现一下Android悬浮窗,以...

猴亮屏 ⋅ 36分钟前 ⋅ 0

日志采集中的关键技术分析

概述 日志从最初面向人类演变到现在的面向机器发生了巨大的变化。最初的日志主要的消费者是软件工程师,他们通过读取日志来排查问题,如今,大量机器日夜处理日志数据以生成可读性的报告以此...

tqyin ⋅ 38分钟前 ⋅ 0

使用Navicat将数据导出为text文本 然后再导入

将数据导出为text文本效率很高 1. 准备工作 1.1 准备表结构 1.2 目标库 执行生成表结构sql 2.将表数据导出为text文本 生成的text文本 3. 目标库 导入text 4.效果...

Lucky_Me ⋅ 43分钟前 ⋅ 0

IntelliJ IDEA 乱码解决方案 (项目代码、控制台等)

文章介绍了idea下,项目乱码、控制台乱码及运行tomcat控制台乱码的解决方案,文章链接:https://www.cnblogs.com/vhua/p/idea_1.html

Funcy1122 ⋅ 46分钟前 ⋅ 0

IDEA使用sonarLint

一、IDEA如何安装SonarLint插件 1.打开 Idea 2.点击【File】 3.点击【Settings】 4.点击【Plugins】 5.在搜索栏中输入“sonarlint”关键字 6.点击【Install】进行安装 7.重启Idea 二、IDEA如...

开源中国成都区源花 ⋅ 51分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部