Android 原生 Android ActionBar

本文内容

  • 关于 ActionBar

  • 必要条件
  • 项目结构
  • 环境
  • 演示一:Action Bar 显示隐藏
  • 演示二:Action Item 显示菜单选项
  • 演示三:Action Home 启用“返回/向上”程序图标导航
  • 演示四:Action View 显示 UI 组件

如果你想使用 ActionBarSherlock,那么最好先研习一下原生的 Android ActionBar。最近打算用 Android 自己写个 APP,用了三方库 ActionBarSherlock,我也是 Android 刚入门,能够实现一些常见的功能和效果,对 Android 已经有个总体的认识~但结果被 ActionBarSherlock 搞得很不爽,本来觉得应该不太会难啊,毕竟编程也有年头了(虽说我是搞 .NET C# 的,但 Java 跟 C# 有 90% 的相似度,微软搞 C# 的人,就是当初搞 Java 的人,C# 在 1.0 版本时的确很烂,直到 2.0 版本才大为改观。我没用 Java 做过项目,但也不至于对 Java 一无所知……),可搜索了一些资料和示例后,感觉,简单搞一下还行,但要达到做项目的程度,还是复杂了点,到现在都没能领会 ActionBarSherlock~

经过一晚的反思,我发现,我还是需要从头开始,研究一下原生的 Android ActionBar,当时只是大概看了一下……结果,也顺道解决了我的另一个问题。我们知道,编写电脑应用程序时,都会初始化页面,Android 也是如此,但我一致没搞明白,比如,Tab 页,或是 ViewPager 这样的效果,如何实现初始化每个页,或是每个 Pager。别告诉我 Fragment,我说的是实现的代码。

本文主要演示原生 Android ActionBar 的使用。包括:

  • Action Bar 显示隐藏

  • Action Item 显示菜单选项
  • Action Home 启用“返回/向上”程序图标导航
  • Action View 显示 UI 组件

但在正式说明原生 ActionBar 实现的一些功能前,先大概了解一下。

下载 Demo

(下载有错,请留言!)

关于ActionBar



“操作栏”对于 Android APP 来说是最重要的设计元素。它通常在应用运行的所有时间都待在屏幕顶部。

操作栏的主要目的是:

  • 突出重要的操作(例如“新建”和“搜索”),并且可以方便的使用。

  • 在应用内提供统一的导航和视图切换体验。
  • 将较少使用的功能收集到“更多操作”菜单中,减少界面上的杂乱布局。
  • 为你的应用提供一个展示其特点的空间。

如果你是编写 Android APP 新手,请注意操作栏是需要实现的最重要的设计元素。根据下面的指导来设计你的 APP,使其和 Android 核心应用达到统一的界面体验。

对于大多数应用,操作栏可以分割为 4 个不同的功能区域。

图 1 活动栏

  • 1. 应用图标

应用图标是应用的标识。在应用图标的位置放置你自己的 logo。

注意:如果当时应用不在顶层界面,那么在图标左边放置一个向左的箭头,表示“向上”按钮,使用户可以回到上一级界面。“向上”按钮的更多细节,请查看 导航 一节。

  • 2. 视图控制

如果你的 APP 通过多个不同的视图显示数据,那么视图控制区域将允许用户切换视图。可以使用下拉菜单或者标签控件来实现。

但如果你的 APP 没有多个视图,那么你可以在这里显示不可操作的内容,例如标题或者品牌信息。

  • 3. 操作按钮

显示应用中最重的操作。如果图标放不下了,就自动移入“更多操作”菜单。

  • 4. 更多操作

将使用频率低的操作放在这个菜单里。

区分这4个区域很重要。比如,应该在“操作按钮”区域放置那些操作,最常见的就是“搜索”,你总不能把使用频率这么高的操作“藏”在很深的位置吧,用户一定天天咒你~再比如,在“更多操作”区域,放置使用频率较低的操作,可以即便是使用较低,也要仔细安排那些操作的顺序~

参考 Andriod 关于操作栏 ActionBar 的设计原则

必要条件



ActionBar 是 Android 3.0 的重要更新之一。必须在 AndroidManifest.xml 文件的 SDK 配置中指定了该应用的版本高于 11(Android 3.0 的版本号)。在本演示中,minSdkVersion 的值必须高于 14,如下所示:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.nativeactionbardemo"
    android:versionCode="1"
    android:versionName="1.0" >
 
    <!-- 使用 ActionBar minSdkVersion 至少为 14 -->
    <uses-sdk
        android:minSdkVersion="14"
        android:targetSdkVersion="19" />
 
    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@android:style/Theme.Holo" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
 
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name=".ActionBarTest"
            android:label="@string/app_name"
            android:theme="@android:style/Theme.Holo.Light" >
        </activity>
        <activity
            android:name=".ActionItemTest"
            android:label="@string/app_name" >
        </activity>
        <activity
            android:name=".FirstActivity"
            android:label="@string/app_name" >
        </activity>
        <activity android:name=".SecondActivity" >
        </activity>
        <activity android:name=".ActionHomeTest" >
        </activity>
        <activity android:name=".ActionViewTest" >
        </activity>
    </application>
 
</manifest>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

当你指定 minSdkVersion =14 后,低版本的真机就无法在 eclipse debug 中看到。虽然也有办法,但这不在本文讨论范围内。貌似现在 Android 4.0 或更高的手机已经很普遍了。但是如果你使用 ActionBarSherlock 库,并将它添加到你项目,就没问题了。

另外,注意 application 小节设置了主题。

项目结构



图 2 项目结构                                                         图 3 程序主界面

环境


  • Windows 2008 R2 64 位

  • Eclipse ADT V22.6.2,Android 4.4.2(API 19)
  • SAMSUNG GT-8618,Android OS 4.1.2

演示一:Action Bar 显示隐藏



图 4 ActionBar 显示隐藏

当点击“隐藏ActionBar”按钮时,ActionBar 会隐藏掉。

演示二:Action Item 显示菜单选项



图 5 显示菜单选项

ActionBar 上有三种菜单:单选菜单、普通菜单、复选菜单。可以改变字体的大小和颜色。

演示三:Action Home 启用“返回/向上”程序图标导航



图 6 启用“返回/向上”程序图标导航

  • 第一个图是第一个 Activity;

  • 第二个图中,当点击第一个图中的“启动第二个”按钮后,将进入第二个 Activity,并看到“启动第三个”字样;
  • 第三个图中,当点击第二个图中的“启动第三个”按钮后,将进入下一个 Activity,跟演示二相同的界面。唯一的不同是,添加了“返回/向上”的功能;
  • 第四个图中,当点击“程序图标导航”(还带了个向左的箭头),将返回到第一个图。

演示四:Action View 显示 UI 组件



ActionBar 除了可以显示普通的 Action Item 外,还可以显示普通的 UI 组件。

在 ActionBar 上添加 Action View 有两种方式:

  • 定义 Action Item 时,使用 android:actionViewClass 属性指定 Action View 的实现类。

  • 定义 Action Item 时,使用 android:actionLayout 属性指定 Action View 对应的视图资源,即 xml 文件。

图 7 显示 UI 组件

核心代码如下所示:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
 
    <item
        android:id="@+id/search"
        android:actionViewClass="android.widget.SearchView"
        android:orderInCategory="100"
        android:showAsAction="always"
        android:title="@string/menu_settings"/>
    <item
        android:id="@+id/progress"
        android:actionLayout="@layout/clock"
        android:orderInCategory="100"
        android:showAsAction="always"
        android:title="@string/menu_settings"/>
 
</menu>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

说明:idSearch 的菜单,指定的是 android.widget.SearchView 类;idprogress 的菜单,指定的是 clock.xml 文件。

下载 Demo

Android 原生 Android ActionBar

时间: 2024-08-25 20:39:09

Android 原生 Android ActionBar的相关文章

Android 原生 Android ActionBar Tab (滑动)导航

本文内容 环境 项目结构 演示一:ActionBar Tab 导航 演示二:ActionBar Tab 带滑动导航 本文演示 Tab 导航.第一个演示,是基本的 Tab 导航,第二个是带滑动的 Tab 导航. 另外,个人觉得,通过本例能够知道,如何创建初始化 Fragment,并把 Fragment 放入"容器"中.容器既可以是 LinearLayout.RelativeLayout,也可以是 ViewGroup.这类似初始化 Web 应用程序页面的实现,困扰了我很久,不解决这个问题,

android原生browser分析(二)--界面篇

我们先看一张浏览器的主界面,上面标示浏览器界面各部分对应的类,这里是以平板上的界面为例.给张图是为了给大家一个直观的感觉. BrowserActivity是整个应用的主界面,在onCreate中创建了Controller对象,Controller对象是整个应用最重要的管理类,这个后面再说. @Override public void onCreate(Bundle icicle) { mController = createController(); } Controller的创建中新建了UI类

Android导航栏ActionBar的详细分析 一

尊重原创:http://blog.csdn.net/yuanzeyao/article/details/39378825 关于ActionBar,相信大家并不陌生,但是真正能够熟练使用的也不是很多,这篇文章主要为大家详细介绍ActionBar的相关知识,ActionBar是在Android3.0中引入的概念,所以在2.x系统中使用ActionBar我们需要依赖ActionBarSherklock或者androi-support-v7库,ActionBarSherklock是anroid中非常有名

wex5 教程 之 web网站android原生模式打包

如果有成型的web网站,想做成手机app,如何用wex5来打包成apk呢?比如说百度视频,我想打包成自已的apk安装到手机上,怎么做呢? 官方提供了四种打包模式,都需要提供服务地址,也就是说要有一台服务器来提供服务.我只是要把web地址封装一下,apk打开后跳转到网页就行,显然服务地址是不需要的. 那如果用wex5的页面frame组件加载一个web页面呢? 经测试,这种方法可行,问题是,w页面是wex5自创的页面,不是html的document页面,会出现视频格式不能播放,无falsh插件问题.

Android中通过ActionBar为标题栏添加搜索以及分享视窗

在Android3.0之后,Google对UI导航设计上进行了一系列的改革,其中有一个非常好用的新功能就是引入的ActionBar,他用于取代3.0之前的标题栏,并提供更为丰富的导航效果.ActionBar的主要目的是: 1.提供一个用于识别应用程序的标示和用户的位置的专用空间. 2.在不同的应用程序之间提供一致的导航和视觉体验. 3.突出Activity的关键操作(如"搜索"."创建"."共享"等),并且在可预见的方法内给用户提供快捷的访问.

Android原生json和fastjson的简单使用

android原生操作json数据 主要是两个类 JSONObject 操作对象     JONSArray操作json数组 对象转json 1 //创建学生对象 2 Student student=new Student(); 3 student.setAge(23); 4 student.setClazz("六年级"); 5 student.setName("王二麻子"); 6 //创建JSONObject 7 JSONObject jsonObject=new

Android进阶(二十七)Android原生扰人烦的布局

Android原生扰人烦的布局 在开发Android应用时,UI布局是一件令人烦恼的事情.下面主要讲解一下Android中的界面布局. 一.线性布局(LinearLayout) 线性布局分为: (1)垂直线性布局: (2)水平线性布局: 针对这两种区别,只是一个属性的区别 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertic

【React Native开发】React Native移植原生Android项目

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50519677 本文出自:[江清清的博客] (一)前言 [好消息]个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新,请大家关注收藏:http://www.lcode.org 前三节课程我们已经对于React Native For Android的环境搭建,IDE安装配置以及应用运行,调试相关的知识点做了讲解.今天我们来讲一个非常有用的知识点.移植我们已有

android原生ExpandableListView

android原生可扩展ExpandableListView就是可以伸缩的listView,一条标题下面有多条内容. 这个list的adapter对的数据要求与普通ListView的数据要求也有一些差别,这个list需要有两个数据源 一半需要 List<String> groups 作为group 和一个 Map<String , List<String>> children 作为children,他们最好意义对应 ExpandableListView使用起来和普通的l