android(一) 選單建立

海綿666發表於2017-11-01

android中當我們需要進行相應的頁面跳轉時,我們可以通過選單的方式來對頁面進行切換,如下是一個比較傳統的menu佈局:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.demo.mianhai.woyaodushu.MainActivity" >
    <item
        android:id="@+id/action_new"
        android:orderInCategory="1"
        android:title="SubMenu"
        android:icon="@drawable/ic_drawer_home"
        app:showAsAction="always">
        <menu>
            <item android:id="@+id/submenu1"
                android:title="Accept"
                android:titleCondensed="Accept"
                android:icon="@drawable/ic_notifications" />
            <item android:id="@+id/submenu2"
                android:title="Cancel"
                android:titleCondensed="Cancel"
                android:icon="@drawable/ic_notifications" />
            <item android:id="@+id/submenu3"
                android:title="Unread"
                android:titleCondensed="Unread"
                android:icon="@drawable/ic_notifications" />
        </menu>
    </item>
    <item
        android:id="@+id/action_overflow"
        android:orderInCategory="2"
        android:title="PopupWindow"
        android:icon="@drawable/ic_menu_more_overflow"
        app:showAsAction="always"/>
</menu>

由上我們可以獲得一個差不多類似於微信懸浮窗的效果,如圖(+號所顯示的內容,圖片來自網路)這裡寫圖片描述

以上看名字都可以理解的我就不解釋了

  • orderInCategory:通過設定數值的大小來決定優先順序,值越大優先順序就越低,這樣當actionbar空間位置不夠時就會被隱藏掉
  • showAsAction:可填的數值有ifRoom、never、always、withText、collapseActionView,可以混合使用。

  • ifRoom 會顯示在Item中,但是如果已經有4個或者4個以上的Item時會隱藏在溢位列表中。當然個數並不僅僅侷限於4個,依據螢幕的寬窄而定

  • never 永遠不會顯示。只會在溢位列表中顯示,而且只顯示標題,所以在定義item的時候,最好把標題都帶上。

  • always 無論是否溢位,總會顯示。

  • withText withText值示意Action bar要顯示文字標題。Actionbar會盡可能的顯示這個標題,但是,如果圖示有效並且受到Action bar空間的限制,文字標題有可能顯示不全。

  • collapseActionView 宣告瞭這個操作視窗應該被摺疊到一個按鈕中,當使用者選擇這個按鈕時,這個操作視窗展開。否則,這個操作視窗在預設的情況下是可見的,並且即便在用於不適用的時候,也要佔據操作欄的有效空間。

一般我們設定ifroom就行了,當然也可以混合顯示,看需求決定,那麼如上的檢視我們要如何實現呢?這裡列舉了幾種比較常規的方法,看情況決定哪一種。
通過PopupWindow來實現,程式碼如下:

package com.demo.mianhai.woyaodushu;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Gravity;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.View;
import android.widget.PopupWindow;

public class Main3Activity extends AppCompatActivity {

    Toolbar toolbar = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main3);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu items for use in the action bar
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.menu3, menu);
        return true;
    }


    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        switch (id) {
            case R.id.action_overflow:
                popUpMyOverflow();//彈出自定義overflow
                return true;
        }
        return super.onOptionsItemSelected(item);
    }


    public void popUpMyOverflow() {
        /**
         * 定位PopupWindow,讓它恰好顯示在Action Bar的下方。 通過設定Gravity,確定PopupWindow的大致位置。
         * 首先獲得狀態列的高度,再獲取Action bar的高度,這兩者相加設定y方向的offset樣PopupWindow就顯示在action
         * bar的下方了。 通過dp計算出px,就可以在不同密度螢幕統一X方向的offset.但是要注意不要讓背景陰影大於所設定的offset,
         * 否則陰影的寬度為offset.
         */
        // 獲取狀態列高度
        Rect frame = new Rect();
        getWindow().getDecorView().getWindowVisibleDisplayFrame(frame);
//        狀態列高度:frame.top,這裡的R.layout.activity_tool_bar其實就是上圖中的第二個選單按鈕顯示出來的檢視
        int xOffset = frame.top+this.getSupportActionBar().getHeight()-25;//減去陰影寬度,適配UI.
        int yOffset = Dp2Px(this, 5f); //設定x方向offset為5dp
        View parentView = getLayoutInflater().inflate(R.layout.activity_main,
                null);
        View popView = getLayoutInflater().inflate(
                R.layout.activity_tool_bar, null);
        PopupWindow popWind = new PopupWindow(popView,
                Toolbar.LayoutParams.WRAP_CONTENT,  Toolbar.LayoutParams.WRAP_CONTENT, true);//popView即popupWindow的佈局,ture設定focusAble.

        //必須設定BackgroundDrawable後setOutsideTouchable(true)才會有效。這裡在XML中定義背景,所以這裡設定為null;
        popWind.setBackgroundDrawable(new BitmapDrawable(getResources(),
                (Bitmap) null));
        popWind.setOutsideTouchable(true); //點選外部關閉。
        popWind.setAnimationStyle(android.R.style.Animation_Dialog);    //設定一個動畫。
        //設定Gravity,讓它顯示在右上角。
        popWind.showAtLocation(parentView, Gravity.RIGHT | Gravity.TOP,
                yOffset, xOffset);
    }

    public int Dp2Px(Context context, float dp) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dp * scale + 0.5f);
    }
}

你以為這樣就完了?不,由於我的安卓版本是5.0的,所以相應的繼承的類是AppCompatActivity,預設的actionbar是懸浮效果的,我們需要在value/style.xml中更改如下程式碼:

   <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="actionOverflowMenuStyle">@style/LYJMenuStyle</item>
    </style>

    <style name="LYJMenuStyle" parent="@style/Widget.AppCompat.Light.PopupMenu.Overflow">
    <!--關掉懸浮效果-->
    <item name="overlapAnchor">false</item>
    </style>

如果你這邊需要做到像知乎一樣的選單的話,只需將overlapAnchor改為true,如下:

<style name="LYJMenuStyle" parent="@style/Widget.AppCompat.Light.PopupMenu.Overflow">
    <!--關掉懸浮效果-->
    <item name="overlapAnchor">true</item>
    </style>

這裡寫圖片描述

第二種方法,通過設定在menu.xml中的item中設定actionProviderClass屬性,來建立子選單。選單如下:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.demo.mianhai.woyaodushu.MainActivity"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/search_menu"
        android:icon="@mipmap/ic_search"
        android:title="@string/search_menu"
        app:actionProviderClass="com.demo.mianhai.woyaodushu.actionprovide.MenuProvide"
        app:showAsAction="always"
        />
    <item
        android:id="@+id/notify_menu"
        android:icon="@mipmap/ic_notifications"
        android:title="@string/notify_menu"
        app:showAsAction="ifRoom"
        />
    <item
        android:id="@+id/setting"
        android:icon="@mipmap/ic_menu_more_overflow"
        android:title="設定"
        app:showAsAction="never"
        />
    <item
        android:id="@+id/about"
        android:icon="@mipmap/ic_menu_more_overflow"
        android:title="關於"
        app:showAsAction="never"
        />
</menu>

MenuProvide類的實現如下:

public class MenuProvide extends ActionProvider {
    /**
     * Creates a new instance.
     *
     * @param context Context for accessing resources.
     */
    public MenuProvide(Context context) {
        super(context);
    }

    @Override
    public View onCreateActionView() {
        return null;
    }

    @Override
    public void onPrepareSubMenu(SubMenu subMenu) {
        subMenu.clear();
        subMenu.add("sub item 1").setIcon(R.mipmap.ic_notifications)
                .setOnMenuItemClickListener(new MenuItem.OnMenuItemClickListener() {
                    @Override
                    public boolean onMenuItemClick(MenuItem item) {
                        return true;
                    }
                });
        subMenu.add("sub item 2").setIcon(R.mipmap.ic_search)
                .setOnMenuItemClickListener(new MenuItem.OnMenuItemClickListener() {
                    @Override
                    public boolean onMenuItemClick(MenuItem item) {
                        return false;
                    }
                });
    }
    @Override
    public boolean hasSubMenu() {
        return true;
    }
}

以上的類可以清晰的看出我們對submenu進行了重寫賦值,為其新增了子選單,這裡我們同樣可以獲取類似於以下的效果
這裡寫圖片描述
一般我們用ActionProvider往往還要講到他的兒子ShareActionProvider,但這裡就不做特別的詳解了,直接貼相關的程式碼,步驟如下:

1 在rest下建立Asset這個資料夾,放入你想放的圖片
2. 在menu中進行配置檔案,如下:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_search"
        android:icon="@drawable/ic_search"
        android:title="@string/action_search"
        app:showAsAction="ifRoom"
        app:actionViewClass="android.support.v7.widget.SearchView"/>
    <item
        android:id="@+id/action_share"
        android:icon="@drawable/ic_share"
        android:title="@string/action_share"
        app:actionProviderClass="android.support.v7.widget.ShareActionProvider"
        app:showAsAction="ifRoom"/>
</menu>

在Activity中新增如下程式碼:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu items for use in the action bar
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.main_menu, menu);
    MenuItem shareItem = menu.findItem(R.id.action_share);
    ShareActionProvider shareActionProvider = (ShareActionProvider)
            MenuItemCompat.getActionProvider(shareItem);
    shareActionProvider.setShareIntent(getDefaultIntent());
    return super.onCreateOptionsMenu(menu);
}

private Intent getDefaultIntent() {
    Intent intent = new Intent(Intent.ACTION_SEND);
    intent.setType("image/*");
    return intent;
}

一般可以獲得如下的效果圖:
這裡寫圖片描述

使用material design 來設計toolbar

相比與android自帶的toolbar,我們更傾向於使用material design的設計風格,那麼我們首先需要將我們需要的包給導進來,在app/build.gradle 下新增如下程式碼

 compile 'com.android.support:design:23.2.1'

由於我用的sdk是23的,所以這裡的版本你要根據實際情況來寫。
接下來我們可以新建一個layout,用於放我們的toolbar,如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:toolbar="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimaryDark"
        android:theme="@style/Theme.ToolBar.ZhiHu">
    </android.support.v7.widget.Toolbar>
</LinearLayout>

由於我們的佈局存在了toolbar了,所以我們需要將預設的toolbar給關掉,在AndroidManifest.xml下對theme主題進行更改,如下:

android:theme="@style/Theme.ToolBar.Base"

res/value/style.xml 加入如下程式碼:

  <style name="Theme.ToolBar.Base" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:textColorPrimary">@color/colorPrimaryDark</item>
    <item name="actionOverflowButtonStyle">@style/ActionButton.Overflow.ZhiHu</item>
  </style>

  <!--設定隱藏選單的顏色-->
  <style name="ActionButton.Overflow.ZhiHu" parent="android:style/Widget.Holo.Light.ActionButton.Overflow">
    <item name="android:src">@drawable/ic_menu_more_overflow</item>
  </style>

上面如果不加@style/ActionButton.Overflow.ZhiHu顯示出來的效果圖是這樣的:
這裡寫圖片描述

接下來在我們的主類下新增如下程式碼:

public class MainActivity extends AppCompatActivity {

    Toolbar toolbar = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
       // requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_tool_bar);
       initToolBar();
    }

    private void initToolBar(){
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setNavigationIcon(R.mipmap.ic_drawer_home);//設定導航欄圖示
        //toolbar.setLogo(R.mipmap.ic_launcher);//設定app logo
        //toolbar.setTitle("Title");//設定主標題
        //toolbar.setSubtitle("Subtitle");//設定子標題

        toolbar.inflateMenu(R.menu.zhihu_menu);//設定右上角的填充選單

        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                int menuItemId = item.getItemId();
                if (menuItemId == R.id.setting) {
                    Toast.makeText(MainActivity.this , R.string.item_01 , Toast.LENGTH_SHORT).show();

                } else if (menuItemId == R.id.about) {
                    Toast.makeText(MainActivity.this , R.string.item_02 , Toast.LENGTH_SHORT).show();

                }
                return true;
            }
        });
    }
}

menu選單佈局

<menu xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  tools:context="com.demo.mianhai.woyaodushu.MainActivity"
  xmlns:app="http://schemas.android.com/apk/res-auto">
  <item
    android:id="@+id/search_menu"
    android:icon="@drawable/ic_search"
    android:title="@string/search_menu"
    app:showAsAction="always"
    />
  <item
    android:id="@+id/notify_menu"
    android:icon="@drawable/ic_notifications"
    android:title="@string/notify_menu"
    app:showAsAction="ifRoom"
    />
  <item
    android:id="@+id/setting"
    android:icon="@drawable/ic_menu_more_overflow"
    android:title="設定"
    app:showAsAction="never"
    />
  <item
    android:id="@+id/about"
    android:icon="@drawable/ic_menu_more_overflow"
    android:title="關於"
    app:showAsAction="never"
    />

</menu>

這就不添圖了,這邊我們只需要如何使用material design的toolbar就行了,下面我們再來講解一下toolbar + drawerlayer 實現抽屜佈局效果,這種效果一般對功能點比較多的可以考慮使用,如下就是一個我們比較常見的抽屜效果圖:
這裡寫圖片描述

android為我們提供了一個簡單的drawerlayout佈局然我們可以輕鬆實現這個效果,如下是實現程式碼:

package com.demo.mianhai.hbook;

import android.os.Bundle;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;

public class DrawerActivity extends AppCompatActivity {

  Toolbar toolbar = null;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_drawer);
    initToolBar();
  }

  private void initToolBar(){
    toolbar = (Toolbar) findViewById(R.id.toolBar);
    //toolbar.setNavigationIcon(R.drawable.ic_drawer_home);//設定導航欄圖示
    //toolbar.setLogo(R.mipmap.ic_launcher);//設定app logo
    //toolbar.setTitle("Title");//設定主標題
    //toolbar.setSubtitle("Subtitle");//設定子標題

    DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawer);
    toolbar.setTitleTextColor(getResources().getColor(android.R.color.white));
    setSupportActionBar(toolbar);
    ActionBarDrawerToggle actionBarDrawerToggle=new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.open_string,R.string.close_string);
    actionBarDrawerToggle.syncState();

    drawerLayout.addDrawerListener(actionBarDrawerToggle);


  }
}

layout.xml程式碼如下:

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/drawer"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context="com.demo.mianhai.hbook.DrawerActivity">

  <RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
      android:id="@+id/toolBar"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:background="@color/colorPrimary"
      android:minHeight="?attr/actionBarSize"
      >

    </android.support.v7.widget.Toolbar>

    <FrameLayout
      android:id="@+id/contentFL"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:layout_below="@+id/toolBar" >
    </FrameLayout>

  </RelativeLayout>


  <LinearLayout
    android:id="@+id/menuLL"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_gravity="start"
    android:clickable="true"
    android:background="@android:color/white"
    android:orientation="vertical">

    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="sss"
      />
  </LinearLayout>
</android.support.v4.widget.DrawerLayout>

需要注意的是,這邊我們需要用到material design裡面的toolbar來實現,如果是用系統預設的話,那麼佈局會往下跑,這個下面會講,執行完就可以出現上面類似於上面的佈局效果了。
如果我們要實現的效果是把佈局放到toolbar下面呢,如圖所示:
這裡寫圖片描述
這邊我們需要對我們的佈局xml做一些微調,讓他用的是我們的系統自帶的那個,佈局xml如下:

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/drawer"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context="com.demo.mianhai.hbook.DrawerActivity">

  <RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">
    <FrameLayout
      android:id="@+id/contentFL"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:layout_below="@+id/toolBar" >
    </FrameLayout>

  </RelativeLayout>


  <LinearLayout
    android:id="@+id/menuLL"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_gravity="start"
    android:clickable="true"
    android:background="@android:color/white"
    android:orientation="vertical">
    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="sss"
      />
  </LinearLayout>
</android.support.v4.widget.DrawerLayout>

程式碼:

package com.demo.mianhai.hbook;

import android.os.Bundle;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;

public class Drawer2Activity extends AppCompatActivity {

  private DrawerLayout drawerLayout = null;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_drawer2);

    drawerLayout= (DrawerLayout) findViewById(R.id.drawer);

    getSupportActionBar().setHomeButtonEnabled(true);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    ActionBarDrawerToggle actionBarDrawerToggle=new ActionBarDrawerToggle(this,drawerLayout,R.string.open_string,R.string.close_string);
    actionBarDrawerToggle.syncState();
    drawerLayout.addDrawerListener(actionBarDrawerToggle);


  }

  @Override
  public boolean onOptionsItemSelected(MenuItem item) {
    int id = item.getItemId();
    //noinspection SimplifiableIfStatement
    if (id == android.R.id.home) {
      if(  drawerLayout.isDrawerOpen(GravityCompat.START)
          ){
        drawerLayout.closeDrawers();
      }else{
        drawerLayout.openDrawer(GravityCompat.START);
      }
      return true;
    }
    return super.onOptionsItemSelected(item);
  }
}

androidmanifest.xml

<activity
            android:name=".activity.DrawerLayout2Activity"
            android:theme="@style/AppTheme"
            android:label="@string/title_activity_drawer_layout2" >
        </activity>

好了上面的簡單效果圖也出來了

未完待續

參考文獻:
http://www.jianshu.com/p/d70e2fd4d0be
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/1120/2021.html
https://developer.android.google.cn/guide/index.html
http://m.blog.csdn.net/Guofengpu/article/details/51965925
http://www.jianshu.com/p/ae0013a4f71a
http://www.jianshu.com/p/0acc12c29c1b
http://www.jianshu.com/p/79604c3ddcae
http://www.jianshu.com/p/3fe2acac0ddb

相關文章