利用TabHost制作QQ客户端标签栏效果（低版本QQ）

2022-11-21 13:19:19

学习一定要从基础学起，只有有一个好的基础，我们才会变得更加的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进行编写，下载请注意）

码农公寓

相关文章