利用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)自定义适配器与实体类的使用

时间: 2024-10-05 15:50:03

利用TabHost制作QQ客户端标签栏效果(低版本QQ)的相关文章

利用replaceChild制作简单的吞噬效果【jsDEMO】

[功能说明] 利用replaceChild制作简单的吞噬效果 [HTML代码说明] <ul class="list" id="list"> <li class="in">1</li> <li class="in">2</li> <li class="in">3</li> <li class="in"

利用CSS3制作淡入淡出动画效果

CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致. 利用CSS3制作动画效果其原理与Flash一样,我们需要定义关键帧处的状态效果,由CSS3来驱动产生动画效果. 下面讲解一下如何利用CSS3制作淡入淡出的动画效果.具体实例可参考刚进入本站时的淡入效果. 1. 定义动画,名称为fadeIn @-webkit-keyframes fadeIn { 0% { opacity: 0; /*初始状态 透明度为0*/ } 50% {

前端素材解析—利用linear制作复杂的边框效果

在网上看到一种利用linear-gradient属性制作绚丽边框效果的方法.首先给出代码,大家可以在自己的电脑中查看效果: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style

利用UIImageVIew制作的简单粒子效果

一个手指画出的效果 两根手指画出的效果 demo如下:

利用removeChild制作简单的倒序删除效果【jsDEMO】

[功能说明] 利用removeChild制作简单的倒序删除效果 [HTML代码说明] <ul class="list" id="list"> <li class="in">1</li> <li class="in">2</li> <li class="in">3</li> <li class="in"

利用insertBefore制作简单的循环插空效果【jsDEMO】

[功能说明] 利用insertBefore制作简单的循环插空效果 [HTML代码说明] <ul class="list" id="list"> <li class="in">1</li> <li class="in">2</li> <li class="in">3</li> <li class="in&quo

利用CSS制作图形效果

前言 关于如何使用CSS来制作图形,比如说圆形,半圆形,三角形等的相关教程还是挺多的,今天我主要想解释一下里面一些demo的实现原理,话不多说,开始吧   以下所有内容只使用一个HTML元素.任何类型的CSS,只要它至少在一个浏览器中支持. 一. 实现一个心形 #heart { position: relative; width: 100px; height: 90px; } #heart:before{ position: absolute; content: ""; left: 5

写一个android带动画效果的TabHost(类似微博客户端的切换效果)

先上图: 这个Layout是: <?xml version="1.0" encoding="UTF-8"?> <TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/tabhost" android:layout_width="fill_parent" andro

利用 css 制作简单的提示框

在网页开发中,为了提高用户体验,经常会用到一些提示框来引导用户,这里分享下一些简单的提示框的制作 1.首先类似一个长方形右上角一个关闭按钮 这里用到的主要是一些定位的知识,运用relative和absolute可以快速制作这样的一个提示框,想详细了解,点击这里 html代码: <div id="position"> <div class="position-relative"> <span>提示信息</span> &l