Android Metro菜單實(shí)現(xiàn)思路及代碼
更新時(shí)間：2013年06月08日 15:10:31 作者：
在安卓平臺(tái)上實(shí)現(xiàn)一下Metro菜單效果，之前有介紹過(guò)了，相信大家對(duì)此不會(huì)陌生了吧，感興趣的朋友可以了解下哈
今天繼續(xù)說(shuō)一下安卓的菜單，之前介紹了：相信大家對(duì)于Metro風(fēng)格并不陌生，下面就在安卓平臺(tái)上實(shí)現(xiàn)一下這個(gè)效果,如圖：
實(shí)現(xiàn)思路：
利用動(dòng)畫來(lái)實(shí)現(xiàn)移動(dòng)的效果，使用的是TranslateAnimation這個(gè)方法。先看一下布局文件：
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#000000"
android:orientation="vertical" >
<!-- 第一層 -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<!-- 第一層 橫向 -->
<!-- 第一層 橫向左 -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<!-- 1 -->
<RelativeLayout
android:id="@+id/nine_one"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#FFFF00" >
</RelativeLayout>
<!-- 2 -->
<RelativeLayout
android:id="@+id/nine_two"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#FFC0CB" >
</RelativeLayout>
</LinearLayout>
<!-- 4 -->
<RelativeLayout
android:id="@+id/nine_four"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#EE30A7" >
</RelativeLayout>
<!-- 5 -->
<RelativeLayout
android:id="@+id/nine_five"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#EE4000" >
</RelativeLayout>
</LinearLayout>
<!-- 第一層 橫向右 -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="2"
android:orientation="vertical" >
<!-- 3 -->
<RelativeLayout
android:id="@+id/nine_three"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="2"
android:background="#FF8C69" >
</RelativeLayout>
<!-- 6 -->
<RelativeLayout
android:id="@+id/nine_six"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#8C8C8C" >
</RelativeLayout>
</LinearLayout>
</LinearLayout>
<!-- 第二層 -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="3"
android:baselineAligned="false"
android:orientation="horizontal" >
<!-- 7 -->
<RelativeLayout
android:id="@+id/nine_seven"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#8B3E2F" >
</RelativeLayout>
<!-- 8 -->
<!-- 9 -->
<RelativeLayout
android:id="@+id/nine_nine"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#A52A2A" >
</RelativeLayout>
</LinearLayout>
</LinearLayout>
它的效果是這樣的：
之后在MainActivity里面對(duì)每一個(gè)Layout進(jìn)行動(dòng)畫移動(dòng)就可以實(shí)現(xiàn)平移的效果了。
MainActivity.java：
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.view.animation.TranslateAnimation;
import android.widget.RelativeLayout;
import android.widget.Toast;
/**
*
*/
public class MainActivity extends Activity {
private View viewNine;
private LayoutInflater inflater;
private RelativeLayout nine_one, nine_two, nine_three, nine_four,
nine_five, nine_six, nine_seven, nine_nine;
private TranslateAnimation myAnimation_Right, myAnimation_Bottom;
private TranslateAnimation myAnimation_Left, myAnimation_Top;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
inflater = LayoutInflater.from(this);
viewNine = inflater.inflate(R.layout.activity_main, null);
nine_one = (RelativeLayout) viewNine.findViewById(R.id.nine_one);
nine_two = (RelativeLayout) viewNine.findViewById(R.id.nine_two);
nine_three = (RelativeLayout) viewNine.findViewById(R.id.nine_three);
nine_four = (RelativeLayout) viewNine.findViewById(R.id.nine_four);
nine_five = (RelativeLayout) viewNine.findViewById(R.id.nine_five);
nine_six = (RelativeLayout) viewNine.findViewById(R.id.nine_six);
nine_seven = (RelativeLayout) viewNine.findViewById(R.id.nine_seven);
nine_nine = (RelativeLayout) viewNine.findViewById(R.id.nine_nine);
setContentView(viewNine);
nine_four.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Intent intent=new Intent(MainActivity.this,OneActivity.class);
startActivity(intent);
}
});
nine_six.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
}
});
myAnimation();
addAnimation();
}
// 啟動(dòng)動(dòng)畫
private void addAnimation() {
nine_one.startAnimation(myAnimation_Right);
nine_two.startAnimation(myAnimation_Bottom);
nine_three.startAnimation(myAnimation_Left);
nine_four.startAnimation(myAnimation_Bottom);
nine_five.startAnimation(myAnimation_Left);
nine_six.startAnimation(myAnimation_Top);
nine_seven.startAnimation(myAnimation_Left);
nine_nine.startAnimation(myAnimation_Left);
}
// 動(dòng)畫定義
private void myAnimation() {
DisplayMetrics displayMetrics = new DisplayMetrics();
displayMetrics = this.getResources().getDisplayMetrics();
// 獲得屏幕寬度
int screenWidth = displayMetrics.widthPixels;
// 獲得屏幕高度
int screenHeight = displayMetrics.heightPixels;
myAnimation_Right = new TranslateAnimation(screenWidth, 0, 0, 0);
myAnimation_Right.setDuration(1800);
myAnimation_Bottom = new TranslateAnimation(0, 0, screenHeight, 0);
myAnimation_Bottom.setDuration(1500);
myAnimation_Left = new TranslateAnimation(-screenWidth, 0, 0, 0);
myAnimation_Left.setDuration(2000);
myAnimation_Top = new TranslateAnimation(0, 0, -screenHeight, 0);
myAnimation_Top.setDuration(2500);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
// getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
}
雖然效果還可以，但是布局文件由于使用嵌套，這樣毀造成繪制窗口時(shí)性能的問(wèn)題。所以你對(duì)程序要求很嚴(yán)格，那么建議使用RelativewLayout來(lái)布局，并且減少使用嵌套。
下載地址
實(shí)現(xiàn)思路：
利用動(dòng)畫來(lái)實(shí)現(xiàn)移動(dòng)的效果，使用的是TranslateAnimation這個(gè)方法。先看一下布局文件：
activity_main.xml
復(fù)制代碼 代碼如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#000000"
android:orientation="vertical" >
<!-- 第一層 -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<!-- 第一層 橫向 -->
<!-- 第一層 橫向左 -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<!-- 1 -->
<RelativeLayout
android:id="@+id/nine_one"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#FFFF00" >
</RelativeLayout>
<!-- 2 -->
<RelativeLayout
android:id="@+id/nine_two"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#FFC0CB" >
</RelativeLayout>
</LinearLayout>
<!-- 4 -->
<RelativeLayout
android:id="@+id/nine_four"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#EE30A7" >
</RelativeLayout>
<!-- 5 -->
<RelativeLayout
android:id="@+id/nine_five"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#EE4000" >
</RelativeLayout>
</LinearLayout>
<!-- 第一層 橫向右 -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="2"
android:orientation="vertical" >
<!-- 3 -->
<RelativeLayout
android:id="@+id/nine_three"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="2"
android:background="#FF8C69" >
</RelativeLayout>
<!-- 6 -->
<RelativeLayout
android:id="@+id/nine_six"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#8C8C8C" >
</RelativeLayout>
</LinearLayout>
</LinearLayout>
<!-- 第二層 -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="3"
android:baselineAligned="false"
android:orientation="horizontal" >
<!-- 7 -->
<RelativeLayout
android:id="@+id/nine_seven"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#8B3E2F" >
</RelativeLayout>
<!-- 8 -->
<!-- 9 -->
<RelativeLayout
android:id="@+id/nine_nine"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#A52A2A" >
</RelativeLayout>
</LinearLayout>
</LinearLayout>
它的效果是這樣的：
之后在MainActivity里面對(duì)每一個(gè)Layout進(jìn)行動(dòng)畫移動(dòng)就可以實(shí)現(xiàn)平移的效果了。
MainActivity.java：
復(fù)制代碼 代碼如下:
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.view.animation.TranslateAnimation;
import android.widget.RelativeLayout;
import android.widget.Toast;
/**
*
*/
public class MainActivity extends Activity {
private View viewNine;
private LayoutInflater inflater;
private RelativeLayout nine_one, nine_two, nine_three, nine_four,
nine_five, nine_six, nine_seven, nine_nine;
private TranslateAnimation myAnimation_Right, myAnimation_Bottom;
private TranslateAnimation myAnimation_Left, myAnimation_Top;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
inflater = LayoutInflater.from(this);
viewNine = inflater.inflate(R.layout.activity_main, null);
nine_one = (RelativeLayout) viewNine.findViewById(R.id.nine_one);
nine_two = (RelativeLayout) viewNine.findViewById(R.id.nine_two);
nine_three = (RelativeLayout) viewNine.findViewById(R.id.nine_three);
nine_four = (RelativeLayout) viewNine.findViewById(R.id.nine_four);
nine_five = (RelativeLayout) viewNine.findViewById(R.id.nine_five);
nine_six = (RelativeLayout) viewNine.findViewById(R.id.nine_six);
nine_seven = (RelativeLayout) viewNine.findViewById(R.id.nine_seven);
nine_nine = (RelativeLayout) viewNine.findViewById(R.id.nine_nine);
setContentView(viewNine);
nine_four.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Intent intent=new Intent(MainActivity.this,OneActivity.class);
startActivity(intent);
}
});
nine_six.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
}
});
myAnimation();
addAnimation();
}
// 啟動(dòng)動(dòng)畫
private void addAnimation() {
nine_one.startAnimation(myAnimation_Right);
nine_two.startAnimation(myAnimation_Bottom);
nine_three.startAnimation(myAnimation_Left);
nine_four.startAnimation(myAnimation_Bottom);
nine_five.startAnimation(myAnimation_Left);
nine_six.startAnimation(myAnimation_Top);
nine_seven.startAnimation(myAnimation_Left);
nine_nine.startAnimation(myAnimation_Left);
}
// 動(dòng)畫定義
private void myAnimation() {
DisplayMetrics displayMetrics = new DisplayMetrics();
displayMetrics = this.getResources().getDisplayMetrics();
// 獲得屏幕寬度
int screenWidth = displayMetrics.widthPixels;
// 獲得屏幕高度
int screenHeight = displayMetrics.heightPixels;
myAnimation_Right = new TranslateAnimation(screenWidth, 0, 0, 0);
myAnimation_Right.setDuration(1800);
myAnimation_Bottom = new TranslateAnimation(0, 0, screenHeight, 0);
myAnimation_Bottom.setDuration(1500);
myAnimation_Left = new TranslateAnimation(-screenWidth, 0, 0, 0);
myAnimation_Left.setDuration(2000);
myAnimation_Top = new TranslateAnimation(0, 0, -screenHeight, 0);
myAnimation_Top.setDuration(2500);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
// getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
}
雖然效果還可以，但是布局文件由于使用嵌套，這樣毀造成繪制窗口時(shí)性能的問(wèn)題。所以你對(duì)程序要求很嚴(yán)格，那么建議使用RelativewLayout來(lái)布局，并且減少使用嵌套。
下載地址
您可能感興趣的文章:
- Android仿Win8界面開發(fā)
- Android開發(fā) -- UI界面之threme和style
- 解析Android開發(fā)優(yōu)化之:對(duì)界面UI的優(yōu)化詳解(三)
- 解析Android開發(fā)優(yōu)化之:對(duì)界面UI的優(yōu)化詳解(二)
- 解析Android開發(fā)優(yōu)化之:對(duì)界面UI的優(yōu)化詳解(一)
- Android界面效果UI開發(fā)資料匯總(附資料包)
- Android 使用XML做動(dòng)畫UI的深入解析
- Android 在其他線程中更新UI線程的解決方法
- Android仿Win8的metro的UI界面（上）
相關(guān)文章
這篇文章主要介紹了Android源碼中常用的接口傳參實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04
Android實(shí)現(xiàn)關(guān)機(jī)后數(shù)據(jù)不會(huì)丟失問(wèn)題
這篇文章主要介紹了Android實(shí)現(xiàn)關(guān)機(jī)后數(shù)據(jù)不會(huì)丟失問(wèn)題，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了Android本地存儲(chǔ)案例，方法簡(jiǎn)單可以實(shí)現(xiàn)存儲(chǔ)并達(dá)到節(jié)省內(nèi)存的效果，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-10-10
這篇文章主要為大家詳細(xì)介紹了利用MVC編寫廣告條輪播效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
Android使用WindowManager構(gòu)造懸浮view
這篇文章主要為大家詳細(xì)介紹了Android使用WindowManager構(gòu)造懸浮view的具體方法，感興趣的小伙伴們可以參考一下2016-05-05
協(xié)程上下文是一個(gè)有索引的Element實(shí)例集合，每個(gè)element在這個(gè)集合里有一個(gè)唯一的key；協(xié)程上下文包含用戶定義的一些數(shù)據(jù)集合，這些數(shù)據(jù)與協(xié)程密切相關(guān)；協(xié)程上下文用于控制線程行為、協(xié)程的生命周期、異常以及調(diào)試2022-08-08
Android Flutter利用CustomPaint繪制基本圖形詳解
CustomPaint其實(shí)和前端的Canvas基本上是一樣的，前端Canvas支持的繪制方法CustomPaint都支持，畢竟CustomPaint其實(shí)也是基于Canvas實(shí)現(xiàn)的。本篇我們來(lái)介紹 CustomPaint 基本圖形的繪制，感興趣的可以了解一下2022-07-07
Android編程實(shí)現(xiàn)兩個(gè)Activity相互切換而不使用onCreate()的方法
這篇文章主要介紹了Android編程實(shí)現(xiàn)兩個(gè)Activity相互切換而不使用onCreate()的方法,結(jié)合實(shí)例形式分析了多個(gè)Activity切換而不重新創(chuàng)建的操作技巧,需要的朋友可以參考下2017-01-01
Android 將網(wǎng)絡(luò)的Url資源轉(zhuǎn)換為Drawable資源方式
這篇文章主要介紹了Android 將網(wǎng)絡(luò)的Url資源轉(zhuǎn)換為Drawable資源方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-03-03
現(xiàn)在的視頻網(wǎng)站基本都帶有彈幕效果，滿屏幕的文字從右到左飄來(lái)飄去?？雌饋?lái)還蠻炫的，這篇文章就是來(lái)實(shí)現(xiàn)這個(gè)效果，大部分的都是從右向左移動(dòng)漂移，本文的效果中也支持從左向右的漂移移動(dòng)效果，同時(shí)也支持屏幕彈幕最多顯示個(gè)數(shù)的設(shè)置。有需要的可以參考借鑒。2016-08-08