做移动产品界面占很大的一部分,同时也是决定一款产品好的的重要因素,最近看见有人放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磁贴界面以及功能的更多相关文章

  1. VC/Wince 实现仿Win8 Metro风格界面2——页面滑动切换(附效果图)

    前几天开始写仿Win8 Metro界面文章,部分网友觉得不错,感谢各位的意见.本来今天一直在折腾Android VLC播放器,没时间写.不过明天休息,所以今天就抽时间先写一下. 言归正传,我们都知道W ...

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

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/23441455 昨晚没事手机下载了一些APP,发现现在仿win8的主界面越来越多, ...

  3. VC/Wince 实现仿Win8 Metro风格界面1——设计概述和自绘Button(附效果图)

    去年用VC做了一个仿Win8 Metro风格的界面,感觉挺有意思,最近打算把实现过程和一些技术原理记录下来. 主要是风格上类似Win8,其实功能上很多借鉴了Android的操作方式.界面只支持两种大小 ...

  4. Android ActionBar应用实战,高仿微信主界面的设计

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/26365683 经过前面两篇文章的学习,我想大家对ActionBar都已经有一个相对 ...

  5. Android特效专辑(十二)——仿支付宝咻一咻功能实现波纹扩散特效,精细小巧的View

    Android特效专辑(十二)--仿支付宝咻一咻功能实现波纹扩散特效,精细小巧的View 先来看看这个效果 这是我的在Only上添加的效果,说实话,Only现在都还只是半成品,台面都上不了,怪自己技术 ...

  6. [Android] Android 手机下 仿 微信 客户端 界面 -- 微聊

    Android 手机下 仿 微信 客户端 界面 -- 微聊 (包括聊天列表 + 聊天对话页 + 朋友圈列表页 + 我的/发现 列表页) 项目演示: 功能说明: 1)底部标签切换 (TabHost + ...

  7. 磁贴界面颜色 Metro UI Colors

    http://www.oschina.net/p/metro-ui-colors 介绍 包含了磁贴界面(Metro UI)使用的颜色集合(浅绿色,绿色,深绿色,品红,紫色等).可以查看每一种颜色的各种 ...

  8. WPF系列教程——(一)仿TIM QQ界面 - 简书

    原文:WPF系列教程--(一)仿TIM QQ界面 - 简书 TIM QQ 我们先来看一下TIM QQ长什么样,整体可以将界面分为三个部分 TIM QQ 1. 准备 阅读本文假设你已经有XAML布局的基 ...

  9. uni-app聊天室|vue+uniapp仿微信聊天实例|uniapp仿微信App界面

    一.介绍 运用UniApp+Vue+Vuex+swiper+uniPop等技术开发的仿微信原生App聊天室|仿微信聊天界面实例项目uniapp-chatroom,实现了发送图文消息.表情(gif图), ...

随机推荐

  1. vim中256色的配色表

    vim貌似支持的颜色很有限.white  black  yellow  cyan   magenta   blue   grey   green   red,大多数颜色前面都可以加light 或者 d ...

  2. 通过JQUERY获取SELECT OPTION中选中的值

    遇到一样学一样. 一个是取KEY,一个是取VALUE,一个是取所有文本. var dbuser_select = $("#dbuser_select option:selected" ...

  3. Ubuntu 16.04安装设备管理器Hardinfo和lshw设备信息命令

    安装: sudo apt-get install hardinfo 启动: 实际上这些信息都可以通过lshw进行查看,参考:https://linux.die.net/man/1/lshw

  4. yum 源本地化 (two)

    之前写过一个yum源本地化的文章. 后来发现那个方法有些缺陷, yum install --downloadonly --downloaddir=/tmp/atomicdownload memcach ...

  5. Linux ANSI 乱码问题

    原帖http://blog.chinaunix.net/u/24624/showart_184609.html Windows 到 linux 解决samba-3.x客户端中文乱码问题 dos cha ...

  6. 【基础练习】【高速幂】codevs3285 转圈游戏题解

    转载请注明出处 来自CSDN用户ametake 题目来自NOIP2013TGD1T1 题目描写叙述 Description n 个小伙伴(编号从 0 到 n-1)围坐一圈玩游戏.依照顺时针方向给 n ...

  7. MyReport报表系统v1.2公布

    经过多月奋战.MyReport报表系统最终完好,里程碑版本号V1.2隆重公布. 系统介绍 MyReport报表系统是基于MyReport报表引擎构建的报表开发工具平台产品.用户可以高速搭建报表中心,实 ...

  8. 数据库操作语句大全(sql)

    一.基础 1.说明:创建数据库CREATE DATABASE database-name 2.说明:删除数据库drop database dbname3.说明:备份sql server--- 创建 备 ...

  9. timeout in asp.net

    Forms authentication timeout vs sessionState timeout They are different things. The Forms Authentica ...

  10. 启动Tomcat任何程序都报错

    启动Tomcat出现: Cannot publish to the server because it is missing its runtime environment. 可能是servers中不 ...