首页 > 分享 > 掌上生词本开发 (一): 顶部导航栏实现

掌上生词本开发 (一): 顶部导航栏实现

花匠小妙招
2024-11-14 13:25

一:前言

在AppStore上没找到喜欢的生词本软件,故想自己开发一个.没有做过项目,没有写过博客,第一次开通,希望对项目进行一个记录,以便自己后来翻阅. 今天是第一天进行开发,首先实现顶部导航栏UI,实现过程中主要参考《第一行代码》. 过程中发现一个[图标素材](https://iconmonstr.com/)网站. 123

二:具体实现过程

1.首先在res/values/styles.xml中修改style中的parent属性. 使其从原本继承的Theme.AppCompat.Light.DarkActionBar这个带Actionbar的主题修改为继承自Theme.AppCompat.Light.NoActionBar. 这个过程使原本带有的actionbar消失,以便后续能添加toolbar. 在 http://www.cnblogs.com/oyjt/p/4762640.html 中发现貌似可以通过具体修改各个item项目以实现对导航条的美化,具体还未测试,等要美化的时候再来参考此篇博文. 1234

<resources>  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">  <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> </resources>1234567891011

2.在activity_main.xml中添加Toolbar控件. 1

<android.support.v7.widget.Toolbar android:id="@+id/title_main" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light"> </android.support.v7.widget.Toolbar>12345678

其中从上面那篇博文得知android:background="?attr/colorPrimary"中的?attr/colorPrimary似乎就是指向style中的item项目. 1

3.在MainActivity.java中引入Toolbar 1

protected void onCreate(Bundle savedInstanceState) { ... Toolbar toolbar = (Toolbar)findViewById(R.id.title_main); setSupportActionBar(toolbar); }12345

4.新建res/menu目录,在目录中新建title_main_menu.xml的menu资源文件. 1

<?xml version="1.0" encoding="utf-8"?> <menu xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/title_main_eye" android:icon="@drawable/eye_show" android:title="Show" app:showAsAction="always"/> <item android:id="@+id/title_main_add" android:icon="@drawable/add" android:title="Add" app:showAsAction="always"/> </menu>

12345678910111213141516

5.在MainActivity.java中重写onCreateOptionsMenu(Menu menu) 将title_main_menu引入,并重写onOptionsItemSelected(MenuItem item) 方法设置项目点击响应事件 1

//将toolbar中按钮选项赋予toolbar @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.title_main_menu,menu); return true; } //配置toolbar中各个选项选中响应事件 @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()){ case R.id.title_main_add: //TODO 在此处添加点击add响应的代码 break; case R.id.title_main_eye: if (isEyeHide = !isEyeHide){ item.setIcon(R.drawable.eye_hide); //TODO 在此处添加点击eye隐藏翻译的代码 } else{ item.setIcon(R.drawable.eye_show); //TODO 在此处添加点击eye显示翻译的代码 } break; default: } return true; }

1234567891011121314151617181920212223242526272829

至此,一个简单的顶部导航条搞定,当然后期还要对其进行美化,先构建出个大概的框架再说.

搜索了一下?attr/colorPrimary的含义,http://blog.csdn.net/u011153817/article/details/50015213中写的很清楚.

?attr/** 这个google叫预定义样式这个是用在多主题时的场景，属性值会随着主题而改变。 1，如果是自定义控件，请在style.xml中或attrs.xml中声明属性： <declare-styleable name="SunnyAttr"> <attr name="sunnyTextColor" format="reference"/> <attr name="sunnyBgColor" format="reference"/> <attr name="sunnyTextColorWhite" format="color"/> <attr name="sunnyTextColorRed" format="reference"/> <attr name="textColor" format="reference"></attr> </declare-styleable> 必须指明format为reference 2.因为attr/是跟随Theme来变化的，所以对attr跟随的属性必须在Theme里面声明：  <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">  <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> <item name="sunnyTextColorRed">@color/sunnyTextColorYellow</item> </style>

123456789101112131415161718192021