利用TabHost制作QQ客户端标签栏效果（低版本QQ）
学习一定要从基础学起，只有有一个好的基础，我们才会变得更加的perfect
下面小编将利用TabHost制作QQ客户端标签栏效果（这个版本的QQ是在前几年发布的）….
首先我们看一下效果：
看到这个界面，刹那间一点喜悦感都没有了，不过对于我们学习程序的人来说，UI是一方面，代码也是一方面，今天讲述的是代码，所以我们就在此忽略UI吧
--------------------------------------------------------华丽分割线---------------------------------------
【分析】
1）界面中含有一个导航栏（这里叫做标签栏），每个栏目下面含有一个有ListView构成的页面
2）ListView中的item为自定义布局
3）自定义适配器
4）使用Intent进行信息的传递
5）使用TabHost进行页面间的切换
【代码】
注：由于三个页面中的内容样式基本相同，所以小编即拿好友页面予以讲述
1)创建一个activity_main(主布局)
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--定义TabHost标签-->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<!--定义TabWeidget控件-->
<TabWidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<!--定义FramLayout控件-->
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp"/>
</LinearLayout>
</TabHost>
2)创建activity_myfriend，即有一个ListView组成的界面，此处省去
3)创建自定义样式activity_myfriend_item
<?xml version="1.0" encoding="utf-8"?>
<!--定义ListView的item样式-->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<!--定义箭头图片-->
<ImageView
android:id="@+id/Iv"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
<!--定义好友文字控件-->
<TextView
android:id="@+id/TvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:layout_marginLeft="10dip"
android:textColor="@color/material_blue_grey_800"
android:textSize="20sp"/>
<!--定义好友人数的文字控件-->
<TextView
android:id="@+id/TvInfo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:textColor="@color/material_blue_grey_800"
android:textSize="10sp"/>
</LinearLayout>
4)其他的两个页面和这个页面基本相同
5)创建实体类
package cn.edu.bzu.entity;
/**
* Created by monster on 2015/4/15.
*/
public class MyFriend {
public String Name;
public int ImgId;
public String Info;
public MyFriend(){
super();
}
public MyFriend(String name, int imgId, String info) {
super();
Name = name;
ImgId = imgId;
Info = info;
}
}
ps：此处的实体类主要是用作自定义适配器时使用
6）自定义适配器（重点）
自定义适配器可谓是ListView的一个重点
创建MyFriendListAdapter.java
package cn.edu.bzu.adapter;
import android.content.Context;
import android.media.Image;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;
import cn.edu.bzu.TabHost_QQ.R;
import cn.edu.bzu.entity.MyFriend;
/**
* Created by monster on 2015/4/15.
*/
public class MyFriendListAdapter extends BaseAdapter {
private Context context;
private List<MyFriend>list=new ArrayList<MyFriend>();
public MyFriendListAdapter(Context context, List<MyFriend> list) {
this.context = context;
this.list = list;
}
class ViewHolder{
ImageView Image;
TextView Name;
TextView Info;
}
@Override
public int getCount() {
return list.size();
}
@Override
public Object getItem(int position) {
return list.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder viewHolder;
if(convertView==null){
//初始化friend的item视图
convertView= LayoutInflater.from(context).inflate(R.layout.activity_myfriend_item,null);
viewHolder=new ViewHolder();
//获得视图中的对象控件
viewHolder.Image=(ImageView)convertView.findViewById(R.id.Iv);
viewHolder.Name=(TextView)convertView.findViewById(R.id.TvTitle);
viewHolder.Info=(TextView)convertView.findViewById(R.id.TvInfo);
convertView.setTag(viewHolder);
}else{
viewHolder=(ViewHolder)convertView.getTag();
}
//设置控件属性
viewHolder.Image.setBackgroundResource(list.get(position).ImgId);
viewHolder.Name.setText(list.get(position).Name);
viewHolder.Info.setText(list.get(position).Info);
return convertView;
}
}
7）创建MyFriendActivity.java
package cn.edu.bzu.TabHost_QQ;
import android.app.Activity;
import android.os.Bundle;
import android.widget.ListView;
import java.util.ArrayList;
import java.util.List;
import cn.edu.bzu.adapter.MyFriendListAdapter;
import cn.edu.bzu.entity.MyFriend;
/**
* Created by monster on 2015/4/15.
*/
public class MyFriendActivity extends Activity {
private ListView LvFriend;
private List<MyFriend>list=new ArrayList<MyFriend>();
private MyFriendListAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_myfriend);
getData(); //数据源
LvFriend=(ListView)findViewById(R.id.LvFriend);
adapter=new MyFriendListAdapter(MyFriendActivity.this,list);
LvFriend.setAdapter(adapter);
}
private void getData() {
list.add(new MyFriend("在线好友",R.mipmap.arrow,"10"));
list.add(new MyFriend("同学好友",R.mipmap.arrow,"22"));
list.add(new MyFriend("工作好友",R.mipmap.arrow,"12"));
}
}
8）创建MainActivity.java
package cn.edu.bzu.TabHost_QQ;
import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.TabHost;
public class MainActivity extends TabActivity{
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TabHost tabHost=getTabHost();//调用当前activity中的tabHost对象
TabHost.TabSpec spec;//定义TabHost中的TabSpec对象
Intent i;
/*
*设置第一个标签页布局
*/
i=new Intent(MainActivity.this,MyFriendActivity.class);
spec=tabHost.newTabSpec("0").setIndicator("好友").setContent(i);
tabHost.addTab(spec);
/*
*设置第二个标签页布局
*/
i=new Intent(MainActivity.this,MyGroupActivity.class);
spec=tabHost.newTabSpec("1").setIndicator("群").setContent(i);
tabHost.addTab(spec);
/*
*设置第三个标签页布局
*/
i=new Intent(MainActivity.this,MyDiscussionActivity.class);
spec=tabHost.newTabSpec("2").setIndicator("讨论组").setContent(i);
tabHost.addTab(spec);
tabHost.setCurrentTab(0);//设置当前标签页
}
}
9)在AndroidManifest.xml注册Activity
10)大工高成
---------------------------------------------华丽分割线------------------------------------------------
ps：这个教程我们需要知道：
1）TabHost的使用，如何使用TabHost切换页面
2）自定义ListView的Item视图
3）如何通过继承BaseAdapter书写自定义适配器
4）在自定义适配器中如何获取数据源
5）自定义适配器各方法的含义
6）自定义适配器与实体类的使用
附录Github: https://github.com/monsterLin/tabhost_qq
（项目使用的Android Stdio进行编写，下载请注意）
