您的位置：首页 > 移动开发 > 微信开发

是男人就下100层【第一层】——高仿微信界面（9）

2014-03-06 21:52 411 查看

前面几篇文章实现的界面效果不符合4.0的HOLO主题及官方建议的设计规范，感谢“一片冰心在玉壶”给我指出，不然我可能会一直错下去，也会误导大家。接下来这几篇我计划用HOLO主题来高仿一下微信5.0的界面实现。

先看看今天要实现的效果：

闪屏界面和前面做的类似这里就不叙述了，我们直接看主界面的实现布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@color/white" >

<LinearLayout
android:id="@+id/llayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:orientation="vertical" >

<include layout="@layout/top1" />

<include layout="@layout/top2" />
</LinearLayout>

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

</LinearLayout>

</RelativeLayout>

上面的<include>标签引入外部布局放入到此处top1.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" >

<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="50dp"
android:background="@drawable/abc_ab_bottom_solid_dark_holo"
android:gravity="center_vertical" >

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="10dp"
android:gravity="center"
android:orientation="horizontal" >

<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@drawable/actionbar_icon" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:text="微信"
android:textColor="@color/lightgray"
android:textSize="18dp" />
</LinearLayout>

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_alignParentRight="true"
android:gravity="center"
android:orientation="horizontal" >

<ImageView
android:layout_width="30dp"
android:layout_height="wrap_content"
android:layout_marginRight="20dip"
android:src="@drawable/actionbar_search_icon" />

<ImageView
android:id="@+id/add"
android:layout_width="30dp"
android:layout_height="wrap_content"
android:layout_marginRight="20dip"
android:src="@drawable/actionbar_add_icon" />

<ImageView
android:id="@+id/set"
android:layout_width="30dp"
android:layout_height="wrap_content"
android:src="@drawable/actionbar_more_icon" />
</LinearLayout>
</RelativeLayout>

</LinearLayout>

这个布局很简单，就是一个相对布局嵌套两个线性布局。

top2.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" >

<LinearLayout
android:id="@+id/lllayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#F5F5F5"
android:orientation="horizontal" >

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/guide_round"
android:gravity="center"
android:orientation="vertical" >

<TextView
android:id="@+id/liaotian"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dip"
android:text="聊天"
android:textColor="@color/green"
android:textSize="15dip" />
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/guide_round"
android:clickable="true"
android:gravity="center"
android:orientation="vertical"
android:saveEnabled="false" >

<TextView
android:id="@+id/faxian"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dip"
android:text="发现"
android:textColor="@color/black"
android:textSize="15dip" />
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/guide_round"
android:focusable="false"
android:gravity="center"
android:orientation="vertical" >

<TextView
android:id="@+id/tongxunlu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dip"
android:text="通讯录"
android:textColor="@color/black"
android:textSize="15dip" />
</LinearLayout>
</LinearLayout>

</LinearLayout>

三个线性布局中包裹的分别是三个菜单。

最后再将manifest文件内容贴出

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.holoweixin"
android:versionCode="1"
android:versionName="1.0" >

<uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="18" />

<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@android:style/Theme.Black.NoTitleBar" >
<activity
android:name=".IndexActivity"
android:label="@string/app_name"
android:theme="@android:style/Theme.Black.NoTitleBar.Fullscreen"
android:screenOrientation="portrait"
>
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name=".MainActivity"
android:screenOrientation="portrait"/>
</application>

</manifest>

这两天上火感冒的，今天就这样吧，下一篇继续....

如果有什么问题或者更好的方法请大家指出，我会再次改进，谢谢大家。

源代码：http://download.csdn.net/detail/lxq_xsyu/7002611

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航