Android CoordinatorLayout 实现浮动导航栏效果、常规用法

CoordinatorLayout

Android CoordinatorLayout+RecyclerView Demo

Android CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout实现浮动导航栏效果

git地址：

https://gitee.com/olleh/MyCoordinate.git

所有的操作基本上都在xml中完成，包括颜色的改变，圆角的沉浸式，滑动距离等。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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"><androidx.core.widget.NestedScrollViewandroid:layout_width="match_parent"android:layout_height="match_parent"app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"><TextViewandroid:id="@+id/textView"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center_horizontal"android:text="Hello World!"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent" /></androidx.core.widget.NestedScrollView><!--AppBarLayout继承自LinearLayout--><com.google.android.material.appbar.AppBarLayoutandroid:id="@+id/appbar"android:layout_width="match_parent"android:layout_height="wrap_content"app:contentScrim="@android:color/black"><!--tabs之上的一些布局，比如一个轮播图--><!--防止最后recyclerview一条数据显示不全 android:minHeight="?actionBarSize"--><!--设置收缩后的颜色app:contentScrim="@color/amber_600"--><com.google.android.material.appbar.CollapsingToolbarLayoutandroid:id="@+id/collapsingToolbarLayout"android:layout_width="match_parent"android:layout_height="wrap_content"android:minHeight="@*android:dimen/status_bar_height"app:contentScrim="@android:color/black"app:expandedTitleGravity="bottom|center_horizontal"app:expandedTitleMarginBottom="16dp"app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"app:title="@string/app_name"><!--Banner--><!--app:layout_collapseMode="parallax"交错上移--><!--app:layout_collapseMode="pin"整体上移--><com.youth.banner.Banner xmlns:app="http://schemas.android.com/apk/res-auto"android:id="@+id/banner"android:layout_width="match_parent"android:layout_height="200dp" /></com.google.android.material.appbar.CollapsingToolbarLayout><!--需要浮动的Tabs--><!--android:layout_marginTop="-8dp"这里向上偏移8dp为了让圆角可以有沉浸式的感觉--><com.google.android.material.tabs.TabLayoutandroid:id="@+id/tabs"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="-8dp"android:background="@drawable/bg_home_xtab"app:tabMode="scrollable"app:tabIndicatorColor="@color/colorAccent"app:tabSelectedTextColor="@color/colorAccent"app:tabTextColor="@android:color/white"><com.google.android.material.tabs.TabItemandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Tab1" /><com.google.android.material.tabs.TabItemandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Tab2" /><com.google.android.material.tabs.TabItemandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Tab3" /><com.google.android.material.tabs.TabItemandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Tab4" /><com.google.android.material.tabs.TabItemandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Tab5" /><com.google.android.material.tabs.TabItemandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Tab6" /><com.google.android.material.tabs.TabItemandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Tab7" /></com.google.android.material.tabs.TabLayout></com.google.android.material.appbar.AppBarLayout></androidx.coordinatorlayout.widget.CoordinatorLayout>

bg_home_xtab.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"><solid android:color="@android:color/black" /><cornersandroid:topLeftRadius="8dp"android:topRightRadius="8dp"android:bottomLeftRadius="0dp"android:bottomRightRadius="0dp"/></shape>

MainActivity.java

package com.example.mycoordinate;import android.os.Bundle;
import android.widget.TextView;
import android.widget.Toast;import androidx.appcompat.app.AppCompatActivity;import com.google.android.material.appbar.AppBarLayout;
import com.google.android.material.tabs.TabLayout;
import com.youth.banner.Banner;
import com.youth.banner.listener.OnBannerListener;import java.util.ArrayList;
import java.util.List;public class MainActivity extends AppCompatActivity {private TextView textView;private AppBarLayout appbar;private TabLayout tabs;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initView();initTextView();initTabs();initBanner();}private void initView() {textView = (TextView) findViewById(R.id.textView);appbar = (AppBarLayout) findViewById(R.id.appbar);tabs = (TabLayout) findViewById(R.id.tabs);}private void initBanner() {List images = new ArrayList();images.add("http://image14.m1905.cn/uploadfile/2018/0907/thumb_1_1380_460_20180907013518839623.jpg");images.add("http://image14.m1905.cn/uploadfile/2018/0906/thumb_1_1380_460_20180906040153529630.jpg");images.add("http://image13.m1905.cn/uploadfile/2018/0907/thumb_1_1380_460_20180907114844929630.jpg");Banner banner = (Banner) findViewById(R.id.banner);//设置图片加载器banner.setImageLoader(new GlideImageLoader());//设置图片集合banner.setImages(images);//banner设置方法全部调用完毕时最后调用banner.start();//增加点击事件banner.setOnBannerListener(new OnBannerListener() {@Overridepublic void OnBannerClick(int position) {Toast.makeText(MainActivity.this, "position"+position, Toast.LENGTH_SHORT).show();}});}private void initTabs() {/*** tabs的点击回调*/tabs.addOnTabSelectedListener(new TabLayout.BaseOnTabSelectedListener() {@Overridepublic void onTabSelected(TabLayout.Tab tab) {Toast.makeText(MainActivity.this, "tab=" + tab.getText(), Toast.LENGTH_SHORT).show();}@Overridepublic void onTabUnselected(TabLayout.Tab tab) {}@Overridepublic void onTabReselected(TabLayout.Tab tab) {}});}private void initTextView() {/*** 初始化TextView*/String text = "";for (int i = 0; i < 100; i++) {text += i + "\n";}textView.setText(text);}}

Android CoordinatorLayout 实现浮动导航栏效果、常规用法相关推荐

android仿微信的activity平滑水平切换动画,Android实现简单底部导航栏 Android仿微信滑动切换效果...
Android实现简单底部导航栏 Android仿微信滑动切换效果发布时间:2020-10-09 19:48:00 来源:脚本之家阅读:96 作者:丶白泽 Android仿微信滑动切换最终实现效果 ...
android仿咸鱼底部导航栏,Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航栏效果...
如下图:状态栏是指android手机顶部显示手机状态信息的位置. android 自4.4开始新加入透明状态栏功能,状态栏可以自定义颜色背景,使titlebar能够和状态栏融为一体,增加沉浸感. 如上 ...
android沉浸式模式简书,Android 沉浸式模式与常见状态栏和导航栏效果
Android沉浸式模式官方称沉浸式状态栏为沉浸式模式. 什么是沉浸式? 沉浸式就是让人专注当前的(由设计者营造)情境下感到愉悦和满足,而忘记真实的情境. 什么是Android中的沉浸式? 当启用该 ...
Android导航栏高斯模糊,iOS 顶部高斯模糊导航栏 + 页面内容穿越底部导航栏效果...
(1)如果是使用系统导航栏则设置其translucent属性即可: [self.navigationController.navigationBar setBackgroundImage:[UIIma ...
Android个性导航栏效果
分享一个导航栏效果的demo 源码下载 github 动图太快了, 效果就是选中的tab永远都在中间的位置可以无限循环滚动切换源码下载 github
史上最完美的Android沉浸式状态导航栏攻略
前言最近我在小破站开发一款新App,叫高能链.我是一个完美主义者,所以不管对架构还是UI,我都是比较抠细节的,在状态栏和导航栏沉浸式这一块,我还是踩了挺多坑,费了挺多精力的.这次我将我踩坑,适配各机 ...
Android隐藏状态栏、导航栏
Android隐藏状态栏.导航栏 [java] view plaincopy private void hideStatusNavigationBar(){ if(Build.VERSION.SDK_ ...
浮动导航栏php源码,JQuery 浮动导航栏实现代码
JQuery 浮动导航栏 /* 浮动导航栏 Begin */ #floatMenu { padding-top: 5px; background: url(http://img.jb51.net/im ...
html js左侧导航栏,js实现简单分页导航栏效果
本文实例为大家分享了js实现分页导航栏效果的具体代码,供大家参考,具体内容如下最终的效果: 1. 分页需要的几个重要参数: 总记录条数: totalCount (查数据库) 每页记录数: pageS ...

Android CoordinatorLayout 实现浮动导航栏效果、常规用法

CoordinatorLayout

git地址：

所有的操作基本上都在xml中完成，包括颜色的改变，圆角的沉浸式，滑动距离等。

activity_main.xml

bg_home_xtab.xml

MainActivity.java

Android CoordinatorLayout 实现浮动导航栏效果、常规用法相关推荐

最新文章

热门文章