Android仿QQ空間主頁面的實現

2020-04-11 12:36:54

字體：大中小

來源：轉載

供稿：網友

今天模仿安卓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; 
} 
} 