• 系统组件:动作条ActionBar


      引入:

      

      

      概念:动作栏或导航控件,Action Bar 就是替换3.0 以前的title bar 和Menu。

      主要功能:

        1)突出显示一些重要操作(如“注册”,“登录”,“搜索”等,将平时隐藏的选项菜单显示成活动項ActionItem。

        2)在程序中保持一致的页面导航和切换方式。这中基于Tab的导航方式,可以切换多个Fragment。

        3)提供基于下拉的导航菜单。

        4)使用程序Logo,作为返回App的Home主页面或者向上的导航操作。

      

      组成:

        ActionBar分成四个区域

          

          1)app icon 图标区

             可显示App的icon,也可用其他图标代替。当软件不再最高级页面时,图标左侧会显示一个左箭头,用户可以通过这个箭头向上导航。

          2)View Control 视图切换

             drop-down菜单或tab controls,也可以用来显示非交互的内容,例如app title或更长的品牌信息。

          3)action buttons 动作按钮

             这个放最重要的软件功能,放不下的按钮就自动进入Action Overflow了。

          4)action overflow 溢出动作項

             不常用的操作项目自动放入Action Overflow

      ActionBar操作

        1.添加与删除ActionBar

          添加ActionBar:设置主题带有AcitonBar就行了,如Theme.Hole,3.0一下使用ActionBar,需导入v7兼容包。

          删除ActionBar:

            1)设置主题没有ActionBar

            2)主题隐藏ActionBar,getSupportActionBar().hide()

          

        2.添加ActionBar动作項

          1)动作項写入Menu文件,如同添加系统菜单一样,重写onCreateOptionsMenu()

        eg:    

     1 <?xml version="1.0" encoding="utf-8"?>
     2 <menu xmlns:android="http://schemas.android.com/apk/res/android"
     3     xmlns:app="http://schemas.android.com/apk/res-auto">
     4 
     5     <item android:id="@+id/action_edit"
     6         android:title="编辑"
     7         android:orderInCategory="80"
     8         android:icon="@android:drawable/ic_menu_edit"
     9         app:showAsAction="ifRoom" />
    10 
    11     <item android:id="@+id/action_share"
    12         android:title="分享"
    13         android:orderInCategory="90"
    14         android:icon="@android:drawable/ic_menu_share"
    15         app:showAsAction="ifRoom" />
    16 
    17     <item android:id="@+id/action_settings"
    18         android:title="settings"
    19         android:orderInCategory="100"
    20         app:showAsAction="never"/>
    21 
    22 </menu>

        2)通过给<item>元素声明android:showAsAction属性:

           never:不将该MenuItem显示在ActionBar上(是默认值)

          always:总是将MenuItem显示在ActionBar上

          ifRoom:当ActionBar位置充裕时将该MenuItem显示在ActionBar上

          withText:将该MenuItem显示在ActionBar上,兵显示该菜单项的文本

          collapseActionView:将该ActionView折叠成普通菜单项(api>=14)

        3)重写OnOptionsItemSelected()回调方法,处理用户选择动作項的操作。

        

       3.启动程序图标导航

        作用:是让App的Logo也变成可以点击的导航图标

          ActionBar actionBar = getSupportActionBar();//获取当前Activity的ActionBar

          actionBar.setDisplayHomeAsUpEnabled(true);//设置是否将Logo图标转成可点击的按钮,并在图标前添加一个向左的箭头

          actionBar.setDisplayShowHomeEnabled(true);//设置是否显示Logo图标

          actionBar.setHomeButtonEnabled(true);//设置是否将Logo图标设置成可点击的按钮

          

       4.ActionView的使用(Api>=11,getActionView()有效

          作用:可编辑的动作項,如SearchView可以直接在ActionBar上使用

            添加ActionView的两种方式:

            1)android:actionLayout,指定一个布局文件

            2)android:actionViewClass属性,指定实现CollaspsibleActionView的子类

           手动展开和折叠菜单栏:

            MenuItem.expandActionView()//展开ActionView

            MenuItem.collapseActionView()//折叠ActionView

            MunuItem.setOnActionExpandListener()//设置展开或折叠的监听事件

           eg:

     1 <menu xmlns:android="http://schemas.android.com/apk/res/android" >
     2 
     3     <!-- actionViewClass 设置ActionView控件的UI类 -->
     4     <item
     5         android:id="@+id/action_search"
     6         android:orderInCategory="100"
     7         android:showAsAction="ifRoom"
     8         android:actionViewClass="android.widget.SearchView"
     9         android:title="检索"/>
    10 
    11     <!-- actionLayout 属性设置自定义ActionView的布局文件 -->
    12      <item
    13         android:id="@+id/action_search_custom"
    14         android:orderInCategory="100"
    15         android:showAsAction="always|collapseActionView"
    16         android:actionLayout="@layout/actionview_search"
    17         android:icon="@android:drawable/ic_menu_agenda"
    18         android:title="自定义检索"/>
    19     
    20 </menu>

       5.ActionBar的Tab导航

        作用:通常用选项标签使Fragment之间相互切换

        步骤:

          1)设置导航模式,调用ActionBar的setNavigationMode(ActionBar.NAVIGATION_MODE_TABS)
          2)创建多个Tab,设置setTabListener()监听事件,添加到ActionBar

          3)实现TabLisenter接口的方法

          eg:

     1 private void initActionBar() {
     2         // TODO 初始化ActionBar中的相关设置
     3         actionBar=getActionBar();//获取ActionBar对象
     4         
     5         //1. 设置ActionBar的导航模式: tab选项卡的导航模式
     6         actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
     7         
     8         //3. 创建Tab
     9         Tab tab1=actionBar.newTab()
    10                          .setText("头条")
    11                          .setIcon(android.R.drawable.ic_menu_add)
    12                          .setTabListener(this);
    13         
    14         Tab tab2=actionBar.newTab()
    15                  .setText("军事")
    16                  .setIcon(android.R.drawable.ic_menu_agenda)
    17                  .setTabListener(this);
    18         
    19         Tab tab3=actionBar.newTab()
    20                  .setText("国内")
    21                  .setIcon(android.R.drawable.ic_menu_delete)
    22                  .setTabListener(this);
    23         
    24         Tab tab4=actionBar.newTab()
    25                  .setText("国际")
    26                  .setIcon(android.R.drawable.ic_menu_camera)
    27                  .setTabListener(this);
    28         
    29         Tab tab5=actionBar.newTab()
    30                  .setText("体育")
    31                  .setIcon(android.R.drawable.ic_menu_compass)
    32                  .setTabListener(this);
    33         
    34         //4. 增加Tab到ActionBar中
    35         actionBar.addTab(tab1);
    36         actionBar.addTab(tab2);
    37         actionBar.addTab(tab3);
    38         actionBar.addTab(tab4);
    39         actionBar.addTab(tab5);
    40     }

         实现TabListener接口的三个方法:

     1 @Override
     2     public void onTabSelected(Tab tab, FragmentTransaction ft) {
     3         // TODO 选择Tab事件
     4         Log.i("info", "onTabSelected-----"+tab.getPosition());
     5         
     6         ContentFragment cf=
     7                 ContentFragment.newInstace(tab.getText().toString());
     8         
     9         ft.replace(R.id.mainLayoutId, cf);
    10         
    11     }
    12 
    13     @Override
    14     public void onTabUnselected(Tab tab, FragmentTransaction ft) {
    15         // TODO 取消选择Tab事件
    16         Log.i("info", "onTabUnselected-----"+tab.getPosition());
    17     }
    18 
    19     @Override
    20     public void onTabReselected(Tab tab, FragmentTransaction ft) {
    21         // TODO 重新选择Tab事件
    22         Log.i("info", "onTabReselected-----"+tab.getPosition());
    23         
    24     }

         布局文件:

     1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     2     xmlns:tools="http://schemas.android.com/tools"
     3     android:layout_width="match_parent"
     4     android:layout_height="match_parent"
     5     android:paddingBottom="@dimen/activity_vertical_margin"
     6     android:paddingLeft="@dimen/activity_horizontal_margin"
     7     android:paddingRight="@dimen/activity_horizontal_margin"
     8     android:paddingTop="@dimen/activity_vertical_margin"
     9     tools:context=".MainActivity"
    10     android:id="@+id/mainLayoutId" >
    11     
    12 </RelativeLayout>

       6.ActionBar扩充:

          ActionProvide的使用。

          添加下拉式导航 等。

  • 相关阅读:
    演练:向 MVC 项目添加 ASP.NET AJAX 脚本
    如何:在 MVC 中从客户端实现远程验证
    熟悉 ASP.NET MVC 类
    在 ASP.NET MVC 应用程序中传递数据
    了解 MVC 应用程序执行过程
    通过调用多个操作创建 ASP.NET MVC 视图
    演练:使用区域组织 ASP.NET MVC 应用程序
    错误:GridView {GridViewID} fired event RowEditing which wasn't handled
    如何检测数据库中对象被锁定及解除锁定的方法
    关于ASP.NET中OnClientClick事件Eval函数解析错误的处理
  • 原文地址:https://www.cnblogs.com/enjoy-coding/p/4966793.html
Copyright © 2020-2023  润新知