这是目前微信6.0版本的主界面
先来分析一波:
1.(top.xml)界面头部有一个微信(6)消息提醒 一个搜索图标 一个更多的的图标+,中间还有一段空白,我们可以弄两个textView(其中一个权重给会自动占其余空白部分),和两个图片按钮
2.(bottom.xml)界面底部可以看到是由4个相同的部分组成,这里我们可以先弄个单选群( <RadioGroup>)给4个包起来,然后再分为4个单选按钮控件(radioButton)
3.(wx.xml)然后我们再建一个wx.xml把前面两个包含进来,有上面图片可看出界面分三部分,所以我们zai'wx.xml新建三个LinearLayout分别显示头部,中部和底部
4.底部4个控件当我们点击其中一个会变成绿色,其余为白色,这里我们可以在drawable中添加选择器分别设置(tab_wx.xml,tab_lxr.xml,tab_fx.xml,tab_wo.xml)。
代码如下:
1.top.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="50dp"
android:orientation="horizontal"
android:background="#21292c"> <TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="微信"
android:textColor="#ffffff"
android:textSize="20sp"
android:layout_gravity="center"
android:padding="10dp"/> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" /> <LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"> <ImageView
android:id="@+id/imageView2"
android:layout_width="40dp"
android:layout_height="30dp"
android:src="@drawable/actionbar_search_icon"
android:layout_marginRight="10dp"/> <ImageView
android:id="@+id/imageView1"
android:layout_width="40dp"
android:layout_height="30dp"
android:src="@drawable/actionbar_add_icon" /> </LinearLayout> </LinearLayout>
2.bottom.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="horizontal" > <RadioGroup
android:id="@+id/radioGroup1"
android:layout_width="match_parent"
android:layout_height="50dp"
padding
android:orientation="horizontal"
android:background="@drawable/back"
android:gravity="center"> <RadioButton
android:id="@+id/radio0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="@string/wx"
style="@style/radioStyle"
android:drawableTop="@drawable/tab_wx"/> 注:在后面有介绍到 <RadioButton
android:id="@+id/radio1"
style="@style/radioStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="@drawable/tab_lxr"
android:text="@string/lxr" /> <RadioButton
android:id="@+id/radio2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/fx"
style="@style/radioStyle"
android:drawableTop="@drawable/tab_fx"/> <RadioButton
android:id="@+id/radio3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/wo"
style="@style/radioStyle"
android:drawableTop="@drawable/tab_wo"/>
</RadioGroup> </LinearLayout>
3.wx.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" >
<!-- head -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<include layout="@layout/top"/>
</LinearLayout> <!-- 中间 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
</LinearLayout> <!-- 底部 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<include layout="@layout/bottom"/>
</LinearLayout> </LinearLayout>
4.tab_wx.xml,tab_lxr.xml,tab_fx.xml,tab_wo.xml 和text_color.xml
前面4个文件都差不多所以只展示一个(分别为底部那四个图片)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="true"
android:drawable="@drawable/wo1"></item>
<item
android:drawable="@drawable/wo"></item> </selector>
text_color.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="true"
android:color="#07bb07"></item>
<item
android:color="#999999"></item> </selector>
这个text 如何用的呢?
找到values文件下的styles.xml加入下面代码
<style name="radioStyle">
<item name="android:button">@null</item>
<item name="android:layout_weight">1</item>
<item name="android:TextSize">15sp</item>
<item name="android:gravity">center</item>
<item name="android:textColor">@drawable/text_color</item>
</style>
整体效果图为