通过上一篇文章，我们了解了CoordinatorLayout主要的作用以及其涉及到的控件。那么我们这一章就是来实现一些稍微复杂一点的效果，比如如何再向上/向下滚动的时候显示/隐藏 Toolbar中的按钮，显示/隐藏标题。上效果图：
图.gif
如果来实现呢？我们的Toolbar实现，主要借助与Menu的XML，menu_main.xml中有几项菜单
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/action_setting1"
android:orderInCategory="100"
android:title="菜单1"
app:showAsAction="never" />
<item
android:id="@+id/action_setting2"
android:title="菜单2"
app:showAsAction="never"/>
<item
android:id="@+id/action_setting3"
android:icon="@drawable/shop_car"
android:orderInCategory="90"
android:title="菜单3"
app:showAsAction="always"/>
</menu>
我们来显示/隐藏action_setting3的菜单项和标题,主要的实现方式：
在MainActivity.class中实现重写onCreateOptionsMenu和onPrepareOptionsMenu函数，用来绑定和获取菜单对象，再实现AppBarLayout 的动作监听appbar.addOnOffsetChangedListener，然后根据verticalOffset的位置，判断滚动到了什么位置，从而实现控件的显示/隐藏。
private AppBarLayout appbar;
private Menu aMenu; //获取menu对象
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);
appbar= (AppBarLayout) findViewById(R.id.appbar);
appbar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if (verticalOffset <= -headLayout.getHeight() / 2) {
collapsing_toolbar.setTitle("花花世界");
if(aMenu!=null) {
aMenu.getItem(1).setVisible(false);//隐藏按钮
}
//使用下面两个CollapsingToolbarLayout的方法设置展开透明->折叠时你想要的颜色
collapsing_toolbar.setExpandedTitleColor(getResources().getColor(android.R.color.transparent));
collapsing_toolbar.setCollapsedTitleTextColor(getResources().getColor(R.color.white));
} else {
collapsing_toolbar.setTitle("");
if(aMenu!=null) {
aMenu.getItem(1).setVisible(true);
}
}
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onPrepareOptionsMenu(Menu menu) {
aMenu=menu;
return super.onPrepareOptionsMenu(menu);
}
activity_main2.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:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="@color/colorPrimary"
android:clickable="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="280dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="20dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<LinearLayout
android:id="@+id/head_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="@drawable/girl"
app:layout_collapseMode="pin"
app:layout_collapseParallaxMultiplier="0.7">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:padding="20dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="花花世界"
android:textColor="#ffffff"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:lineSpacingMultiplier="1.3"
android:text="每个人心中都有一座城，住着一个不可能的人。"
android:textColor="#ffffff"
android:textSize="13sp"
android:textStyle="bold" />
</LinearLayout>
<ImageView
android:id="@+id/head_iv"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:scaleType="centerCrop" />
</RelativeLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="40dp"
android:ellipsize="end"
android:lineSpacingMultiplier="1.3"
android:maxLines="2"
android:text="再美丽的脸蛋，再婀娜多姿的身材，
倘若你蛮横无理，那又有什么美感可言，
如果真是这样，我是不会让你得到我的~~"
android:textColor="#ffffff"
android:textSize="12sp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:padding="20dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="40dp"
android:ellipsize="end"
android:lineSpacingMultiplier="1.3"
android:maxLines="2"
android:text="今天的你对我爱搭不理，\n明天的我还来找你。"
android:textColor="#ffffff"
android:textSize="12sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:paddingBottom="3dp"
android:paddingLeft="6dp"
android:paddingRight="6dp"
android:paddingTop="3dp"
android:text="有脾气？"
android:textColor="#ffffff"
android:textSize="12sp" />
</RelativeLayout>
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:titleTextColor="@color/white"
app:layout_collapseMode="pin"
android:theme="@style/ToolBarTheme"/>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#ADBE107E"
app:tabMode="scrollable"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:clickable="true"
android:onClick="checkin"
android:src="@android:drawable/ic_dialog_email"
android:layout_gravity="bottom|end"
app:layout_anchorGravity="bottom|right"/>
</android.support.design.widget.CoordinatorLayout>
Toolbar引用的style.xml 样式
<style name="ToolBarTheme" parent="@style/ThemeOverlay.AppCompat.Light">
<item name="android:textColorSecondary">#FFFFFFFF</item>
<item name="android:colorBackground">#88FFFFFF</item>
<item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item>
<item name="android:actionOverflowButtonStyle">@style/OverflowButtonStyle</item>
</style>
<!--设置toolbar弹出菜单的位置-->
<style name="OverflowMenuStyle" parent="Widget.AppCompat.Light.PopupMenu.Overflow">
<item name="overlapAnchor">false</item> <!--设置为false即可使menu位置位于toolbar之下-->
</style>
<!--修改toolbar弹出剩余隐藏菜单条目按钮的样式-->
<style name="OverflowButtonStyle" parent="@android:style/Widget.ActionButton.Overflow">
<item name="android:src">@android:drawable/ic_menu_share</item>
</style>
网友评论