版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
【移动应用开发技术】探索android的底部导航视图
关于标签是否应该放在屏幕顶部或底部的争论已经持续了近十年。Android总是偏爱在页面顶部使用选项卡作为过滤机制,而iOS则使用底部标签作为导航的主要来源。现在,在支持设计库中添加了底部导航视图,Android开发者可以选择他们的应用程序的主要导航来。
底部导航条使您的用户可以轻松地通过一个水龙头浏览顶级视图,比较了从侧面飞出的导航抽屉,当一个应用程序有很多不同的部分时,它是一个标准。今天,我将在您的应用程序中最好使用底部导航,如何实现它,以及如何根据您的喜好定制它。
底层导航的核心体验是专为手机设备使用的,它允许用户轻松地在页面之间进行交换。如果你使用底部导航应该注意的一些问题是:
你的应用程序有3到5个顶层页面吗?
你的顶层页面需要直接访问吗?
如果你的应用程序有超过五页,最好和导航抽屉在一起;如果少于三页,坚持标准的顶部标签。
入门
开始新的底部导航视图,我们要确保我们的Android应用程序的更新了AppCompatActivity并且更新到最新的支持库。有了这些,我们现在可以通过NuGet包(当前版本是25.3.3)来安装Xamarin.Android.Support.Design到我们的应用工程中。
添加选项卡/菜单项
我们必须定义的项目,将在我们添加到bottomnavigationview控制后显示。这是控制同样的navigationdrawer,使用XML定义的菜单。我们可以在资源目录中创建一个新的菜单文件夹,并添加一个新的XML文件。我们在Resources/menu/下创建一个bottom_navigation_main.xml文件,并且从AndroidAssetStudio下载一个选项卡的图标,大小都是24dpX24dp.
点击(此处)折叠或打开
<?xmlversion="1.0"encoding="utf-8"?>
<menuxmlns:android="/apk/res/android"
xmlns:app="/apk/res-auto">
<item
android:id="@+id/menu_home"
android:enabled="true"
android:icon="@drawable/ic_action_home"
android:title="@string/tab1_title"
app:showAsAction="ifRoom"/>
<item
android:id="@+id/menu_audio"
android:enabled="true"
android:icon="@drawable/ic_action_audiotrack"
android:title="@string/tab2_title"
app:showAsAction="ifRoom"/>
<item
android:id="@+id/menu_video"
android:enabled="true"
android:icon="@drawable/ic_action_videocam"
android:title="@string/tab3_title"
app:showAsAction="ifRoom"/>
</menu>
添加底部导航视图
底部导航工作时,选择一个项目时替换碎片。这意味着我们的Android的XML也应该有一个FrameLayout交换和碎片,将显示。我们的XML将以其基本形式看起来像这样:
点击(此处)折叠或打开
<RelativeLayout
xmlns:android="/apk/res/android"
xmlns:app="/apk/res-auto"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/bottom_navigation"/>
<android.support.design.widget.BottomNavigationView
android:id="@+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_gravity="start"
android:layout_alignParentBottom="true"
android:background="@android:color/white"
app:elevation="16dp"
app:menu="@menu/bottom_navigation_main"/>
<!--Note:backgroundcolorisrequiredtogetelevation-->
</RelativeLayout>
我们可以定义一个高程,这样底部导航就可以用漂亮的阴影从页面上移除,我们在导航视图中定义我们的条目,菜单属性引用我们前面创建的菜单。
我们可以看到,默认会自动将我们的主色和灰色的取消项目。
处理点击事件
现在是我们实际处理点击事件并设置内容的时候了。在这个例子中,我有三个不同的片段,它们只是加载一个显示当前索引的AndroidXML文件。我们可以创建一个简单的方法来替换当前的片段,基于我们主活动中的菜单XML中设置的ID:
点击(此处)折叠或打开
voidLoadFragment(intid)
{
Android.Support.V4.App.Fragmentfragment=null;
switch(id)
{
caseResource.Id.menu_home:
fragment=Fragment1.NewInstance();
break;
caseResource.Id.menu_audio:
fragment=Fragment2.NewInstance();
break;
caseResource.Id.menu_video:
fragment=Fragment3.NewInstance();
break;
}
if(fragment==null)
return;
SupportFragmentManager.BeginTransaction()
.Replace(Resource.Id.content_frame,fragment)
.Commit();
}
现在我们可以加载XML,找到BottomNavigationView,并登记为NavigationItemSelected事件:
点击(此处)折叠或打开
BottomNavigationViewbottomNavigation;
protectedoverridevoidOnCreate(Bundlebundle)
{
base.OnCreate(bundle);
SetContentView(Resource.Layout.main);
vartoolbar=FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);
if(toolbar!=null)
{
SetSupportActionBar(toolbar);
SupportActionBar.SetDisplayHomeAsUpEnabled(false);
SupportActionBar.SetHomeButtonEnabled(false);
}
bottomNavigation=FindViewById<BottomNavigationView>(Resource.Id.bottom_navigation);
bottomNavigation.NavigationItemSelected+=BottomNavigation_NavigationItemSelected;
//Loadthefirstfragmentoncreation
LoadFragment(Resource.Id.menu_home);
}
privatevoidBottomNavigation_NavigationItemSelected(objectsender,BottomNavigationView.NavigationItemSelectedEventArgse)
{
LoadFragment(e.Item.ItemId);
}
添加颜色
谷歌的建议是简单地使用默认的白色或黑色背景颜色和主要色调的图标,如果你的应用程序使用默认主题,你的工具栏已经着色。如果您希望设置底部导航的颜色,然后建议将当前动作的图标和文本变为黑色或白色。
Therearetwoadditional
properties,有两个附加属性,app:itemIconTint和app:itemTextColor,可以设置帽子来处理这个问题。
将它们直接设置为特定的颜色是您可能认为您想要做的事情,但最直接的问题会出现,它还将取消选择状态相同的颜色。例如,如果我设置了这三个属性:点击(此处)折叠或打开
android:background="@color/primary"
app:itemIconTint="@android:color/white"
app:itemTextColor="@android:color/white"
为了解决这个问题,我们只需要创建一个drawable文件夹选择器在我们的定义,将基于一个新的XML文件的状态颜色;我们叫做nav_item_colors.xml:
点击(此处)折叠或打
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 信息创造价值:今日头条产品体验报告
- 第六单元第4课时整百数减三位数(教案)2023-2024学年数学 二年级上册 青岛版
- 营销传播策略研究报告
- 经济合作社述职报告范文
- 体育教学设计理念
- 分数乘小数导学单(导学案)2023-2024学年数学 六年级上册 人教版
- 工会组织观影方案
- 2022年山东临沂高新区教育系统部分事业单位招聘教师考试试卷及答案解析
- 2023年山东济南公共资源交易中心引进急需紧缺专业人才考试真题及答案
- 2022年广西桂林电子科技大学附属学校招聘考试试卷及答案解析
- 读书分享读书交流会 《流浪地球》刘慈欣科幻小说读书分享
- 一年级插班生考试试题
- 2020年教师教学技能大赛公共基础组-市级一等奖-(生态文明教育)实施报告
- 勘察设计服务实施方案
- 急性尿潴留课件
- 体检中心入职体检报告范本
- 批量经纬度距离计算工具
- 普通化学原理题库
- 2022卫生部临床药师培训-肠外肠内营养专业考核试题
- 【某镇关于社区工作的实践与探索6000字(论文)】
- 2023版马克思主义基本原理课件专题七 社会主义论
评论
0/150
提交评论