Android总结笔记03：QQ空间底部+网易新闻顶部UI

手机QQ空间底部中间有一个突出，原来想着很复杂，可是通过反编译QQ空间看其布局，发现其实不是那么的复杂。索性自己就仿一个。废话不多说，直接上图，有图有真相(由于截图太大，我没有按比例缩小，所以有一些变形，请见谅)。









一、下面说一下实现思路：
1、这里我采用的是TabActivity来控制各个tab页的，当然TabActivity android不推荐使用了，可以用FragMent来代替。感兴趣的可以试一下。由于中间有一个突出的圆形，这里采用FrameLayout布局，很容易实现。
2、每个tab按钮是用RadionButton来实现的。由于RadionButton的按下选中事件默认自带，用它对我们这里好实现，当然你可以用别的组件或自定义组件来实现。
3、为了更好的适配不同时的分辨率，每一个tab按钮采用图片和文字单分开布局的方式，如：主页和上面的房子是分开截图的(由于原来让美工截的图是一张，导致适配比较麻烦，所以这里采用分开截图)。
二、下面看一上具体实现代码：
1、包结构：



二、程序的入口布局(activity_main.xml)及类MainActivity：
1、activity_man.xml布局：
（1）、效果图



（2）、acitivity_main.xml文件：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<TabHost
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</FrameLayout>

<RadioGroup
android:id="@+id/main_radio"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="@drawable/toolbar_bg"
android:orientation="horizontal" >

<FrameLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1.0" >

<RadioButton
android:id="@+id/rb1"
style="@style/radtionbutton_style"
android:checked="true"
android:drawableTop="@drawable/home_btn_bg_selector"
android:text="主页" />
</FrameLayout>

<FrameLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1.0" >

<RadioButton
android:id="@+id/rb2"
style="@style/radtionbutton_style"
android:drawableTop="@drawable/market_btn_bg_selector"
android:text="与我相关" />
</FrameLayout>

<FrameLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1.0" >
</FrameLayout>

<FrameLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1.0" >

<RadioButton
android:id="@+id/rb3"
style="@style/radtionbutton_style"
android:drawableTop="@drawable/mime_btn_bg_selector"
android:text="我的空间" />

<TextView
android:id="@+id/tv_comment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginRight="3dip"
android:layout_marginTop="3dip"
android:background="@drawable/tab_unread_bg"
android:gravity="center"
android:text="1"
android:textSize="8sp" />
</FrameLayout>

<FrameLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1.0" >

<RadioButton
android:id="@+id/rb4"
style="@style/radtionbutton_style"
android:drawableTop="@drawable/more_btn_bg_selector"
android:text="更多" />
</FrameLayout>
</RadioGroup>
<!-- 把默认的选项卡隐藏掉，自己用RadioButton定义选项卡 -->

<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:visibility="gone" >
</TabWidget>
</TabHost>
<!-- 中间突出的图片 -->
<FrameLayout
android:id="@+id/btn_ck"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:background="@drawable/toolbar_write_bg" >

<RadioButton
android:id="@+id/rb5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@drawable/toolbar_plus"
android:button="@null"
android:gravity="center" />
</FrameLayout>

<!-- 移动图片的布局 -->
<FrameLayout
android:id="@+id/btn_ck"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom|left" >

<ImageView
android:id="@+id/iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/tab_front_bg" />
</FrameLayout>

</FrameLayout>

其中RadionButton中的style="@style/radtionbutton_style"、和android:drawableTop="@drawable/home_btn_bg_selector"分别是RadionButton的样式和tab按钮中图片的选择器，就是当选中当前tab按钮的时候，图片变成黄色，文字变成白色的这样一个效果：
（3）、radtionbutton_style

<resources>
<!-- 定义radtionButton的样式 -->
<style name="radtionbutton_style">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">52dip</item>
<item name="android:layout_gravity">center</item>
<item name="android:background">@android:color/transparent</item>
<item name="android:button">@null</item>
<item name="android:gravity">center</item>
<item name="android:paddingBottom">4dip</item>
<item name="android:paddingTop">6dip</item>
<item name="android:textColor">@color/color_radiobutton</item>
<item name="android:textSize">12sp</item>
</style>
</resources>

其中：<item name="android:textColor">@color/color_radiobutton</item>就是点击选中tab按钮以后。文字变化的选择器

radionbutton.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="@color/color_text_selected"/>
<!-- not selected -->
<item android:color="@color/color_text_normal"/>
</selector>

（4）、home_btn_bg_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:drawable="@drawable/icon_1_n_pressed" android:state_checked="true"/>
<!-- not selected -->
<item android:drawable="@drawable/icon_1_n"/>

</selector>

2、入口类MainActivity：

package com.jun.qqzomeandwy;

import android.app.TabActivity;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.KeyEvent;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.CompoundButton;
import android.widget.CompoundButton.OnCheckedChangeListener;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.RadioButton;
import android.widget.TabHost;

import com.jun.qqzomeandwy.utils.AppManager;
import com.jun.qqzomeandwy.utils.CommUtils;
import com.jun.qqzomeandwy.utils.MoveBg;

/**
* 程序的主入口
* @author junjun
*
*/

public class MainActivity extends TabActivity implements OnCheckedChangeListener{

private TabHost tabHost = null ;
private RadioButton rb1 = null ;
private RadioButton rb2 = null ;
private RadioButton rb3 = null ;
private RadioButton rb4 = null ;
private RadioButton rb5 = null ;
private ImageView img;
private int startLeft;//开始移动的位置
private int imageWidth ;//移动图片的宽度
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

tabHost = this.getTabHost() ;
buildTabSpec();
initRadios() ;
AppManager.getAppManager().addActivity(this) ;
}

// 设置选项卡标签和要跳转的Activity
private void buildTabSpec() {

Intent intent1 = new Intent(this, TabActivity1.class);
Intent intent2 = new Intent(this, TabActivity2.class);
Intent intent3 = new Intent(this, TabActivity3.class);
Intent intent4 = new Intent(this, TabActivity4.class);
Intent intent5 = new Intent(this, TabActivity5.class);

tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("首页")
.setContent(intent1));
tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("与我相关")
.setContent(intent2));
tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("我的平台")
.setContent(intent3));
tabHost.addTab(tabHost.newTabSpec("tab4").setIndicator("我的空间")
.setContent(intent4));
tabHost.addTab(tabHost.newTabSpec("tab5").setIndicator("更多")
.setContent(intent5));
WindowManager wm = (WindowManager) this.getSystemService(Context.WINDOW_SERVICE);

int width = wm.getDefaultDisplay().getWidth();//屏幕宽度
imageWidth = width/5 ;

img = (ImageView) this.findViewById(R.id.iv) ;
//由于imageview底部滚动条是在FrameLayout里面的，所以设置imageview的布局宽度就要用FrameLayout生在怕布局参数
FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(imageWidth, ViewGroup.LayoutParams.WRAP_CONTENT);
img.setLayoutParams(params) ;
}

// 初始化RadioButton并添加监听事件
private void initRadios() {
rb1 = ((RadioButton) findViewById(R.id.rb1));
rb2 = ((RadioButton) findViewById(R.id.rb2));
rb3 = ((RadioButton) findViewById(R.id.rb3));
rb4 = ((RadioButton) findViewById(R.id.rb4));
rb5 = (RadioButton) findViewById(R.id.rb5);

rb1.setOnCheckedChangeListener(this);
rb2.setOnCheckedChangeListener(this);
rb3.setOnCheckedChangeListener(this);
rb4.setOnCheckedChangeListener(this);
rb5.setOnCheckedChangeListener(this);
}

/**
* 当选项卡改变的时候调用的方法
*/
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
if (isChecked) {
switch (buttonView.getId()) { // RadtioButton代替了原始的选项卡，那么原始的选项功能也就失去了，这里让RadionButton具有选项功能。
case R.id.rb1: // 首页
this.tabHost.setCurrentTabByTag("tab1");
rb2.setChecked(false);
rb3.setChecked(false);
rb4.setChecked(false);
rb5.setChecked(false);
MoveBg.moveFrontBg(img, startLeft, 0, 0, 0);
startLeft = 0;
break;
case R.id.rb2: // 大市场
this.tabHost.setCurrentTabByTag("tab2");
rb1.setChecked(false);
rb3.setChecked(false);
rb4.setChecked(false);
rb5.setChecked(false);
MoveBg.moveFrontBg(img, startLeft,imageWidth, 0, 0);
startLeft = imageWidth;
break;
case R.id.rb5:
this.tabHost.setCurrentTabByTag("tab3");
rb1.setChecked(false);
rb2.setChecked(false);
rb3.setChecked(false);
rb4.setChecked(false);
MoveBg.moveFrontBg(img, startLeft, imageWidth * 2, 0, 0);
startLeft = imageWidth * 2;

break;
case R.id.rb3: // 我的
this.tabHost.setCurrentTabByTag("tab4");
rb1.setChecked(false);
rb2.setChecked(false);
rb4.setChecked(false);
rb5.setChecked(false);
MoveBg.moveFrontBg(img, startLeft, imageWidth * 3, 0, 0);
startLeft = imageWidth * 3;
break;
case R.id.rb4: // 更多
this.tabHost.setCurrentTabByTag("tab5");
rb1.setChecked(false);
rb2.setChecked(false);
rb3.setChecked(false);
rb5.setChecked(false);
MoveBg.moveFrontBg(img, startLeft, imageWidth * 4, 0, 0);
startLeft = imageWidth * 4;
break;
}
}
}

/**
* 在tabactivity中重写onKeyDown方法，取得反回键不起作用，重写dispatchKeyEvent就可以了
*/
@Override
public boolean dispatchKeyEvent(KeyEvent event) {

/**
注意在if判断中要加一个event.getAction()
KeyEvent.ACTION_DOWN判断，因为按键有两个事件ACTION_DOWN和ACTION_UP，
也就是按下和松开，如果不加这个判断，代码会执行两遍，而在下面的代码中就是弹两次AlertDialog
*/
if (event.getAction() == KeyEvent.ACTION_DOWN
&& event.getKeyCode() == KeyEvent.KEYCODE_BACK) {

exit() ;
return false;
}

return super.dispatchKeyEvent(event);
}

private void exit() {
if (!isExit) {
isExit = true;
CommUtils.showMessage("再按一次返回键返回到桌面", getApplicationContext()) ;
mHandler.sendEmptyMessageDelayed(0, 2000);
} else {
AppManager.getAppManager().AppExit(MainActivity.this);
}

}
private Handler mHandler = new Handler() {

@Override
public void handleMessage(Message msg) {

super.handleMessage(msg);
isExit = false;
}

};
//是否退出的标志
private boolean isExit;

@Override
protected void onDestroy() {
// TODO Auto-generated method stub
super.onDestroy();
AppManager.getAppManager().finishActivity(this);
}
}

余下来就是几个要跳转的Activity类了，具体看源码。

最后附上源码下载地址：http://download.csdn.net/detail/android0012345/5828435