Android仿QQ空间主页面的实现
程序员文章站
2023-12-04 10:54:16
今天模仿安卓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，因为时间关系，还有很多细节没有实现。大家可以在我的基础上继续完善。
打开程序的启动画面和导航页面我就不做了，大家可以模仿微信的那个做一下，很简单。这次主要做一下主页面的实现，下面是主页面的布局：
复制代码 代码如下:
<?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，因为时间关系，还有很多细节没有实现。大家可以在我的基础上继续完善。