안 드 로 이 드 멋 진 상단 표시 줄 구현

AppBarLayout 는 LinerLayout 의 실현 을 계승 하 는 View Group 용기 구성 요소 입 니 다.Material Design 을 위해 디자인 된 App Bar 입 니 다.제스처 슬라이딩 작업 을 지원 하지만 Toolbar,Coordinator Layout,Collapsing Toolbar Layout 등 과 함께 자주 사용 합 니 다.AppBarLayout 에 대해 이야기 하기 전에 Toolbar 를 간단하게 배 워 보 겠 습 니 다.여느 때 와 마찬가지 로 주로 제 가 공부 하 는 과정 에서 의 필기 와 주의해 야 할 부분 을 정리 하고 싶 습 니 다.
도구 모음
Toolbar 는 Android 5.0 에서 출시 되 기 시작 한 Material Design 스타일 의 네 비게 이 션 컨트롤 입 니 다.Google 은 이전의 Actionbar 대신 Toolbar 를 사용 하 는 것 을 추천 합 니 다.즉,ActionBar 가 할 수 있 는 것 은 Toolbar 가 할 수 있 는 것 입 니 다.액 션 바 에 비해 툴 바 는 훨씬 유연 하 다.이것 은 Actionbar 처럼 반드시 Activity 의 상단 에 고정 시 키 지 않 고 인터페이스의 임 의 위치 에 놓 을 수 있다.이외에 도 툴 바 를 디자인 할 때 Google 은 수정 할 수 있 는 여 지 를 많이 남 겨 주 었 습 니 다.
 •탐색 표시 줄 아이콘 설정
 •App 로고 설정
 •제목 과 하위 제목 설정
 •하나 이상 의 사용자 정의 컨트롤 추가
 •액 션 메뉴 설정 
쉽게 이해 하기 위해 서 효과 도 를 살 펴 보 자.

효과 도 에 따 르 면 왼쪽 에서 오른쪽으로 네 비게 이 션 표시 줄 아이콘,App 의 로고,제목 과 하위 제목,사용자 정의 컨트롤(TextView 와 ImageView)과 Action Menu 가 있 습 니 다.
1.툴 바 를 사용 할 때 는 먼저 원래 의 ActionBar 를 숨겨 야 합 니 다.
(1)styles.xml 파일 의 AppTheme 탭 에 다음 속성 을 설정 합 니 다.
false
true
(2)저희 가 계승 한 주 제 는 Theme.AppCompat.Light.NoAction Bar 입 니 다.

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <item name="colorPrimary">@color/blue</item>
  <item name="colorPrimaryDark">@color/blue_dark</item>
  <item name="colorAccent">@color/red</item>
  <item name="textAllCaps">false</item>
 </style>

(3)Activity 에서 다음 문장 을 호출 하여 기본 탐색 표시 줄 을 제거 합 니 다.
supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
2.레이아웃 파일 에 우리 가 필요 로 하 는 Toolbar 컨트롤 을 추가 합 니 다.

<?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="match_parent"
 android:orientation="vertical">

 <android.support.v7.widget.Toolbar
  android:id="@+id/toolbar"
  android:layout_width="match_parent"
  android:layout_height="?android:actionBarSize"
  android:background="?attr/colorPrimary">
  <!--     -->
  <TextView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="  " />

  <ImageView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_marginLeft="2dp"
   android:src="@mipmap/icon" />
 </android.support.v7.widget.Toolbar>
</LinearLayout>

3、이어서 menumain.xml 에 action menu 메뉴 항목 추가

<menu xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto">
 <item
  android:id="@+id/add"
  android:icon="@mipmap/icon_add"
  app:showAsAction="always" />
 <item
  android:id="@+id/add_friend"
  android:title="    "
  app:showAsAction="never" />
 <item
  android:id="@+id/scace"
  android:title="   "
  app:showAsAction="never" />
</menu>

4.Activity 에서 Toolbar 컨트롤 을 초기 화하 고 해당 하 는 속성 을 설정 합 니 다.

package per.lijuan.appbarlayoutdome;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.Window;
import android.widget.Toast;

/**
 * Created by lijuan on 2016/8/31.
 */
public class Activity extends AppCompatActivity {
 private Toolbar toolbar;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
  setContentView(R.layout.activity_second);
  toolbar = (Toolbar) findViewById(R.id.toolbar);

  /**
   *     
   */
  toolbar.setTitle("  ");
  /**
   *      
   */
  toolbar.setSubtitle("   ");
  /**
   *   App logo
   */
  toolbar.setLogo(R.mipmap.ic_launcher);
  /**
   *       
   */
  toolbar.setNavigationIcon(R.mipmap.back);
  setSupportActionBar(toolbar);
 }

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

 /**
  *       o   
  *
  * @return
  */
 @Override
 public boolean onOptionsItemSelected(MenuItem item) {
  switch (item.getItemId()) {
   case android.R.id.home:
    finish();
    break;
   case R.id.add:
    Toast.makeText(SecondActivity.this, "  ", Toast.LENGTH_SHORT).show();
    break;
   case R.id.add_friend:
    Toast.makeText(SecondActivity.this, "    ", Toast.LENGTH_SHORT).show();
    break;
   case R.id.scace:
    Toast.makeText(SecondActivity.this, "   ", Toast.LENGTH_SHORT).show();
    break;
   default:
    break;
  }
  return super.onOptionsItemSelected(item);
 }
}

2.Collapsing ToolbarLayout
Collapsing Toolbar Layout 역할 은 접 을 수 있 는 Toolbar 를 제공 합 니 다.FrameLayout 에 계승 하여 layot 를 설정 합 니 다.scrollFlags,Collapsing Toolbar Layout 에 포 함 된 컨트롤(예:ImageView,Toolbar)이 layot 에 응답 하 는 것 을 제어 할 수 있 습 니 다.behavior 이벤트 에 해당 하 는 scrollFlags 스크롤 이벤트(화면 을 제거 하거나 화면 맨 위 에 고정)
3.AppBarLayout
최종 효과 도 를 살 펴 보 자.

효과 도 를 보면 layot 가 설정 되 어 있 을 때behavior 컨트롤 이 CollapsingToolbarLayout 의 layot 에 응답 합 니 다.scrollFlags 이벤트 때 ImageView 는 시차 효과 가 있 는 위로 스크롤 하여 화면 을 제거 합 니 다.접 기 시작 할 때 Collapsing Toolbar Layout 의 배경 색(즉,Toolbar 의 배경 색)은 우리 가 설정 한 배경 색 으로 변 하고 Toolbar 도 항상 맨 위 에 고정 합 니 다.
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:layout_width="match_parent"
 android:layout_height="match_parent">

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

  <android.support.design.widget.CollapsingToolbarLayout
   android:id="@+id/collapsing_toolbar_layout"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:contentScrim="#3F51B5"
   app:layout_scrollFlags="scroll|exitUntilCollapsed">

   <ImageView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:src="@mipmap/icon_bg"
    app:layout_collapseMode="parallax"
    app:layout_collapseParallaxMultiplier="0.5" />

   <android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="56dp"
    app:layout_collapseMode="pin"
    app:title="@string/app_name"
    app:titleTextColor="#FFFFFF" />

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

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

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

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

(1)저 희 는 Collapsing Toolbar Layout 에 ImageView 와 Toolbar 를 설정 하고 이 Collapsing Toolbar Layout 를 하나의 전체 로 AppBarLayout 에 두 었 습 니 다.
(2)Collapsing ToolbarLayout 에서 app:layot 을 설 치 했 습 니 다.scrollFlags="scroll|enterAlways Collapsed"값 은 다음 과 같 습 니 다.
 •스크롤-스크롤 하려 면 이것 을 설정 해 야 합 니 다.즉,값 을 스크롤 로 설정 한 View 는 스크롤 이벤트 와 함께 스크롤 합 니 다.
◦enterAlways-값 은 enterAlways 의 View 로 설정 되 어 있 으 며,RecyclerView 가 아래로 굴 러 갈 때 이 View 는 바로 아래로 굴 러 갑 니 다.
 ◦exit UntilCollapsed-값 은 exit UntilCollapsed View 로 설정 되 어 있 으 며,이 View 가 위로 점점'사라 짐'될 때 까지 계속 위로 미 끄 러 지 며,나머지 높이 가 최소 높이 에 이 를 때 까지 RecyclerView 의 내부 미끄럼 이벤트 에 응답 합 니 다.
 ◦enterAlways Collapsed-enterAlways Collapsed 로 설 정 된 View 가 minHeight 속성 을 설정 하고 이 플래그 를 사용 할 때 이 View 는 최소 높이 로 만 들 어 갈 수 있 습 니 다.스크롤 보기 가 상단 에 도 착 했 을 때 만 전체 높이 로 확 대 됩 니 다. 
또한 app:contentScrim="\#3F51B 5"는 완전 Collapsing ToolbarLayout 접 기(수축)후의 배경 색 을 말 합 니 다.
(3)ImageView 컨트롤 에 app:layout 을 설 정 했 습 니 다.collapseMode="parallax"，layout_collapse Mode(접 기 모드)-두 개의 값 이 있 습 니 다.
 •pin-이 모드 로 설정 되 었 을 때 Collapsing Toolbar Layout 가 완전히 수축 되면 Toolbar 는 화면 에 남 길 수 있 습 니 다.
 •parallax-이 모드 로 설정 되 었 을 때 내용 이 굴 러 갈 때 Collapsing ToolbarLayout 의 View(예 를 들 어 ImageView)도 동시에 굴 러 시차 스크롤 효 과 를 실현 할 수 있 습 니 다.보통 layotcollapseParallax Multiplier(시차 인자 설정)조합 사용 
다른 app:layoutcollapseParallax Multiplier="0.5"시차 스크롤 인 자 를 설정 합 니 다.값 은 0~1 입 니 다.
(4)Toolbar 컨트롤 에 layot 를 설 치 했 습 니 다.collapse Mode(접 기 모드):pin
MainActivity.class

package com.per.appbarlayout;

import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
 public Toolbar mToolbar;
 private RecyclerView mRecyclerView;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);

  mToolbar = (Toolbar) findViewById(R.id.toolbar);
  mToolbar.setTitleTextColor(Color.GREEN);
  mToolbar.setTitle("AppBarLayout");
  setSupportActionBar(mToolbar);

  getSupportActionBar().setHomeButtonEnabled(true);
  getSupportActionBar().setDisplayHomeAsUpEnabled(true);

  mRecyclerView = (RecyclerView) findViewById(R.id.recyclerview);
  mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
  mRecyclerView.setAdapter(new ContentAdapter());

  CollapsingToolbarLayout mCollapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout);
  //  CollapsingToolbarLayout  title
  mCollapsingToolbarLayout.setTitle("AppBarLayout");
  //  CollapsingToolbarLayout      
  mCollapsingToolbarLayout.setExpandedTitleColor(Color.WHITE);//              
  mCollapsingToolbarLayout.setCollapsedTitleTextColor(Color.RED);//     Toolbar      
 }

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

 @Override
 public boolean onOptionsItemSelected(MenuItem item) {
  switch (item.getItemId()) {
   case android.R.id.home:
    finish();
    break;
  }
  return super.onOptionsItemSelected(item);
 }

 private class ContentAdapter extends RecyclerView.Adapter<ContentAdapter.ContentHolder> {
  @Override
  public ContentAdapter.ContentHolder onCreateViewHolder(ViewGroup parent, int viewType) {
   return new ContentHolder(LayoutInflater.from(MainActivity.this).inflate(android.R.layout.simple_list_item_1, parent, false));
  }

  @Override
  public void onBindViewHolder(ContentAdapter.ContentHolder holder, int position) {
   holder.itemTv.setText("item");
  }

  @Override
  public int getItemCount() {
   return 35;
  }

  class ContentHolder extends RecyclerView.ViewHolder {

   private TextView itemTv;

   public ContentHolder(View itemView) {
    super(itemView);
    itemTv = (TextView) itemView.findViewById(android.R.id.text1);
   }
  }
 }
}

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.