苹果手机里面的APP,标题栏和状态栏的颜色都是统一的,效果挺好的,这一功能在安卓上也能实现,目前很多应用也是这样的,就像下面图片中显示的这样。
今天我就来实现这种效果,并达到适配4.4以下及4.4以上的系统。其实实现起来很简单,只需简单的修改些代码即可。而且不仅可以设置颜色,设置背景为一张图片也是可以的!
下面先贴布局的代码:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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:background="@color/colorPrimary"
android:fitsSystemWindows="true"
android:orientation="vertical"
tools:context="com.zgcw.wangqiang.mytoolbar.MainActivity">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
<strong>android:background="@color/colorPrimary"</strong>
android:minHeight="?attr/actionBarSize">
<TextView
android:id="@+id/titleText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text=""
android:textColor="@color/colorTitle"
android:textSize="20sp"/>
</android.support.v7.widget.Toolbar>
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorTitle">
</ListView>
</LinearLayout>
这段代码只是一个简单的线性布局,然后用了一个Toolbar, Toolbar中是一个TextViw,用来显示Title,最后面是一个listview。重点是在布局代码中加入一行代码
android:fitsSystemWindows="true"
并且把线性布局和Toolbar的背景色统一:
android:background="@color/colorPrimary"
接下来切换工作模式为Packges下,添加两个文件values-v19和values-v21
然后打开values 下得styles文件,做如下编辑
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<style name="MyTheme" parent="AppTheme">
</style>
</resources>
只是添加了一个自定义主题,其他都做任何改变。
接着复制这个styles文件分别到v19和v21下面。
values-v19下得styles代码如下:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<style name="MyTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
</style>
</resources>
重点在于必须保证 style name="MyTheme" 在三个styles下保持一致。
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
这两行代码就是设置状态栏为透明和标题栏为透明。
values-v21下得styles代码如下:与v19有所不同:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<style name="MyTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:windowTranslucentStatus">false</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:statusBarColor">@android:color/transparent</item>
</style>
</resources>
v21下(5.0之后)
<item name="android:windowTranslucentStatus">false</item>
设置为false,不是true.并且需要设置状态栏颜色:意思为透明。
<item name="android:statusBarColor">@android:color/transparent</item>
这样的话,三个文件就设置好了。
然后切换成android状态下,修改一下资源文件AndroidManifest.xml 下得activity
<activity android:name=".MainActivity"
android:theme="@style/MyTheme">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
添加
android:theme="@style/MyTheme"
OK 然后回到我们的MainActivity中:
package com.zgcw.wangqiang.mytoolbar;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Window;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
private Toolbar mToolbar;
private TextView mTextView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
<strong> supportRequestWindowFeature(Window.FEATURE_NO_TITLE);</strong>
setContentView(R.layout.activity_main);
mToolbar = (Toolbar) findViewById(R.id.toolbar);
mTextView = (TextView) findViewById(R.id.titleText);
mToolbar.setNavigationIcon(R.mipmap.chevron);
mTextView.setText("中古车网");
}
}
重点在于加一行代码,去掉原来的actionBar(其实修改资源文件的主题也能实现,懒得改那个了就在代码里实现了)
supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
然后看下运行效果吧
这个就是现在的最终效果。如何想背景是一张背景图片,只需修改布局文件和Toolbar的background为一张图片就可以了。
这个只是个最简单的实现方法,大家可以在这个基础上做更多的定制与修改,大致思路就是这样。