Android實現(xiàn)酷炫的頂部欄
AppBarLayout 是繼承LinerLayout實現(xiàn)的一個ViewGroup容器組件，它是為了Material Design設(shè)計的App Bar，支持手勢滑動操作的，不過經(jīng)常與Toolbar、CoordinatorLayout以及CollapsingToolbarLayout等一起配合使用，在說到AppBarLayout之前，我們先簡單學(xué)習(xí)一下Toolbar。和往常一樣，主要還是想總結(jié)一下我在學(xué)習(xí)過程中的一些筆記以及一些需要注意的地方。
一、Toolbar
Toolbar是在 Android 5.0 開始推出的一個 Material Design 風(fēng)格的導(dǎo)航控件 ，Google 非常推薦大家使用 Toolbar 來作為Android客戶端的導(dǎo)航欄，以此來取代之前的 Actionbar，也就是說，ActionBar能做的，Toolbar都能做 。與 Actionbar 相比， Toolbar 要靈活的多。它不像 Actionbar 一樣，一定要固定在Activity的頂部，而是可以放到界面的任意位置。除此之外，在設(shè)計 Toolbar 的時候，Google也留給我們很多可以修改的余地
•設(shè)置導(dǎo)航欄圖標
•設(shè)置App的logo
•設(shè)置標題和子標題
•添加一個或多個的自定義控件
•設(shè)置Action Menu
為了容易理解，我們先看看效果圖：
按照效果圖，從左到右分別是導(dǎo)航欄圖標 、App的logo 、 標題和子標題 、 自定義控件（一個TextView和ImageView） 以及 ActionMenu
1、用Toolbar的時候，首先要隱藏原本的ActionBar
（1）通過在我們的styles.xml文件中的AppTheme標簽中設(shè)置以下屬性：
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
（2）通過修改我們繼承的主題為：Theme.AppCompat.Light.NoActionBar
<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中調(diào)用下面這句，去掉了默認的導(dǎo)航欄
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、接著在 menu_main.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 控件，并設(shè)置相對應(yīng)的屬性
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);
/**
* 設(shè)置標題
*/
toolbar.setTitle("標題");
/**
* 設(shè)置子標題
*/
toolbar.setSubtitle("子標題");
/**
* 設(shè)置App的logo
*/
toolbar.setLogo(R.mipmap.ic_launcher);
/**
* 設(shè)置導(dǎo)航按鈕
*/
toolbar.setNavigationIcon(R.mipmap.back);
setSupportActionBar(toolbar);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
/**
* 設(shè)定菜單各按鈕的動作
*
* @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);
}
}
二、CollapsingToolbarLayout
CollapsingToolbarLayout作用是提供了一個可以折疊的Toolbar，它繼承至FrameLayout，給它設(shè)置layout_scrollFlags，它可以控制包含在CollapsingToolbarLayout中的控件(如：ImageView、Toolbar)在響應(yīng)layout_behavior事件時作出相應(yīng)的scrollFlags滾動事件(移除屏幕或固定在屏幕頂端)
三、AppBarLayout
我們來看看最終的效果圖：
從效果圖來看，當設(shè)置了layout_behavior的控件響應(yīng)起了CollapsingToolbarLayout中的layout_scrollFlags事件時，ImageView會有視差效果的向上滾動移除屏幕，當開始折疊時，CollapsingToolbarLayout的背景色(也就是Toolbar的背景色)就會變?yōu)槲覀冊O(shè)置好的背景色，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）我們在CollapsingToolbarLayout中設(shè)置了一個ImageView和一個Toolbar，并將這個CollapsingToolbarLayout作為一個整體放在AppBarLayout中
（2）在CollapsingToolbarLayout中，我們設(shè)置了app:layout_scrollFlags="scroll|enterAlwaysCollapsed"，它的值還包括：
•scroll - 想滾動就必須設(shè)置這個，也就是說值設(shè)為scroll的View會跟隨滾動事件一起滾動
◦enterAlways - 值設(shè)為enterAlways的View,當RecyclerView往下滾動時，該View會直接往下滾動
◦exitUntilCollapsed - 值設(shè)為exitUntilCollapsed的View，當這個View要往上逐漸“消逝”時，會一直往上滑動，直到剩下的的高度達到它的最小高度后，再響應(yīng)RecyclerView的內(nèi)部滑動事件。
◦enterAlwaysCollapsed - 當值設(shè)為enterAlwaysCollapsed 的View已經(jīng)設(shè)置minHeight屬性又使用此標志時，這個View只能以最小高度進入，只有當滾動視圖到達頂部時才擴大到完整高度
另外app:contentScrim="#3F51B5"是指當完全CollapsingToolbarLayout折疊(收縮)后的背景顏色
（3）在ImageView控件中，我們設(shè)置了app:layout_collapseMode="parallax"，layout_collapseMode (折疊模式) - 有兩個值:
•pin - 設(shè)置為這個模式時，當CollapsingToolbarLayout完全收縮后，Toolbar還可以保留在屏幕上
•parallax - 設(shè)置為這個模式時，在內(nèi)容滾動時，CollapsingToolbarLayout中的View（比如ImageView)也可以同時滾動，實現(xiàn)視差滾動效果，通常和layout_collapseParallaxMultiplier(設(shè)置視差因子)搭配使用
另外app:layout_collapseParallaxMultiplier="0.5"設(shè)置視差滾動因子，值為：0~1
（4）在Toolbar控件中，我們設(shè)置了layout_collapseMode(折疊模式)：為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設(shè)置title
mCollapsingToolbarLayout.setTitle("AppBarLayout");
//通過CollapsingToolbarLayout修改字體顏色
mCollapsingToolbarLayout.setExpandedTitleColor(Color.WHITE);//設(shè)置還沒收縮時狀態(tài)下字體顏色
mCollapsingToolbarLayout.setCollapsedTitleTextColor(Color.RED);//設(shè)置收縮后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);
}
}
}
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- Android仿網(wǎng)易客戶端頂部導(dǎo)航欄效果
- Android項目實戰(zhàn)之仿網(wǎng)易頂部導(dǎo)航欄效果
- Android自定義View之組合控件實現(xiàn)類似電商app頂部欄
- 3種Android隱藏頂部狀態(tài)欄及標題欄的方法
- Android頂部工具欄和底部工具欄的簡單實現(xiàn)代碼
- Android實現(xiàn)沉浸式導(dǎo)航欄實例代碼
- Android程序開發(fā)之Fragment實現(xiàn)底部導(dǎo)航欄實例代碼
- Android實現(xiàn)沉浸式通知欄通知欄背景顏色跟隨app導(dǎo)航欄背景顏色而改變
- Android實現(xiàn)底部導(dǎo)航欄功能（選項卡）
- android底部菜單欄實現(xiàn)原理與代碼
相關(guān)文章
這篇文章主要為大家詳細介紹了Android實現(xiàn)記事本功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
Android自定義View實現(xiàn)豎向滑動回彈效果
這篇文章主要為大家詳細介紹了Android自定義View實現(xiàn)滑動回彈效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了Android編程獲取組件尺寸大小的方法,結(jié)合實例形式分析了Android繪制組件之前獲取該組件大小的3種常見操作技巧,需要的朋友可以參考下2017-03-03
這篇文章主要為大家詳細介紹了Android RecyclerView滾動定位的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
安裝時加入外部數(shù)據(jù)庫示例(android外部數(shù)據(jù)庫)
這篇文章主要介紹了android打包安裝時加入外部數(shù)據(jù)庫的示例,需要的朋友可以參考下2014-03-03
這篇文章主要介紹了Retrofit之OKHttpCall源碼分析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
今天小編就為大家分享一篇Android 保存文件路徑方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了Android基于Pull方式解析xml的方法,結(jié)合實例形式詳細分析了Pull方式解析xml的原理、操作步驟與相關(guān)技巧,需要的朋友可以參考下2016-07-07
Android Activity的生命周期與加載模式超詳細圖文解析
這篇文章主要介紹了Android Activity的生命周期與加載模式，本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-02-02
Android總結(jié)之WebView與Javascript交互（互相調(diào)用）
本篇文章主要介紹了WebView與Javascript進行數(shù)據(jù)交互，詳解的講訴了WebView與Javascript進行數(shù)據(jù)交互的方法，有興趣的可以了解一下。2016-11-11