Android App QQ 를 모방 하여 Material Design 스타일 몰입 형 상태 표시 줄 만 들 기

개술
최근 에 QQ 새 버 전이 몰입 식 상태 표시 줄 을 사 용 했 음 을 알 게 되 었 습 니 다.ok,먼저 효과 도 를 설명 하 겠 습 니 다.

응,다음 본론.
우선 4.4 버 전 이상 만 이 반투명 상태 표시 줄 의 효 과 를 지원 하지만 4.4 와 5.0 의 디 스 플레이 효 과 는 어느 정도 차이 가 있 습 니 다.모든 본 고 는 다음 과 같 습 니 다.
1.반투명 상태 표시 줄 효 과 는 4.4 버 전 이상 입 니 다.
2.4.4 의 효 과 를 5.0 의 효과 와 가능 한 한 일치 시 키 는 방법.
먼저 시 뮬 레이 터 효과 도 를 붙 여 실현 과정 과 대비 하도록 한다.
4.4 시 뮬 레이 터

5.컴퓨터

2.반투명 상태 표시 줄 실현
이 사례 는 NavigationView 를 사 용 했 기 때문에 레이아웃 코드 가 약간 많 습 니 다.물론 필요 하지 않 으 면 스스로 줄 일 수 있 습 니 다.
관련 의존 도입 주의:

 compile 'com.android.support:appcompat-v7:22.2.1'
 compile 'com.android.support:support-v4:22.2.1'
 compile 'com.android.support:design:22.2.0'

1.colors.xml 와 styles.xml
우선 몇 가지 색상 을 정의 합 니 다.
res/values/color.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <color name="primary">#FF03A9F4</color>
  <color name="primary_dark">#FF0288D1</color>
  <color name="status_bar_color">@color/primary_dark</color>
</resources>

다음은 styles.xml 몇 개 를 정의 합 니 다.
폴 더 경로 주의:
values/styles.xml

<resources>
  <style name="BaseAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primary_dark</item>
    <item name="colorAccent">#FF4081</item>
  </style>

  <!-- Base application theme. -->
  <style name="AppTheme" parent="@style/BaseAppTheme">
  </style>
</resources>

values-v19

<resources>

  <style name="AppTheme" parent="@style/BaseAppTheme">
    <item name="android:windowTranslucentStatus">true</item>
  </style>
</resources>

ok,이 건 말 안 했 어.우리 의 주 제 는 NoAction Bar 를 기반 으로 한 것 입 니 다.Android:window Translucent Status 라 는 속성 은 v19 에서 도입 되 기 시 작 했 습 니 다.
2.레이아웃 파일
activity_main.xml

<android.support.v4.widget.DrawerLayout
  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"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  >


  <LinearLayout
    android:id="@+id/id_main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
      android:id="@+id/id_toolbar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="?attr/colorPrimary"
      android:fitsSystemWindows="true"
      app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>


    <TextView
      android:id="@+id/id_tv_content"
      android:layout_width="match_parent"
      android:layout_height="0dp"
      android:layout_weight="1"
      android:gravity="center"
      android:text="HelloWorld"
      android:textSize="30sp"/>
  </LinearLayout>


  <android.support.design.widget.NavigationView
    android:id="@+id/id_nv_menu"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/header_just_username"
    app:menu="@menu/menu_drawer"
    />
</android.support.v4.widget.DrawerLayout>

DrawerLayout 내부 에 LinearLayout 를 콘 텐 츠 영역 으로 하고 NavigationView 를 메뉴 로 합 니 다.
Toolbar 의 높이 를 wrap 로 설정 하 는 것 을 주의 하 십시오.content。
그리고 우리 Navigation View 에 서 는 레이아웃 파일 과 menu 파일 에 의존 합 니 다.
header_just_username.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="192dp"
        android:background="?attr/colorPrimaryDark"
        android:orientation="vertical"
        android:padding="16dp"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark">

  <TextView
    android:id="@+id/id_link"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_marginBottom="16dp"
    android:text="http://blog.csdn.net/lmj623565791"/>

  <TextView
    android:id="@+id/id_username"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@id/id_link"
    android:text="Zhang Hongyang"/>

  <ImageView
    android:layout_width="72dp"
    android:layout_height="72dp"
    android:layout_above="@id/id_username"
    android:layout_marginBottom="16dp"
    android:src="@mipmap/ic_launcher"/>


</RelativeLayout>

menu 의 파일 은 붙 이지 않 습 니 다.더 자세 한 것 은 안 드 로 이 드 가 스스로 NavigationView[Design Support Library(1)]를 실현 하 는 것 을 참고 할 수 있 습 니 다.
레이아웃 파일 을 대충 본 후에 몇 가지 주의해 야 할 점 이 있 습 니 다.
(1)Toolbar 높이 를 wrap 로 설정content
(2)Toolbar 속성 추가 android:fitsSystem Windows="true"
（3）header_just_username.xml 의 레이아웃 RelativeLayout 와 속성 을 추가 합 니 다.android:fitsSystem Windows="true"
(4)android:fitsSystemWindows 이 속성 은 현재 이 속성 을 설정 한 view 의 padding 을 조정 하여 우리 의 statusbar 공간 남기 기.
위의 설명 에 따 르 면,만약 당신 이 쓰 지 않 는 다 면,상태 표시 줄 과 Toolbar 는 한데 뭉 친 느낌 이 들 것 이다.이와 유사 하 다.

ok,마지막 으로 코드 를 보 세 요.
3.Activity 의 코드

package com.zhy.colorfulstatusbar;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;

public class MainActivity extends AppCompatActivity
{

  @Override
  protected void onCreate(Bundle savedInstanceState)
  {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar toolbar = (Toolbar) findViewById(R.id.id_toolbar);
    setSupportActionBar(toolbar);
    //StatusBarCompat.compat(this, getResources().getColor(R.color.status_bar_color));
    //StatusBarCompat.compat(this);
  }

}

말 하지 않 은 것 이 바로 set Support Action Bar 입 니 다.
그럼 현재 4.4 의 효과 도 는:

사실 괜찮아 요.그 라 데 이 션 효과 가 있어 요.
현재 5.x 의 효과:

5.x 기본 값 은 그 라 데 이 션 효과 가 아니 라 진 한 색 과 유사 합 니 다.
우리 md 의 규범 을 보고 있 습 니 다.

상태 표시 줄 은 Toolbar 배경 색 보다 약간 진 한 색 이 어야 합 니 다.
이렇게 보면 우 리 는 4.4 를 위해 적당 한 일 을 해서 5.x 와 효과 가 일치 하거나 가능 한 한 md 의 규범 에 부합 하도록 할 필요 가 있다.
3.4.4 디 스 플레이 방안 조정
그럼 문제 가 왔 나 요?어떻게 할 까요?
우리 가 이렇게 보면 4.4 이후 에 윈도 우즈 Translucent Status 의 속성 을 추가 한 후에,즉 우리 가 상태 표시 줄 을 사용 할 수 있 는 구역 이다.
이 구역 을 사용 할 수 있 으 니 루트 레이아웃 에 상태 표시 줄 등 높 은 View 를 설정 하고 배경 색 을 원 하 는 색 으로 설정 하면 됩 니 다.
그래서 다음 코드 가 생 겼 습 니 다.

package com.zhy.colorfulstatusbar;

import android.annotation.TargetApi;
import android.app.Activity;
import android.content.Context;
import android.graphics.Color;
import android.os.Build;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by zhy on 15/9/21.
 */
public class StatusBarCompat
{
  private static final int INVALID_VAL = -1;
  private static final int COLOR_DEFAULT = Color.parseColor("#20000000");

  @TargetApi(Build.VERSION_CODES.LOLLIPOP)
  public static void compat(Activity activity, int statusColor)
  {

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)
    {
      if (statusColor != INVALID_VAL)
      {
        activity.getWindow().setStatusBarColor(statusColor);
      }
      return;
    }

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT && Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP)
    {
      int color = COLOR_DEFAULT;
      ViewGroup contentView = (ViewGroup) activity.findViewById(android.R.id.content);
      if (statusColor != INVALID_VAL)
      {
        color = statusColor;
      }
      View statusBarView = new View(activity);
      ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
          getStatusBarHeight(activity));
      statusBarView.setBackgroundColor(color);
      contentView.addView(statusBarView, lp);
    }

  }

  public static void compat(Activity activity)
  {
    compat(activity, INVALID_VAL);
  }


  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;
  }
}

코드 의 사고방식 은 매우 간단 합 니 다.Activity 에 따라 android.R.content 를 찾 아서 그 안에 View(높이 는 status bar Height 이 고 배경 색 은 우리 가 설정 한 색 입 니 다.기본 값 은 반투명 한 검은색 입 니 다)를 추가 합 니 다.
그러면 Activity 에 적어 주세요.

StatusBarCompat.compat(this);

됐 습 니 다.
만약 당신 이 상 태 를 설정 해서 색깔 을 보 기 를 원한 다 면,이 방법 을 사용 하 세 요.

StatusBarCompat.compat(this, getResources().getColor(R.color.status_bar_color));

이렇게 되면 우 리 는 4.4 에서 5.x 의 적합 한 문 제 를 해결 하고 한 줄 의 코드 가 해결 되 었 으 니 괜 찮 은 것 같다.
마지막 으로 5.0 에 대해 서 는 setStatusBarColor 를 제공 하여 상태 표시 줄 색상 을 설정 하지만 이 방법 은 테마 에 window Translucent Status 속성 을 설정 할 수 없습니다.그래서 value-v21 폴 더 를 만 들 수 있 습 니 다.안에 styles.xml 을 기록 할 수 있 습 니 다:

<resources>
  <!-- Base application theme. -->
  <style name="AppTheme" parent="@style/BaseAppTheme">
  </style>
</resources>

사실은 window Translucent Status 속성 이 없 는 거 야.
다음은 기본 효과 에 대해 테스트 하지 않 고 위의 효과 도 를 참고 하 세 요.
상태 표시 줄 색상 을 테스트 합 니 다.빨간색 을 설정 합 니 다.
4.4 시 뮬 레이 터

5.컴퓨터

오케이,이제 끝 이 야~~