Android實(shí)現(xiàn)酷炫的頂部欄
AppBarLayout 是繼承LinerLayout實(shí)現(xiàn)的一個(gè)ViewGroup容器組件，它是為了Material Design設(shè)計(jì)的App Bar，支持手勢(shì)滑動(dòng)操作的，不過(guò)經(jīng)常與Toolbar、CoordinatorLayout以及CollapsingToolbarLayout等一起配合使用，在說(shuō)到AppBarLayout之前，我們先簡(jiǎn)單學(xué)習(xí)一下Toolbar。和往常一樣，主要還是想總結(jié)一下我在學(xué)習(xí)過(guò)程中的一些筆記以及一些需要注意的地方。
一、Toolbar
Toolbar是在 Android 5.0 開(kāi)始推出的一個(gè) Material Design 風(fēng)格的導(dǎo)航控件 ，Google 非常推薦大家使用 Toolbar 來(lái)作為Android客戶端的導(dǎo)航欄，以此來(lái)取代之前的 Actionbar，也就是說(shuō)，ActionBar能做的，Toolbar都能做 。與 Actionbar 相比， Toolbar 要靈活的多。它不像 Actionbar 一樣，一定要固定在Activity的頂部，而是可以放到界面的任意位置。除此之外，在設(shè)計(jì) Toolbar 的時(shí)候，Google也留給我們很多可以修改的余地
•設(shè)置導(dǎo)航欄圖標(biāo)
•設(shè)置App的logo
•設(shè)置標(biāo)題和子標(biāo)題
•添加一個(gè)或多個(gè)的自定義控件
•設(shè)置Action Menu
為了容易理解，我們先看看效果圖：
按照效果圖，從左到右分別是導(dǎo)航欄圖標(biāo) 、App的logo 、 標(biāo)題和子標(biāo)題 、 自定義控件（一個(gè)TextView和ImageView） 以及 ActionMenu
1、用Toolbar的時(shí)候，首先要隱藏原本的ActionBar
（1）通過(guò)在我們的styles.xml文件中的AppTheme標(biāo)簽中設(shè)置以下屬性：
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
（2）通過(guò)修改我們繼承的主題為：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)用下面這句，去掉了默認(rèn)的導(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="點(diǎn)擊" /> <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 菜單項(xiàng)
<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è)置相對(duì)應(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è)置標(biāo)題
*/
toolbar.setTitle("標(biāo)題");
/**
* 設(shè)置子標(biāo)題
*/
toolbar.setSubtitle("子標(biāo)題");
/**
* 設(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è)定菜單各按鈕的動(dòng)作
*
* @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作用是提供了一個(gè)可以折疊的Toolbar，它繼承至FrameLayout，給它設(shè)置layout_scrollFlags，它可以控制包含在CollapsingToolbarLayout中的控件(如：ImageView、Toolbar)在響應(yīng)layout_behavior事件時(shí)作出相應(yīng)的scrollFlags滾動(dòng)事件(移除屏幕或固定在屏幕頂端)
三、AppBarLayout
我們來(lái)看看最終的效果圖：
從效果圖來(lái)看，當(dāng)設(shè)置了layout_behavior的控件響應(yīng)起了CollapsingToolbarLayout中的layout_scrollFlags事件時(shí)，ImageView會(huì)有視差效果的向上滾動(dòng)移除屏幕，當(dāng)開(kāi)始折疊時(shí)，CollapsingToolbarLayout的背景色(也就是Toolbar的背景色)就會(huì)變?yōu)槲覀冊(cè)O(shè)置好的背景色，Toolbar也一直會(huì)固定在最頂端
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）我們?cè)贑ollapsingToolbarLayout中設(shè)置了一個(gè)ImageView和一個(gè)Toolbar，并將這個(gè)CollapsingToolbarLayout作為一個(gè)整體放在AppBarLayout中
（2）在CollapsingToolbarLayout中，我們?cè)O(shè)置了app:layout_scrollFlags="scroll|enterAlwaysCollapsed"，它的值還包括：
•scroll - 想滾動(dòng)就必須設(shè)置這個(gè)，也就是說(shuō)值設(shè)為scroll的View會(huì)跟隨滾動(dòng)事件一起滾動(dòng)
◦enterAlways - 值設(shè)為enterAlways的View,當(dāng)RecyclerView往下滾動(dòng)時(shí)，該View會(huì)直接往下滾動(dòng)
◦exitUntilCollapsed - 值設(shè)為exitUntilCollapsed的View，當(dāng)這個(gè)View要往上逐漸“消逝”時(shí)，會(huì)一直往上滑動(dòng)，直到剩下的的高度達(dá)到它的最小高度后，再響應(yīng)RecyclerView的內(nèi)部滑動(dòng)事件。
◦enterAlwaysCollapsed - 當(dāng)值設(shè)為enterAlwaysCollapsed 的View已經(jīng)設(shè)置minHeight屬性又使用此標(biāo)志時(shí)，這個(gè)View只能以最小高度進(jìn)入，只有當(dāng)滾動(dòng)視圖到達(dá)頂部時(shí)才擴(kuò)大到完整高度
另外app:contentScrim="#3F51B5"是指當(dāng)完全CollapsingToolbarLayout折疊(收縮)后的背景顏色
（3）在ImageView控件中，我們?cè)O(shè)置了app:layout_collapseMode="parallax"，layout_collapseMode (折疊模式) - 有兩個(gè)值:
•pin - 設(shè)置為這個(gè)模式時(shí)，當(dāng)CollapsingToolbarLayout完全收縮后，Toolbar還可以保留在屏幕上
•parallax - 設(shè)置為這個(gè)模式時(shí)，在內(nèi)容滾動(dòng)時(shí)，CollapsingToolbarLayout中的View（比如ImageView)也可以同時(shí)滾動(dòng)，實(shí)現(xiàn)視差滾動(dòng)效果，通常和layout_collapseParallaxMultiplier(設(shè)置視差因子)搭配使用
另外app:layout_collapseParallaxMultiplier="0.5"設(shè)置視差滾動(dòng)因子，值為：0~1
（4）在Toolbar控件中，我們?cè)O(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);
//通過(guò)CollapsingToolbarLayout設(shè)置title
mCollapsingToolbarLayout.setTitle("AppBarLayout");
//通過(guò)CollapsingToolbarLayout修改字體顏色
mCollapsingToolbarLayout.setExpandedTitleColor(Color.WHITE);//設(shè)置還沒(méi)收縮時(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);
}
}
}
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- Android仿網(wǎng)易客戶端頂部導(dǎo)航欄效果
- Android項(xiàng)目實(shí)戰(zhàn)之仿網(wǎng)易頂部導(dǎo)航欄效果
- Android自定義View之組合控件實(shí)現(xiàn)類(lèi)似電商app頂部欄
- 3種Android隱藏頂部狀態(tài)欄及標(biāo)題欄的方法
- Android頂部工具欄和底部工具欄的簡(jiǎn)單實(shí)現(xiàn)代碼
- Android實(shí)現(xiàn)沉浸式導(dǎo)航欄實(shí)例代碼
- Android程序開(kāi)發(fā)之Fragment實(shí)現(xiàn)底部導(dǎo)航欄實(shí)例代碼
- Android實(shí)現(xiàn)沉浸式通知欄通知欄背景顏色跟隨app導(dǎo)航欄背景顏色而改變
- Android實(shí)現(xiàn)底部導(dǎo)航欄功能（選項(xiàng)卡）
- android底部菜單欄實(shí)現(xiàn)原理與代碼
相關(guān)文章
Android自定義控件打造絢麗平行空間引導(dǎo)頁(yè)
這篇文章主要為大家詳細(xì)介紹了Android自定義控件打造絢麗平行空間引導(dǎo)頁(yè)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
輕松實(shí)現(xiàn)功能強(qiáng)大的Android刮獎(jiǎng)效果控件（ScratchView）
這篇文章主要為大家詳細(xì)介紹了ScratchView如何一步步打造萬(wàn)能的Android刮獎(jiǎng)效果控件，,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
Android打賞功能實(shí)現(xiàn)代碼(支付寶轉(zhuǎn)賬)
這篇文章主要介紹了Android打賞功能之支付寶轉(zhuǎn)賬 ,需要的朋友可以參考下2017-12-12
淺談Android客戶端與服務(wù)器的數(shù)據(jù)交互總結(jié)
這篇文章主要介紹了淺談Android客戶端與服務(wù)器的數(shù)據(jù)交互總結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Android 使用 Scroller 實(shí)現(xiàn)平滑滾動(dòng)功能的示例代碼
這篇文章主要介紹了Android 使用 Scroller 實(shí)現(xiàn)平滑滾動(dòng)功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
android ItemTouchHelper實(shí)現(xiàn)可拖拽和側(cè)滑的列表的示例代碼
本篇文章主要介紹了ItemTouchHelper實(shí)現(xiàn)可拖拽和側(cè)滑的列表的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
這篇文章主要為大家詳細(xì)解析了Android錄制按鈕源碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Android實(shí)現(xiàn)頂部導(dǎo)航菜單左右滑動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)頂部導(dǎo)航菜單左右滑動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-06
Android獲取短信驗(yàn)證碼的實(shí)現(xiàn)方法
為了保護(hù)用戶信息的安全性，開(kāi)始使用通過(guò)服務(wù)器向用戶發(fā)送驗(yàn)證碼的方式，接下來(lái)通過(guò)本文給大家介紹android獲取短信驗(yàn)證碼的實(shí)現(xiàn)方法，非常不錯(cuò)，感興趣的朋友一起看看吧2016-09-09
shape算是我們常用的一個(gè)標(biāo)簽,他可以生成線條,矩形, 圓形, 圓環(huán),像我們圓角的按鈕就可以通過(guò)shape來(lái)實(shí)現(xiàn),最終Android會(huì)把這個(gè)帶有shape標(biāo)簽的圖片解析成一個(gè)Drawable對(duì)象,這個(gè)Drawable對(duì)象本質(zhì)是GradientDrawable2022-09-09