WEB开发网
开发学院手机开发Android 开发 Android 仿Windows Metro 界面UI 阅读

Android 仿Windows Metro 界面UI

 2012-11-26 14:00:38 来源:WEB开发网   
核心提示: 布局采用LinearLayout来实现(比较喜欢这个布局,在UI之前要有全局考虑的思想,Android 仿Windows Metro 界面UI,操作起来比较简单),每一个菜单都是一个Linear块,内部是一个ImageView和一个TextView;一共做了两个界面点击互相切换,下面是效果截图: 由于每个Linear

 布局采用LinearLayout来实现(比较喜欢这个布局,在UI之前要有全局考虑的思想,操作起来比较简单),每一个菜单都是一个Linear块,内部是一个ImageView和一个TextView;一共做了两个界面点击互相切换,下面是效果截图:

                                                   
 
由于每个Linear块的属性配置都差不多很相似,所以提取出来做成了统一的style,在XML文件中引用则更方便一些
 
下面是UI设计的布局文件代码片段:
 
 
<?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="horizontal" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:orientation="vertical"
        android:padding="20dp" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >

            <LinearLayout style="@style/menu_item_block_orange">
                <ImageView style="@style/menu_item_img" android:src="@drawable/menu_icon_mail" />
                <TextView style="@style/menu_item_txt" android:text="短信息" />
            </LinearLayout>

            <LinearLayout style="@style/menu_item_block_orange" android:layout_marginLeft="5dp" >
                <ImageView style="@style/menu_item_img" android:src="@drawable/menu_icon_calendar" />
                <TextView style="@style/menu_item_txt" android:text="日历" />
            </LinearLayout>
        </LinearLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:orientation="horizontal" >

            <LinearLayout style="@style/menu_item_block_orange">
                <ImageView style="@style/menu_item_img" android:src="@drawable/menu_icon_phone" />
                <TextView style="@style/menu_item_txt" android:text="电话" />
            </LinearLayout>

            <LinearLayout style="@style/menu_item_block_orange" android:layout_marginLeft="5dp">
                <ImageView style="@style/menu_item_img" android:src="@drawable/menu_icon_gmail" />
                <TextView style="@style/menu_item_txt" android:text="Gmail" />
            </LinearLayout>
        </LinearLayout>												......................										
 
 
 
 

Tags:Android Windows Metro

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接