Navigation Drawer Collapsing ToolBar
2024-06-22 19:22:09
1. 配置信息
1.1 AndroidManifest.xml 修改应用样式
<!--设置无导航栏，自定义导航栏--><application android:theme="@style/Theme.AppCompat.NoActionBar">1.2 build.gradle 中添加 ViewBingding, navigation 导航库
buildFeatures{viewBinding = true}dependencies {def nav_version = "2.5.2"// Kotlinimplementation "androidx.navigation:navigation-fragment-ktx:$nav_version"implementation "androidx.navigation:navigation-ui-ktx:$nav_version"
}2. 创建资源文件
2.1 创建系统自带矢量图
右击 res -> New -> Vector Asset -> Configure Vector Asset 对话框 点击 Clip Art -> 选择需要的图标，例如 ic_baseline_looks_one.xml，其他系统矢量图自行创建
<vector xmlns:android="http://schemas.android.com/apk/res/android"android:width="24dp"android:height="24dp"android:tint="#FFFFFF"android:viewportWidth="24"android:viewportHeight="24"><pathandroid:fillColor="@android:color/white"android:pathData="M19,3L5,3c-1.1,0 -2,0.9 -2,2v14c0,1.1 0.9,2 2,2h14c1.1,0 2,-0.9 2,-2L21,5c0,-1.1 -0.9,-2 -2,-2zM14,17h-2L12,9h-2L10,7h4v10z" />
</vector>2.2 创建 color 点击效果文件，navigation_item_background_color.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:color="#FF0" android:state_checked="true" /><item android:color="#FFF"/>
</selector>2.3 String.xml 文件添加文字资源
<string name="text_fragment_title">Text</string><string name="list_fragment_title">List</string><string name="pager_fragment_title">Pager</string><string name="navigation_view_header_text">Drawer Header</string><string name="place_holder_text">The Git Project is a member project of Software Freedom Conservancy ("Conservancy"). Conservancy holds rights in the Marks on behalf of the Git Project in accordance with its non– profit charitable mission.Conservancy has adopted this Policy to protect the Marks (as defined below) and to make sure that the identity of Git software and its free and open source nature is clear to everyone.By using this Policy, the Git Project can spread the use of the Git software while making sure that the Marks are protected in a way that is consistent with U.S. trademark law (U.S. Registration 4680534). This Policy is written to allow all clear and appropriate use of the Marks while disapproving use of the Marks in ways that could confuse users as to where the software came from, or that implies an otherwise non existent association with the Git Project. By adhering to this Policy, you help to promote to the public the freedom to use and develop the Git software.This requirement is waived in all contexts where such marks are not required to protect the intellectual property rights associated with the Marks, such as email, online discussion, and academic papers.</string>
2.4 创建 menu.xml，用于切换 item 导航，group 用于分栏显示，必须填写 group 的id
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"><groupandroid:id="@+id/group1"android:checkableBehavior="single"><itemandroid:id="@+id/textFragment"android:icon="@drawable/ic_baseline_looks_one"android:title="@string/text_fragment_title" /></group><groupandroid:id="@+id/group2"android:checkableBehavior="single"><itemandroid:id="@+id/listFragment"android:icon="@drawable/ic_baseline_looks_two"android:title="@string/list_fragment_title" /><itemandroid:id="@+id/pagerFragment"android:icon="@drawable/ic_baseline_looks_three"android:title="@string/pager_fragment_title" /></group>
</menu>2.5 先创建 Fragment 类，在创建 navigation.xml 用于 Fragment 导航
<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/navigation"app:startDestination="@id/textFragment"><fragmentandroid:id="@+id/textFragment"android:name="com.example.drawerdemo.TextFragment"android:label="@string/text_fragment_title"tools:layout="@layout/fragment_text" /><fragmentandroid:id="@+id/listFragment"android:name="com.example.drawerdemo.ListFragment"android:label="@string/list_fragment_title"tools:layout="@layout/fragment_list" /><fragmentandroid:id="@+id/pagerFragment"android:name="com.example.drawerdemo.PagerFragment"android:label="@string/pager_fragment_title"tools:layout="@layout/fragment_pager" />
</navigation>3. 创建 TextFragment 页
3.1 布局文件 fragment_text.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".TextFragment"><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:text="@string/place_holder_text"android:textSize="24sp" />
</FrameLayout>3.2 TextFragment.kt
class TextFragment : Fragment() {override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {requireActivity().findViewById<CollapsingToolbarLayout>(R.id.collapsingToolbarLayout).title =getString(R.string.text_fragment_title)requireActivity().findViewById<ImageView>(R.id.toolbarIconImageView).setImageResource(R.drawable.ic_baseline_looks_one)return inflater.inflate(R.layout.fragment_text, container, false)}
}4. 创建 ListFragment 页
4.1 布局文件 fragment_list.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".ListFragment"><androidx.recyclerview.widget.RecyclerViewandroid:id="@+id/recyclerView"android:layout_width="match_parent"android:layout_height="match_parent" />
</FrameLayout>4.2 ViewHolder 布局文件 view_holder.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="wrap_content"><ImageViewandroid:id="@+id/cellImageView"android:layout_width="80dp"android:layout_height="80dp"android:layout_margin="20dp"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"tools:srcCompat="@tools:sample/avatars" />
</androidx.constraintlayout.widget.ConstraintLayout>4.3 继承 ListAdapter 类，MyListAdapter.kt
class MyListAdapter(val isPager: Boolean) : ListAdapter<Int, RecyclerView.ViewHolder>(callback) {object callback : DiffUtil.ItemCallback<Int>() {override fun areItemsTheSame(oldItem: Int, newItem: Int): Boolean {return oldItem == newItem}override fun areContentsTheSame(oldItem: Int, newItem: Int): Boolean {return oldItem == newItem}}override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {var bing = ViewHolderBinding.inflate(LayoutInflater.from(parent.context), parent, false)//val view = LayoutInflater.from(parent.context).inflate(R.layout.view_holder, parent, false)with(bing) {if (isPager) {//在ViewPage中 item 布局必须为 MATCH_PARENTroot.layoutParams.height = ViewGroup.LayoutParams.MATCH_PARENT//填满布局cellImageView.layoutParams.height = 0cellImageView.layoutParams.width = 0}}return object : RecyclerView.ViewHolder(bing.root) {}}override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {holder.itemView.findViewById<ImageView>(R.id.cellImageView).setImageResource(getItem(position))}
}4.4 ListFragment.kt
class ListFragment : Fragment() {lateinit var binding: FragmentListBindingoverride fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {requireActivity().findViewById<CollapsingToolbarLayout>(R.id.collapsingToolbarLayout).title =getString(R.string.list_fragment_title)requireActivity().findViewById<ImageView>(R.id.toolbarIconImageView).setImageResource(R.drawable.ic_baseline_looks_two)binding = FragmentListBinding.inflate(layoutInflater)return binding.root}override fun onViewCreated(view: View, savedInstanceState: Bundle?) {super.onViewCreated(view, savedInstanceState)val layoutManager = GridLayoutManager(requireContext(), 2)val adapter = MyListAdapter(false)binding.recyclerView.layoutManager = layoutManagerbinding.recyclerView.adapter = adapteradapter.submitList(iconsList())}
}//创建 List 数据
fun iconsList(): List<Int> {val array = intArrayOf(R.drawable.ic_baseline_1,R.drawable.ic_baseline_2,R.drawable.ic_baseline_3,R.drawable.ic_baseline_4,R.drawable.ic_baseline_5,R.drawable.ic_baseline_6,R.drawable.ic_baseline_7,R.drawable.ic_baseline_8,R.drawable.ic_baseline_9,R.drawable.ic_baseline_10)return Array(50) {array.random()}.toList()
}5. 创建 PagerFragment 页
5.1 布局文件 fragment_pager.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".PagerFragment"><androidx.viewpager2.widget.ViewPager2android:id="@+id/viewPager"android:layout_width="match_parent"android:layout_height="match_parent" />
</FrameLayout>5.2 PagerFragment.kt
class PagerFragment : Fragment() {private lateinit var binding: FragmentPagerBindingoverride fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {requireActivity().findViewById<CollapsingToolbarLayout>(R.id.collapsingToolbarLayout).title =getString(R.string.pager_fragment_title)requireActivity().findViewById<ImageView>(R.id.toolbarIconImageView).setImageResource(R.drawable.ic_baseline_looks_three)binding = FragmentPagerBinding.inflate(layoutInflater)return binding.root}override fun onViewCreated(view: View, savedInstanceState: Bundle?) {super.onViewCreated(view, savedInstanceState)val adapter = MyListAdapter(true)binding.viewPager.adapter = adapteradapter.submitList(iconsList())}
}6. Main 主页使用
6.1 NavigationView 头布局: navigation_view_header_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="200dp"android:background="@drawable/bg2"><TextViewandroid:id="@+id/textView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="@string/navigation_view_header_text"android:textColor="#FFFFFF"android:textSize="26sp"android:textStyle="bold"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintHorizontal_bias="0.1"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"app:layout_constraintVertical_bias="0.8" />
</androidx.constraintlayout.widget.ConstraintLayout>6.2 抽取 content_layout.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"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"><com.google.android.material.appbar.AppBarLayoutandroid:id="@+id/appbar"android:layout_width="match_parent"android:layout_height="192dp"><com.google.android.material.appbar.CollapsingToolbarLayoutandroid:id="@+id/collapsingToolbarLayout"android:layout_width="match_parent"android:layout_height="match_parent"app:contentScrim="?attr/colorPrimary"app:layout_scrollFlags="scroll|exitUntilCollapsed"app:scrimAnimationDuration="200"app:toolbarId="@+id/toolbar"><ImageViewandroid:id="@+id/toolbarIconImageView"android:layout_width="60dp"android:layout_height="60dp"android:layout_gravity="center_vertical|end"android:layout_marginEnd="20dp"app:layout_collapseMode="parallax"app:layout_collapseParallaxMultiplier="0.5"tools:srcCompat="@tools:sample/avatars" /><androidx.appcompat.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"app:layout_collapseMode="pin" /></com.google.android.material.appbar.CollapsingToolbarLayout></com.google.android.material.appbar.AppBarLayout><androidx.core.widget.NestedScrollViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:fillViewport="true"app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"><androidx.constraintlayout.widget.ConstraintLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"tools:showIn="@layout/activity_main"><androidx.fragment.app.FragmentContainerViewandroid:id="@+id/fragmentContainerView"android:name="androidx.navigation.fragment.NavHostFragment"android:layout_width="match_parent"android:layout_height="match_parent"app:defaultNavHost="true"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"app:navGraph="@navigation/navigation" /></androidx.constraintlayout.widget.ConstraintLayout></androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>6.3 布局文件 activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/drawerLayout"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"tools:openDrawer="start"><includeandroid:id="@+id/include_content_layout"layout="@layout/content_layout" /><com.google.android.material.navigation.NavigationViewandroid:id="@+id/navigationView"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_gravity="start"app:headerLayout="@layout/navigation_view_header_layout"app:itemIconTint="@color/navigation_item_background_color"app:itemTextAppearance="@style/TextAppearance.AppCompat.Large"app:itemTextColor="@color/navigation_item_background_color"app:menu="@menu/menu" />
</androidx.drawerlayout.widget.DrawerLayout>6.4 主页 MainActivity.kt
class MainActivity : AppCompatActivity() {private lateinit var appBarConfiguration: AppBarConfigurationprivate lateinit var navController: NavControllerprivate lateinit var binding: ActivityMainBindingoverride fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)binding = ActivityMainBinding.inflate(layoutInflater)setContentView(binding.root)setSupportActionBar(binding.includeContentLayout.toolbar)//val navHostFragment = supportFragmentManager.findFragmentById(R.id.fragmentContainerView) as NavHostFragment//val drawerLayout = findViewById<DrawerLayout>(R.id.drawerLayout)// val navigationView = findViewById<NavigationView>(R.id.navigationView)//appBarConfiguration = AppBarConfiguration(navController.graph, drawerLayout)val navHostFragment = binding.includeContentLayout.fragmentContainerView.getFragment() as NavHostFragmentnavController = navHostFragment.navControllerval set = setOf(R.id.textFragment, R.id.listFragment, R.id.pagerFragment)appBarConfiguration = AppBarConfiguration(set, binding.drawerLayout)setupActionBarWithNavController(navController, appBarConfiguration)binding.navigationView.setupWithNavController(navController)}override fun onSupportNavigateUp(): Boolean {return navController.navigateUp(appBarConfiguration) || super.onSupportNavigateUp()}
}7. 效果图
Navigation Drawer Collapsing ToolBar相关推荐
- Android - 基于Toolbar的Navigation Drawer(Material Design)
Material Design已经推出许久,有许多app都已经跟进了,这里也介绍下基于Toolbar的Navigation Drawer是如何实现的. 样式: 实现过程: 1. 在 activity_ ...
- Navigation Drawer Activity
1 Navigation Drawer Activity是什么? 硬翻译出来就是导航抽屉Activity,不过翻译出来的意思大概也就是它相应的作用了. Navigation Drawer是在 Mate ...
- Android Navigation Drawer(导航抽屉)
Google I/O 2013 Android 更新了Support库,新版本的Support库中新加入了几个比较重要的功能. 添加 DrawerLayout 控件,支持创建 Navigation ...
- Android UI开发第三十三篇——Navigation Drawer For Android API 7
Creating a Navigation Drawer中使用的Navigation Drawer的android:minSdkVersion="14",现在Android API ...
- Navigation Drawer详解-Google推出的用来取代Sliding Menu的控件（一
2019独角兽企业重金招聘Python工程师标准>>> 相信Sliding Menu很多人都用过,在Android和iOS的app中,越来越多的开发者都会把自己的菜单界面放在一个列表 ...
- Android Navigation Drawer样式抽屉的使用
NavigationDrawer(导航抽屉)是一个从屏幕的左边缘过渡并且显示app的主要导航操作的面板. 显示Navigation Drawer 用户能够从屏幕左边缘滑动滑块或者点击app的Actio ...
- Navigation Drawer介绍
在2013 google IO当天,Android团的更新了Support库,新版本(V13)的Support库中新加入了几个比较重要的功能. 添加 DrawerLayout 控件,支持创建 Nav ...
- Android UI开发第三十二篇——Creating a Navigation Drawer
Navigation Drawer是从屏幕的左侧滑出,显示应用导航的视图.官方是这样定义的: The navigation drawer is a panel that displays the ap ...
- android抽屉风格,Android Navigation Drawer样式抽屉的使用
NavigationDrawer(导航抽屉)是一个从屏幕的左边缘过渡并且显示app的主要导航操作的面板. 显示Navigation Drawer 用户能够从屏幕左边缘滑动滑块或者点击app的Actio ...
最新文章
- css多行省略号兼容ie,css超出2行部分省略号……，兼容ie
- 数据库打开报错： 值不能为空
- 在 iOS 应用中实现飞行模式提醒
- spark Intellij IDEA及eclipse开发环境搭建
- Windows环境下使用 Caffe在ImageNet上训练网络
- 12 操作系统第三章 内存管理 非连续分配管理方式 基本分页存储管理 基本分段存储管理 段页式存储管理
- Spring4.x(7)---对象的生命周期方法
- 天津科技大学计算机科学与技术专业怎么样,2021年天津科技大学重点专业排名有哪些,招生优势专业排行榜...
- 怎么取消百度右侧栏的搜索热点
- 走迷宫（三）：在XX限制条件下，是否走得出。
- mysql 一对多查询组成单表字段_单表多字段MySQL模糊查询的实现
- 英尺、英寸、厘米的转化：C语言
- 16. 二叉哥的二叉树
- 工作中如果一直被领导忽略，你会怎么办？
- mysql带条件的插入语句
- 雷军在联想内部分享，把小米讲透了！
- Multisim基本电路仿真
- Riak - 安装运维篇（1）
- 【疑难杂症】allennlp安装报错：Installing build dependencies ... error
- HQY的水题大赛解析