Android_实现可收缩扩展的导航栏 CoordinatorLayout+AppbarLayout+NestedScrollView

学习自项目： https://github.com/nanchen2251/AiYaGirl

通过上滑把背景图片隐藏起来

看一看

　　　　

         导航栏扩展状态 　　　　　　　　上滑后导航栏收缩状态

实现思路

要实现这样的效果, 需要用到：CoordinatorLayout和AppbarLayout的配合, 以及实现了NestedScrollView的布局或控。

AppbarLayout是一种支持响应滚动手势的app bar布局，
CollapsingToolbarLayout则是专门用来实现子布局内不同元素响应滚动细节的布局。

与AppbarLayout组合的滚动布局(RecyclerView, NestedScrollView等)，需要设置 app:layout_behavior = "@string/appbar_scrolling_view_behavior" 。没有设置的话， AppbarLayout将不会响应滚动布局的滚动事件。

这个布局行为Layout_Behavior：`app:layout_behavior="@string/appbar_scrolling_view_behavior"`
等同于`app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior"`

这是一个系统behavior，是为appbar设置滚动动作的一个behavior。 没有这个属性的话，Appbar就是死的，有了它就有了灵魂。

主布局 layout\activity_nav_home.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:background="#f2f4f5">

<android.support.design.widget.AppBarLayout
android:id="@+id/nav_home_appbar"
android:layout_width="match_parent"
android:layout_height="210dp"
app:theme="@style/Base.ThemeOverlay.AppCompat.Dark">

<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/nav_home_toolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="@color/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:title="理查德·费曼">


<ImageView
android:id="@+id/nav_home_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="@null"
android:scaleType="fitXY"
android:src="@mipmap/richard_phillips_feynman" />

<android.support.v7.widget.Toolbar
android:id="@+id/nav_home_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:navigationIcon="@mipmap/icon_back" />

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

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

<android.support.v4.widget.NestedScrollView
android:id="@+id/nav_home_nestedScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="10dp"
android:orientation="vertical">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="理查德·费曼"
android:textColor="#ff333333"
android:textSize="16sp" />

<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:autoLink="web"
android:background="#ffffffff"
android:lineSpacingExtra="3dp"
android:padding="7dp"
android:text="@string/about_richard_phillips_feynman"
android:textColor="#666"
android:textIsSelectable="true" />


</android.support.v7.widget.CardView>

</LinearLayout>

</android.support.v4.widget.NestedScrollView>

<!--悬浮按钮:分享-->
<android.support.design.widget.FloatingActionButton
android:id="@+id/nav_home_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:src="@mipmap/actionbar_share"
app:layout_anchor="@id/nav_home_appbar"
app:layout_anchorGravity="bottom|end" />

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

主页面代码 NavHomeActivity.java

public class NavHomeActivity extends AppCompatActivity {

@BindView(R.id.nav_home_toolbar)
Toolbar mToolBar;
@BindView(R.id.nav_home_fab)
FloatingActionButton mFab;

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
　　super.onCreate(savedInstanceState);
　　setContentView(R.layout.activity_nav_home);
　　ButterKnife.bind(this);
　　initView();

}

private void initView() {
　　//背景与状态栏融为一体(StatusBarUtil类在'轮播图片Banner有介绍')
　　StatusBarUtil.setTranslucentForImageView(this, 0, mToolBar);

　　//导航栏设置
　　setSupportActionBar(mToolBar);
　　getSupportActionBar().setHomeButtonEnabled(true);
　　getSupportActionBar().setDisplayHomeAsUpEnabled(true);


　　//导航栏的导航按钮：返回
　　mToolBar.setNavigationOnClickListener(new View.OnClickListener() {
　　@Override
　　public void onClick(View v) {
　　　　　　finish();
　　　　}
　　});
}

//分享按钮
@OnClick(R.id.nav_home_fab)
public void onViewClicked() {
　　ShareUtil.share(this, R.string.string_share_text);
　　}
}

分享工具类 ShareUtil.java

import android.content.Context;
import android.content.Intent;
import android.net.Uri;

import com.zss.pp.R;

/**
* 专用于分享的工具类
*/
public class ShareUtil {

public static void share(Context context, int stringRes) {
share(context, context.getString(stringRes));
}

public static void shareImage(Context context, Uri uri, String title) {
Intent shareIntent = new Intent();
shareIntent.setAction(Intent.ACTION_SEND);
shareIntent.putExtra(Intent.EXTRA_STREAM, uri);
shareIntent.setType("image/jpeg");
context.startActivity(Intent.createChooser(shareIntent, title));
}


public static void share(Context context, String extraText) {
Intent intent = new Intent(Intent.ACTION_SEND);
intent.setType("text/plain");
intent.putExtra(Intent.EXTRA_SUBJECT, context.getString(R.string.action_share));
intent.putExtra(Intent.EXTRA_TEXT, extraText);
intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
context.startActivity(Intent.createChooser(intent, context.getString(R.string.action_share)));
}
}

所需资源

• 分享图标 actionbar_share

• 返回图标 icon_back

• 显示的文字

<string name="action_share">分享</string>
<string name="string_share_text">分享一下费曼的思维：https://www.sohu.com/a/197127933_464074[分享自爱小酥酥]</string>
<string name="about_richard_phillips_feynman">
省略……通过\n\n给大段文字分段
</string>