请选择 进入手机版 | 继续访问电脑版

牛大大的个人博客

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 2530|回复: 1

Android Metro菜单

[复制链接]

149

主题

201

帖子

643

积分

版主

Rank: 7Rank: 7Rank: 7

积分
643
发表于 2020-5-31 17:02:31 | 显示全部楼层 |阅读模式
今天继续说一下安卓的菜单,之前介绍了:。相信大家对于Metro风格并不陌生,下面就在安卓平台上实现一下这个效果,如图:
  实现思路:
  利用动画来实现移动的效果,使用的是TranslateAnimation这个方法。先看一下布局文件:

   activity_main.xml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="fill_parent"
  4.     android:layout_height="fill_parent"
  5.     android:background="#000000"
  6.     android:orientation="vertical" >

  7.     <!-- 第一层 -->

  8.     <LinearLayout
  9.         android:layout_width="fill_parent"
  10.         android:layout_height="fill_parent"
  11.         android:layout_weight="1"
  12.         android:orientation="horizontal" >

  13.         <!-- 第一层 横向 -->


  14.         <!-- 第一层 横向左 -->

  15.         <LinearLayout
  16.             android:layout_width="fill_parent"
  17.             android:layout_height="fill_parent"
  18.             android:layout_weight="1"
  19.             android:orientation="vertical" >

  20.             <LinearLayout
  21.                 android:layout_width="fill_parent"
  22.                 android:layout_height="fill_parent"
  23.                 android:layout_weight="1"
  24.                 android:orientation="horizontal" >

  25.                 <!-- 1 -->

  26.                 <RelativeLayout
  27.                     android:id="@+id/nine_one"
  28.                     android:layout_width="fill_parent"
  29.                     android:layout_height="fill_parent"
  30.                     android:layout_weight="1"
  31.                     android:background="#FFFF00" >
  32.                 </RelativeLayout>
  33.                 <!-- 2 -->

  34.                 <RelativeLayout
  35.                     android:id="@+id/nine_two"
  36.                     android:layout_width="fill_parent"
  37.                     android:layout_height="fill_parent"
  38.                     android:layout_weight="1"
  39.                     android:background="#FFC0CB" >
  40.                 </RelativeLayout>
  41.             </LinearLayout>
  42.             <!-- 4 -->

  43.             <RelativeLayout
  44.                 android:id="@+id/nine_four"
  45.                 android:layout_width="fill_parent"
  46.                 android:layout_height="fill_parent"
  47.                 android:layout_weight="1"
  48.                 android:background="#EE30A7" >
  49.             </RelativeLayout>
  50.             <!-- 5 -->

  51.             <RelativeLayout
  52.                 android:id="@+id/nine_five"
  53.                 android:layout_width="fill_parent"
  54.                 android:layout_height="fill_parent"
  55.                 android:layout_weight="1"
  56.                 android:background="#EE4000" >
  57.             </RelativeLayout>
  58.         </LinearLayout>
  59.         <!-- 第一层 横向右 -->

  60.         <LinearLayout
  61.             android:layout_width="fill_parent"
  62.             android:layout_height="fill_parent"
  63.             android:layout_weight="2"
  64.             android:orientation="vertical" >

  65.             <!-- 3 -->

  66.             <RelativeLayout
  67.                 android:id="@+id/nine_three"
  68.                 android:layout_width="fill_parent"
  69.                 android:layout_height="fill_parent"
  70.                 android:layout_weight="2"
  71.                 android:background="#FF8C69" >
  72.             </RelativeLayout>
  73.             <!-- 6 -->

  74.             <RelativeLayout
  75.                 android:id="@+id/nine_six"
  76.                 android:layout_width="fill_parent"
  77.                 android:layout_height="fill_parent"
  78.                 android:layout_weight="1"
  79.                 android:background="#8C8C8C" >
  80.             </RelativeLayout>
  81.         </LinearLayout>
  82.     </LinearLayout>
  83.     <!-- 第二层 -->

  84.     <LinearLayout
  85.         android:layout_width="fill_parent"
  86.         android:layout_height="fill_parent"
  87.         android:layout_weight="3"
  88.         android:baselineAligned="false"
  89.         android:orientation="horizontal" >

  90.         <!-- 7 -->

  91.         <RelativeLayout
  92.             android:id="@+id/nine_seven"
  93.             android:layout_width="fill_parent"
  94.             android:layout_height="fill_parent"
  95.             android:layout_weight="1"
  96.             android:background="#8B3E2F" >
  97.         </RelativeLayout>
  98.         <!-- 8 -->
  99.         <!-- 9 -->

  100.         <RelativeLayout
  101.             android:id="@+id/nine_nine"
  102.             android:layout_width="fill_parent"
  103.             android:layout_height="fill_parent"
  104.             android:layout_weight="1"
  105.             android:background="#A52A2A" >
  106.         </RelativeLayout>
  107.     </LinearLayout>

  108. </LinearLayout>
复制代码
它的效果是这样的:


           之后在MainActivity里面对每一个Layout进行动画移动就可以实现平移的效果了。

MainActivity.java:

  1. import android.app.Activity;
  2. import android.content.Intent;
  3. import android.os.Bundle;
  4. import android.util.DisplayMetrics;
  5. import android.view.LayoutInflater;
  6. import android.view.Menu;
  7. import android.view.View;
  8. import android.view.View.OnClickListener;
  9. import android.view.Window;
  10. import android.view.animation.TranslateAnimation;
  11. import android.widget.RelativeLayout;
  12. import android.widget.Toast;

  13. /**
  14. *
  15. */
  16. public class MainActivity extends Activity {
  17.         private View viewNine;
  18.         private LayoutInflater inflater;
  19.         private RelativeLayout nine_one, nine_two, nine_three, nine_four,
  20.                         nine_five, nine_six, nine_seven, nine_nine;
  21.         private TranslateAnimation myAnimation_Right, myAnimation_Bottom;
  22.         private TranslateAnimation myAnimation_Left, myAnimation_Top;

  23.         @Override
  24.         protected void onCreate(Bundle savedInstanceState) {
  25.                 super.onCreate(savedInstanceState);
  26.                 requestWindowFeature(Window.FEATURE_NO_TITLE);
  27.                 inflater = LayoutInflater.from(this);
  28.                 viewNine = inflater.inflate(R.layout.activity_main, null);

  29.                 nine_one = (RelativeLayout) viewNine.findViewById(R.id.nine_one);
  30.                 nine_two = (RelativeLayout) viewNine.findViewById(R.id.nine_two);
  31.                 nine_three = (RelativeLayout) viewNine.findViewById(R.id.nine_three);
  32.                 nine_four = (RelativeLayout) viewNine.findViewById(R.id.nine_four);
  33.                 nine_five = (RelativeLayout) viewNine.findViewById(R.id.nine_five);
  34.                 nine_six = (RelativeLayout) viewNine.findViewById(R.id.nine_six);
  35.                 nine_seven = (RelativeLayout) viewNine.findViewById(R.id.nine_seven);
  36.                 nine_nine = (RelativeLayout) viewNine.findViewById(R.id.nine_nine);
  37.                 setContentView(viewNine);

  38.                 nine_four.setOnClickListener(new OnClickListener() {

  39.                         @Override
  40.                         public void onClick(View v) {

  41.                                 Intent intent=new Intent(MainActivity.this,OneActivity.class);
  42.                                 startActivity(intent);
  43.                         }
  44.                 });
  45.                 nine_six.setOnClickListener(new OnClickListener() {

  46.                         @Override
  47.                         public void onClick(View v) {
  48.                                
  49.                         }
  50.                 });
  51.                 myAnimation();
  52.                 addAnimation();
  53.         }

  54.         // 启动动画
  55.         private void addAnimation() {

  56.                 nine_one.startAnimation(myAnimation_Right);
  57.                 nine_two.startAnimation(myAnimation_Bottom);
  58.                 nine_three.startAnimation(myAnimation_Left);
  59.                 nine_four.startAnimation(myAnimation_Bottom);
  60.                 nine_five.startAnimation(myAnimation_Left);
  61.                 nine_six.startAnimation(myAnimation_Top);
  62.                 nine_seven.startAnimation(myAnimation_Left);
  63.                 nine_nine.startAnimation(myAnimation_Left);

  64.         }

  65.         // 动画定义
  66.         private void myAnimation() {
  67.                 DisplayMetrics displayMetrics = new DisplayMetrics();
  68.                 displayMetrics = this.getResources().getDisplayMetrics();
  69.                 // 获得屏幕宽度
  70.                 int screenWidth = displayMetrics.widthPixels;
  71.                 // 获得屏幕高度
  72.                 int screenHeight = displayMetrics.heightPixels;
  73.                
  74.                 myAnimation_Right = new TranslateAnimation(screenWidth, 0, 0, 0);
  75.                 myAnimation_Right.setDuration(1800);

  76.                 myAnimation_Bottom = new TranslateAnimation(0, 0, screenHeight, 0);
  77.                 myAnimation_Bottom.setDuration(1500);

  78.                 myAnimation_Left = new TranslateAnimation(-screenWidth, 0, 0, 0);
  79.                 myAnimation_Left.setDuration(2000);

  80.                 myAnimation_Top = new TranslateAnimation(0, 0, -screenHeight, 0);
  81.                 myAnimation_Top.setDuration(2500);
  82.         }

  83.         @Override
  84.         public boolean onCreateOptionsMenu(Menu menu) {
  85.                 // Inflate the menu; this adds items to the action bar if it is present.
  86.                 // getMenuInflater().inflate(R.menu.activity_main, menu);
  87.                 return true;
  88.         }

  89. }
复制代码
虽然效果还可以,但是布局文件由于使用嵌套,这样毁造成绘制窗口时性能的问题。所以你对程序要求很严格,那么建议使用RelativewLayout来布局,并且减少使用嵌套。
https://blog.csdn.net/wangjinyu501/article/details/9055655



回复

使用道具 举报

149

主题

201

帖子

643

积分

版主

Rank: 7Rank: 7Rank: 7

积分
643
 楼主| 发表于 2020-5-31 17:03:17 | 显示全部楼层
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|小黑屋|牛大大的个人博客 ( 苏ICP备17043571号-2 )

GMT+8, 2021-6-15 11:20 , Processed in 0.202640 second(s), 18 queries .

Powered by Discuz! X3.4 Licensed

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表