android(一) 選單建立
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
相關文章
- Android 選單(OptionMenu)大全 建立你自己的選單Android
- [譯] 如何建立 BubblePicker – Android 多彩選單動畫Android動畫
- Android studio(建立、監聽器intent選單)AndroidIntent
- 動態建立選單
- 建立上下文選單
- 建立點陣圖選單 (轉)
- 簡單的Android介面建立Android
- 用HTML建立連動下拉選單HTML
- Android開發之Menu:OptionMenu(選項選單)、ContextMenu(上下文選單)、SubMenu(子選單)AndroidContext
- JavaScript動態建立select下拉選單JavaScript
- Android側滑選單DrawerLayout使用Android
- Android列表實現單選、多選、全選、取消、刪除Android
- 如何快速在odoo中建立自己的選單Odoo
- No MFC,Only API——選單的建立和使用 (轉)API
- 使用 Java 在Excel中建立下拉選單JavaExcel
- 一個CollectionView 選單View
- WordPress外掛入口選單建立的位置程式碼
- 建立程式選單和快捷方式的程式碼
- 若依管理系統RuoYi-Vue(一):專案啟動和選單建立Vue
- Android最簡單的側劃選單,DrawerLayout的使用Android
- 原生Android 側滑選單實踐(部分)Android
- ios 仿android的popupwindow彈出選單iOSAndroid
- android的左右側滑選單實現Android
- 【Android】Menu不同選單的使用介紹Android
- Unity 3D編輯器擴充套件介紹、教程(一) —— 建立選單項Unity3D套件
- 使用點陣圖選單項——建立點陣圖 (轉)
- 實現單擊一級選單顯示或隱藏二級選單
- 【Android】Android開源專案精選(一)Android
- 建立一個簡單的小程式
- 動態建立table表格併為每一個td單元格註冊點選事件事件
- Android通知之單選對話方塊通知Android
- android 之 Spinner 下拉選單實現級聯Android
- Android UI控制元件系列:Spinner(下拉選單)AndroidUI控制元件
- 建立支援類別下拉選單的Oracle查詢表DMOracle
- 新浪微部落格戶端(6)-建立首頁下拉選單
- 第四章問題:建立選單時出錯
- 怎麼在linux下建立帶選單的DVD(轉)Linux
- 用XML資料島建立上下文選單 (轉)XML