Android仿QQ空間首頁面的實現

今天模仿安卓QQ空間，效果如下：

開啟程式的啟動畫面和導航頁面我就不做了，大家可以模仿的那個做一下，很簡單。這次主要做一下首頁面的實現，下面是首頁面的布局： 複製代碼 代碼如下:<?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:background="@android:color/white"
android:orientation="vertical" >
<include
android:id="@+id/top_layout"
layout="@layout/main" />
</LinearLayout>

裡面引用了main這個布局檔案，它的xml檔案為： 複製代碼 代碼如下:<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="40dip"
android:layout_alignParentTop="true"
android:background="@drawable/navbar_bg" >
<TextView
android:id="@+id/titltext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="我的空間動態"
android:textSize="20dp"
android:layout_centerInParent="true"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@drawable/navbar_drop_down"
android:id="@+id/bytextimage1"
android:layout_toRightOf="@id/titltext"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@drawable/navbar_drop_up"
android:id="@+id/bytextimage2"
android:visibility="invisible"
android:layout_toRightOf="@id/titltext"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginTop="5dp"
android:layout_marginRight="10dp"
android:src="@drawable/icon_refresh_none" />
</RelativeLayout>//這個RelativeLayout是最上面“我的空間動態”那一部分的布局
<FrameLayout //下面的導覽列的實現，他的背景就是灰色橫條的那一部分
android:layout_width="fill_parent"
android:layout_height="65.32999dip"
android:layout_alignParentBottom="true"
android:background="@drawable/toolbar_bg" >
<LinearLayout //用來包含圖片以及文字
android:layout_width="fill_parent"
android:layout_height="48.0dip"
android:layout_gravity="bottom"
android:baselineAligned="false"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<FrameLayout //採用幀布局，這樣圖片和文字就可以一起顯示了。當然也可以用相對布局，一個在上，一個在下。
android:layout_width="fill_parent"
android:layout_height="48.0dip"
android:layout_weight="1.0" >
<ImageView
android:layout_width="28.0dip"
android:layout_height="28.0dip"
android:layout_gravity="top|center"
android:layout_marginTop="1.0dip"
android:contentDescription=""
android:src="@drawable/tab_timefeed_opacity"
android:visibility="visible" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:layout_marginBottom="6.0dip"
android:text="社交動向更新"
android:textColor="#ffffffff"
android:textSize="10.0dip"
android:visibility="visible" />
</FrameLayout>
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="48.0dip"
android:layout_marginRight="10.0dip"
android:layout_weight="1.0" >
<ImageView
android:layout_width="27.0dip"
android:layout_height="27.0dip"
android:layout_gravity="top|center"
android:layout_marginTop="1.0dip"
android:src="@drawable/tab_feedback_opacity"
android:visibility="visible" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:layout_marginBottom="6.0dip"
android:text="與我相關"
android:textColor="#ffffffff"
android:textSize="10.0dip"
android:visibility="visible" />
<TextView
android:layout_width="17.0dip"
android:layout_height="17.0dip"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="15.0dip"
android:layout_marginLeft="10.0dip"
android:background="@drawable/myhome_visitor_number"
android:gravity="center_vertical"
android:paddingBottom="5.0dip"
android:paddingLeft="5.0dip"
android:paddingRight="0.0dip"
android:paddingTop="0.0dip"
android:text="n"
android:textColor="#ffffffff"
android:textSize="13.0dip"
android:visibility="visible" />
</FrameLayout>
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1.0" />
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="48.0dip"
android:layout_marginLeft="10.0dip"
android:layout_weight="1.0" >
<ImageView
android:layout_width="27.0dip"
android:layout_height="27.0dip"
android:layout_gravity="top|center"
android:layout_marginTop="1.0dip"
android:src="@drawable/tab_myzone_opacity"
android:visibility="visible" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:layout_marginBottom="6.0dip"
android:text="首頁"
android:textColor="#ffffffff"
android:textSize="10.0dip"
android:visibility="visible" />
</FrameLayout>
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="48.0dip"
android:layout_weight="1.0" >
<ImageView
android:layout_width="27.0dip"
android:layout_height="27.0dip"
android:layout_gravity="top|center"
android:layout_marginTop="1.0dip"
android:src="@drawable/tab_applist_opacity"
android:visibility="visible" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:layout_marginBottom="6.0dip"
android:text="應用"
android:textColor="#ffffffff"
android:textSize="10.0dip"
android:visibility="visible" />
</FrameLayout>
</LinearLayout>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal" >
<ImageView
android:layout_width="66.666595dip"
android:layout_height="65.33328dip"
android:layout_gravity="center"
android:src="@drawable/toolbar_write_bg" />
</FrameLayout>
<FrameLayout
android:id="@+id/btn_ck"
android:layout_width="65.33328dip"
android:layout_height="65.33328dip"
android:layout_gravity="center" >
<ImageView
android:id="@+id/image1"
android:layout_width="22.666595dip"
android:layout_height="22.666595dip"
android:layout_gravity="center"
android:layout_marginTop="2.0dip"
android:src="@drawable/toolbar_plus" />
</FrameLayout>
</FrameLayout>
</RelativeLayout>

上面的“我的空間動態”以及下面的圓形Button用的是PopubWindow，Activity的代碼如下： 複製代碼 代碼如下:package com.example.imitateqqzone;
import java.util.ArrayList;
import java.util.List;
import android.os.Bundle;
import android.app.Activity;
import android.content.Context;
import android.graphics.drawable.BitmapDrawable;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.AdapterView;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.PopupWindow;
import android.widget.TextView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.Toast;
public class ImitateQQZone extends Activity {
private PopupWindow popupWindow1,popupWindow2;
private ListView lv_group;
private View view, top_layout;
private TextView tvtitle;
private List<String> groups;
//private int screenWidth,screenHeight,dialgoWidth,dialgoheight;
private ImageView byTextImageView1,byTextImageView2,centerimage;
//private int[] images={R.drawable.navbar_drop_down,R.drawable.navbar_drop_up};

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
this.requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_imitate_qqzone);
top_layout = this.findViewById(R.id.top_layout);
tvtitle = (TextView) top_layout.findViewById(R.id.titltext);
byTextImageView1=(ImageView) top_layout.findViewById(R.id.bytextimage1);
byTextImageView2=(ImageView) top_layout.findViewById(R.id.bytextimage2);
centerimage=(ImageView) findViewById(R.id.image1);

/*
* android view setVisibility():
有三個參數：Parameters:visibility One of VISIBLE, INVISIBLE, or GONE，想對應的三個常量值：0、4、8
VISIBLE:0 意思是可見的
INVISIBILITY:4 意思是不可見的，但還佔著原來的空間
GONE:8 意思是不可見的，不佔用原來的布局空間
*/
tvtitle.setOnClickListener(new OnClickListener() {
boolean isImage=false;
public void onClick(View v) {
showWindow1(v);
if(isImage==false){
isImage=true;
byTextImageView1.setVisibility(4);
byTextImageView2.setVisibility(0);

}else{
isImage=false;
byTextImageView1.setVisibility(0);
byTextImageView2.setVisibility(4);
}
}
});

centerimage.setOnClickListener(new OnClickListener() {

public void onClick(View v) {
showWindow2(v);

}
});

}
protected void showWindow2(View v) {
if (popupWindow2 == null) {
LayoutInflater layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
view = layoutInflater.inflate(R.layout.pubmenu, null);
popupWindow2 = new PopupWindow(view, 400, 400);// 建立一個PopuWidow對象
}
popupWindow2.setFocusable(true); // 使其聚集
popupWindow2.setOutsideTouchable(true);// 設定允許在外點擊消失
popupWindow2.setBackgroundDrawable(new BitmapDrawable());// 這個是為了點擊“返回Back”也能使其消失，並且並不會影響你的背景
popupWindow2.showAsDropDown(v);

}
private void showWindow1(View parent) {
if (popupWindow1 == null) {
LayoutInflater layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
view = layoutInflater.inflate(R.layout.group_list, null);
lv_group = (ListView) view.findViewById(R.id.lvGroup);
// 載入資料
groups = new ArrayList<String>();
groups.add("全部動態");
groups.add("社交動向更新");
groups.add("特別關心");
groups.add("認證空間");
GroupAdapter groupAdapter = new GroupAdapter(this, groups);
lv_group.setAdapter(groupAdapter);
// 建立一個PopuWidow對象
popupWindow1 = new PopupWindow(view, 200, 350);
}

popupWindow1.setFocusable(true); // 使其聚集
popupWindow1.setOutsideTouchable(true);// 設定允許在外點擊消失
popupWindow1.setBackgroundDrawable(new BitmapDrawable());// 這個是為了點擊“返回Back”也能使其消失，並且並不會影響你的背景

//screenWidth = ImitateQQZone.this.getWindowManager().getDefaultDisplay().getWidth();
//screenHeight = ImitateQQZone.this.getWindowManager().getDefaultDisplay().getHeight();
//dialgoWidth = popupWindow.getWidth();
//dialgoheight = popupWindow.getHeight();
//int xPos =(screenWidth-dialgoWidth)/2;// 顯示的位置為:螢幕的寬度的一半-PopupWindow的寬度的一半
//Log.i("coder", "xPos:" + xPos);

popupWindow1.showAsDropDown(parent);
lv_group.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView<?> adapterView, View view,
int position, long id) {
Toast.makeText(ImitateQQZone.this, groups.get(position), 1000)
.show();
// switch (position) {
// case 0:
// Intent intent = new Intent(ImitateQQZone.this,
// PopupWindowDemo2.class);
// startActivity(intent);
// /break;
// default:
// break;
// }
if (popupWindow1 != null) {
popupWindow1.dismiss();
}
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_imitate_qqzone, menu);
return true;
}
}

其他的布局檔案我就不貼出了，需要代碼的可以@我或在下面留言，這隻是個Demo，因為時間關係，還有很多細節沒有實現。大家可以在我的基礎上繼續完善。