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};@Overridepublic 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();}}});}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {getMenuInflater().inflate(R.menu.activity_imitate_qqzone, menu);return true;}}

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