仿win8磁贴界面以及功能

 

做移动产品界面占很大的一部分,同时也是决定一款产品好的的重要因素,最近看见有人放win8的界面效果,搜了两款,一款是只是仿界面没有特效,另一款是自定义组件能够实现反转效果,今天分析一下这两类界面。

仿win8界面

win8磁贴类似九宫格效果,实现这种效果基本上有三种方式实现:LinearLayout,使用其属性layout_weight实现等分;TableLayout,做过计算器的人可能会用到过这个,也可以实现,还有一种就是GridView,自己实现适配器,我找到的仿win8界面使用LinearLayout来实现的,LinearLayout层层嵌套,这种方式不太提倡,因为嵌套太多,我们看一下界面效果:



我们看一下界面源码:
<?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:orientation="horizontal"

    android:paddingTop="30dp"

    android:paddingBottom="30dp"

    android:paddingLeft="20dp"

    android:baselineAligned="false"

    android:background="@drawable/rootblock_default_bg"

    >

    <LinearLayout 

             android:layout_width="wrap_content"

             android:layout_height="fill_parent"

             android:orientation="vertical"

             android:layout_weight="1">

             <LinearLayout 

                 android:layout_width="fill_parent"

                 android:layout_height="wrap_content"

                 android:orientation="horizontal">

                     <LinearLayout 

                             android:layout_width="108dp"

                             android:layout_height="108dp"

                             android:background="#FF7F24">

                         </LinearLayout>

                     <LinearLayout 

                             android:layout_width="108dp"

                             android:layout_height="108dp"

                             android:layout_marginLeft="5dp"

                             android:background="#FF7F24">

                         </LinearLayout>

             </LinearLayout>

        

             <LinearLayout 

                 android:layout_width="fill_parent"

                 android:layout_height="wrap_content"

                 android:layout_marginTop="5dp"

                 android:orientation="horizontal">

                <LinearLayout 

                             android:layout_width="108dp"

                             android:layout_height="108dp"

                             android:background="#3399ff">

                         </LinearLayout>

                     <LinearLayout 

                             android:layout_width="108dp"

                             android:layout_height="108dp"

                             android:layout_marginLeft="5dp"

                             android:background="#3399ff">

                         </LinearLayout>

             </LinearLayout>

             

                      <LinearLayout 

                 android:layout_width="fill_parent"

                 android:layout_height="wrap_content"

                 android:layout_marginTop="5dp"

                 android:orientation="horizontal">

               <LinearLayout 

                             android:layout_width="108dp"

                             android:layout_height="108dp"

                             android:background="#3399ff">

                         </LinearLayout>

                     <LinearLayout 

                             android:layout_width="108dp"

                             android:layout_height="108dp"

                             android:layout_marginLeft="5dp"

                             android:background="#3399ff">

                         </LinearLayout>

             </LinearLayout>

                      <LinearLayout 

                 android:layout_width="fill_parent"

                 android:layout_height="wrap_content"

                 android:layout_marginTop="5dp"

                 android:orientation="horizontal">



              <LinearLayout

                  android:layout_width="108dp"

                  android:layout_height="108dp"

                  android:background="#953399ff" >

              </LinearLayout>



                     <LinearLayout 

                             android:layout_width="108dp"

                             android:layout_height="108dp"

                             android:layout_marginLeft="5dp"

                             android:background="#953399ff">

                         </LinearLayout>

             </LinearLayout>         

                 

    </LinearLayout>

    <LinearLayout 

        android:layout_width="wrap_content"

        android:layout_height="fill_parent"

        android:orientation="vertical"

        android:layout_weight="1">

               <RelativeLayout 

                   android:layout_width="fill_parent"

                   android:layout_height="fill_parent"

                   >

                 <LinearLayout

                         android:layout_width="wrap_content"

                           android:layout_height="wrap_content"

                           android:orientation="vertical"

                     android:layout_alignParentBottom="true">

                               <ImageView

                                   android:id="@+id/download_btn" 

                                        android:layout_width="36dp"

                                       android:layout_height="36dp"

                                       android:src="@drawable/rootblock_icon_download_bg"/>

                               <ImageView

                                   android:id="@+id/download_btn" 

                                        android:layout_width="36dp"

                                       android:layout_height="36dp"

                                       android:layout_marginTop="20dp"

                                       android:src="@drawable/rootblock_icon_clear_bg"/>

                               <ImageView

                                   android:id="@+id/download_btn" 

                                        android:layout_width="36dp"

                                       android:layout_height="36dp"

                                       android:layout_marginTop="20dp"

                                       android:src="@drawable/rootblock_icon_set_bg"/>

                               <ImageView

                                   android:id="@+id/download_btn"

                                        android:layout_width="36dp"

                                       android:layout_height="36dp"

                                       android:layout_marginTop="20dp"

                                       android:src="@drawable/rootblock_icon_add_bg"/>

                        </LinearLayout>

               </RelativeLayout> 

    </LinearLayout>

</LinearLayout>

  详细说明:http://wp.662p.com/thread-7932-1-1.html

你可能感兴趣的:(win8)