Android Metro菜单实现思路及代码

今天继续说一下安卓的菜单,之前介绍了:相信大家对于Metro风格并不陌生,下面就在安卓平台上实现一下这个效果,如图:
Android 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>

它的效果是这样的:
Android Metro菜单实现思路及代码 
之后在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来布局,并且减少使用嵌套。
下载地址

时间: 2013-06-06

Android仿Win8的metro的UI界面(上)

手机下载了一些APP,发现现在仿win8的主界面越来越多,在大家见惯了类GridView或者类Tab后,给人一种耳目一新的感觉.今天在eoe上偶然发现已经有人实现了这个功能的源码(地址:http://www.eoeandroid.com/forum.php?mod=viewthread&tid=327557),马上下载跑了一下,效果很炫,但是有些bug,比如点击速度特别快时图像会被放大,以及点击时会触发两次点击事件. 本例子基于eoe中这位大神的实现,做了一些简化,和bug的修复. 效果: 首先

Android开发 -- UI界面之threme和style

Android系统的themes.xml和style.xml(位于\base\core\res\res\values\)包含了很多系统定义好的style,建议在里面挑个合适的,然后再继承修改. 一.threme android中的主题一般用于窗体级别的,用于改变窗体样式 1.Theme: 它的意思为默认状态,即如果theme这里不填任何属性的时候,默认为Theme 1.1.Theme_NoDisplay 它的意思为任何都不显示.比较适用于只是运行了activity,但未显示任何东西. 1.2.T

Android 在其他线程中更新UI线程的解决方法

方法一:Activity.runOnUiThread(Runnable )(经验之道: 这个最好用, 凡是要刷新页面的地方,Activity.runOnUiThread( new Runnable()  { public void run(){更新UI}}); 方法二:子线程调用Handler的sendMessage(message)发送事件. 复制代码 代码如下: mHandler = new Handler() {     @Override     public void handleMe

解析Android开发优化之:对界面UI的优化详解(三)

有时候,我们的页面中可能会包含一些布局,这些布局默认是隐藏的,当用户触发了一定的操作之后,隐藏的布局才会显示出来.比如,我们有一个Activity用来显示好友的列表,当用户点击Menu中的"导入"以后,在当前的Activity中才会显示出一个导入好友的布局界面.从需求的角度来说,这个导入功能,一般情况下用户是不使用的.即大部分时候,导入好友的布局都不会显示出来.这个时候,就可以使用延迟加载的功能. ViewStub是一个隐藏的,不占用内存空间的视图对象,它可以在运行时延迟加载布局资源文

Android仿Win8界面开发

本文将要模仿Win8界面的一个设计,一个一个的方块.方法很简单.这里自己把图片改改就可以成为自己想要的界面了. 1.首先来看看自定义的MyImageView: package com.example.win8test; import android.annotation.SuppressLint; import android.content.Context; import android.graphics.Camera; import android.graphics.Canvas; impo

解析Android开发优化之:对界面UI的优化详解(一)

通常,在这个页面中会用到很多控件,控件会用到很多的资源.Android系统本身有很多的资源,包括各种各样的字符串.图片.动画.样式和布局等等,这些都可以在应用程序中直接使用.这样做的好处很多,既可以减少内存的使用,又可以减少部分工作量,也可以缩减程序安装包的大小. 下面从几个方面来介绍如何利用系统资源. 1)利用系统定义的id 比如我们有一个定义ListView的xml文件,一般的,我们会写类似下面的代码片段. 复制代码 代码如下: <ListView android:id="@+id/m

Android 使用XML做动画UI的深入解析

效果: http://www.56.com/u82/v_OTM4MDk5MTk.html第一步: 创建anim文件夹放置动画xml文件在res文件夹下,创建一个anim的子文件夹. 第二步: 加载动画接着在Activity创建一个Animation类,然后使用AnimationUtils类加载动画xml 复制代码 代码如下: Animation animFadein; @Overrideprotected void onCreate(Bundle savedInstanceState) { su

Android界面效果UI开发资料汇总(附资料包)

简介: Android界面效果UI开发资料汇总 1. Android_UI开发专题.rar 2. android界面效果全汇总.rar 对于Android平台的资源类android.content.res.Resources可能很多网友比较陌生,一起来看看SDK上是怎么介绍的吧,Contains classes for accessing application resources, such as raw asset files, colors, drawables, media or oth

解析Android开发优化之:对界面UI的优化详解(二)

如果我们在每个xml文件中都把相同的布局都重写一遍,一个是代码冗余,可读性很差:另一个是修改起来比较麻烦,对后期的修改和维护非常不利.所以,一般情况下,我们需要把相同布局的代码单独写成一个模块,然后在用到的时候,可以通过<include /> 标签来重用layout的代码. 常见的,有的应用在最上方会有一个标题栏.类似下图所示. 图 标题栏的示例 如果项目中大部分Activity的布局都包含这样的标题栏,就可以把标题栏的布局单独写成一个xml文件. 复制代码 代码如下: <Relativ

Android开发中的几种网络请求方式详解

Android应用经常会和服务器端交互,这就需要手机客户端发送网络请求,下面介绍四种常用网络请求方式,我这边是通过Android单元测试来完成这四种方法的,还不清楚Android的单元测试的同学们请看Android开发技巧总结中的Android单元测试的步骤一文. Java.NET包中的HttpURLConnection类 Get方式: // Get方式请求 public static void requestByGet() throws Exception { String path = "h

Android开发教程之调用摄像头功能的方法详解

本文实例讲述了Android调用摄像头功能的方法.分享给大家供大家参考,具体如下: 我们要调用摄像头的拍照功能,显然 第一步必须加入调用摄像头硬件的权限,拍完照后我们要将图片保存在SD卡中,必须加入SD卡读写权限,所以第一步,我们应该在Android清单文件中加入以下代码 摄像头权限: <uses-permission android:name="android.permission.CAMERA"/> SD卡读写权限: <uses-permission androi

Android开发笔记之:消息循环与Looper的详解

Understanding LooperLooper是用于给一个线程添加一个消息队列(MessageQueue),并且循环等待,当有消息时会唤起线程来处理消息的一个工具,直到线程结束为止.通常情况下不会用到Looper,因为对于Activity,Service等系统组件,Frameworks已经为我们初始化好了线程(俗称的UI线程或主线程),在其内含有一个Looper,和由Looper创建的消息队列,所以主线程会一直运行,处理用户事件,直到某些事件(BACK)退出.如果,我们需要新建一个线程,并

Android开发之图形图像与动画(五)LayoutAnimationController详解

首先需要先介绍下LayoutAnimationController: * 1.LayoutAnimationController用于为一个layout里面的控件,或者是一个ViewGroup * 里面的控件设置动画效果(即整个布局) * 2.每一个控件都有相同的动画效果 * 3.这些控件的动画效果在不同的实现显示出来 * 4.LayoutAnimationController可以在xml文件当中设置,也可以在代码中进行设置 本文就针对两种实现LayoutAnimationController的方

解决Fedora14下eclipse进行android开发,ibus提示没有输入窗口的方法详解

好不容易搭建好了开发环境,可是不管怎么按Ctr + space,ibus就是不弹出来.用鼠标点吧,上面提示没有输入窗口.真是操蛋!google了一圈也没有解决办法,我是第一个遇到这问题的人么??无奈下,干脆换输入法!将系统自带的ibus换成fcitx输入法,安装步骤为:首先切换到root1,yum install fcitx2, alternatives --config xinputrc会出来提示,会提示共有 4 个程序提供"xinputrc".选择    命令-----------

Android开发笔记之:ListView刷新顺序的问题详解

背景一个典型的ListView,每个Item显示一个TextView,代表一个Task,需要实现二个编辑方式:一个是用CheckBox来标识任务已经完成,另一个要实现的编辑是删除任务.对于完成的CheckBox就直接放在布局中就可,但对于删除不想使用ContextMenu来实现编辑,对于像iOS中那样的列表,它的删除都是通过对列表中每个项目的手势来触发.这个实现起来并不难,可以用一个ViewSwitcher,Checkbox和删除按扭是放入其中,让ViewSwitcher来控制显示哪一个,正常情

Android开发之完成登陆界面的数据保存回显操作实例

本文实例讲述了Android开发之完成登陆界面的数据保存回显操作.分享给大家供大家参考,具体如下: LoginActivity.java: package com.example.login; import java.util.Map; import android.app.Activity; import android.os.Bundle; import android.text.TextUtils; import android.view.Menu; import android.view