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

一:前言

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

二:具体实现过程

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项目以实现对导航条的美化,具体还未测试,等要美化的时候再来参考此篇博文.

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

---

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

<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>

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

---

3.在MainActivity.java中引入Toolbar

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

---

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

<?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>

---

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

    //将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;
    }

---

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

搜索了一下?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里面声明：
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <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>