学习一定要从基础学起,只有有一个好的基础,我们才会变得更加的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)自定义适配器与实体类的使用