Android仿Metro的界面设计

     觉得metro的界面布局设计很漂亮，然后借了部winphone手机玩弄了一会，然后就想开发出这个界面样式出来。于是在网络上查了相关资料，发现都不是很满意，于是自己就把这个思路写出来，为大家方便之需。

     废话不多说，效果图：

图片资源都是百度里面搜索的。界面主要分为几块，最上面深蓝色区域是用来后期的图片滑动和预览的。右侧是实现一个快捷键的显示和隐藏。

xml文件源代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="#123456" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#000000"
        android:orientation="horizontal" >

        <ScrollView
            android:layout_width="270dp"
            android:layout_height="match_parent" >

            <LinearLayout
                android:layout_width="270dp"
                android:layout_height="match_parent"
                android:orientation="vertical" >

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:paddingLeft="10dp"
                    android:paddingTop="10dp" >

                    <ImageButton
                        android:layout_width="120dp"
                        android:layout_height="120dp"
                        android:background="@drawable/icon_1" />

                    <ImageButton
                        android:layout_width="120dp"
                        android:layout_height="120dp"
                        android:layout_marginLeft="10dp"
                        android:background="@drawable/icon_rain" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:paddingLeft="10dp"
                    android:paddingTop="10dp" >

                    <ImageButton
                        android:layout_width="120dp"
                        android:layout_height="120dp"
                        android:background="@drawable/icon_2" />

                    <ImageButton
                        android:layout_width="120dp"
                        android:layout_height="120dp"
                        android:layout_marginLeft="10dp"
                        android:background="@drawable/icon_3" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:paddingLeft="10dp"
                    android:paddingTop="10dp" >

                    <ImageButton
                        android:layout_width="120dp"
                        android:layout_height="120dp"
                        android:background="@drawable/icon_4" />

                    <ImageButton
                        android:layout_width="120dp"
                        android:layout_height="120dp"
                        android:layout_marginLeft="10dp"
                        android:background="@drawable/icon_5" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:paddingLeft="10dp"
                    android:paddingTop="10dp" >

                    <ImageButton
                        android:layout_width="120dp"
                        android:layout_height="120dp"
                        android:background="@drawable/icon_6" />

                    <ImageButton
                        android:layout_width="120dp"
                        android:layout_height="120dp"
                        android:layout_marginLeft="10dp"
                        android:background="@drawable/icon_7" />
                </LinearLayout>
            </LinearLayout>
        </ScrollView>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="2"
            android:background="#000000"
            android:gravity="center_horizontal"
            android:orientation="vertical" >

            <ImageButton
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_marginTop="11dp"
                android:background="@drawable/listbtn" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

布局的东西大家应该能看得懂的。就几个简单衔套。就不上资源了。有用到的几个图片可以去百度。metro图标

文章写得简单了。但是代码是完整的。有需要可以留言。