Android Metro菜单实现思路及代码

所属分类: 软件编程 / Android 阅读数: 1744
收藏 0 赞 0 分享
今天继续说一下安卓的菜单,之前介绍了:相信大家对于Metro风格并不陌生,下面就在安卓平台上实现一下这个效果,如图:
 
实现思路:
利用动画来实现移动的效果,使用的是TranslateAnimation这个方法。先看一下布局文件:
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里面对每一个Layout进行动画移动就可以实现平移的效果了。
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();
}
// 启动动画
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);
}
// 动画定义
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;
}
}

虽然效果还可以,但是布局文件由于使用嵌套,这样毁造成绘制窗口时性能的问题。所以你对程序要求很严格,那么建议使用RelativewLayout来布局,并且减少使用嵌套。
下载地址
更多精彩内容其他人还在看

Android 动画之AlphaAnimation应用详解

本节讲解AlphaAnimation 动画,窗口的动画效果,淡入淡出什么的,有些游戏的欢迎动画,logo的淡入淡出效果就使用AlphaAnimation,具体的祥看本文,需要的朋友可以参考下
收藏 0 赞 0 分享

Android 动画之TranslateAnimation应用详解

本节讲解TranslateAnimation动画,TranslateAnimation比较常用,比如QQ,网易新闻菜单条的动画,就可以用TranslateAnimation实现,本文将详细介绍通过TranslateAnimation 来定义动画,需要的朋友可以参考下
收藏 0 赞 0 分享

Android 动画之ScaleAnimation应用详解

本节讲解ScaleAnimation 动画在应用中的实现,有需要的朋友可以参考下
收藏 0 赞 0 分享

Android 动画之RotateAnimation应用详解

本节讲解旋转动画效果RotateAnimation方法的应用,有需要的朋友可以参考下
收藏 0 赞 0 分享

Android开发之文件操作模式深入理解

本文将介绍Android开发之文件操作模式,需要了解的朋友可以参考下
收藏 0 赞 0 分享

Android应用程序窗口(Activity)窗口对象(Window)创建指南

本文将详细介绍Android应用程序窗口(Activity)的窗口对象(Window)的创建过程,需要了解的朋友可以参考下
收藏 0 赞 0 分享

android activity设置无标题实现全屏

本文将详细介绍Android如何设置Activity全屏和无标题的实现方法,需要的朋友可以参考下
收藏 0 赞 0 分享

Android启动模拟器报错解决方法

本文将详细介绍Android模拟器报"Failed To Allocate memory 8"错误的解决办法,需要了解的朋友可以参考下
收藏 0 赞 0 分享

Android如何实现非本地图片的点击态

Android如何实现非本地图片的点击态,本文提供了详细的实现代码,需要了解的朋友可以参考下
收藏 0 赞 0 分享

android viewpaper实例探讨

本文将提供一个android viewpaper实例实现过程,需要了解更多的朋友可以参考下
收藏 0 赞 0 分享
查看更多