Android开发进阶系列（二） Tab页界面布局

学习Android的开发，当时是买了一本书的，不过书上的例子弄懂了，书也就不看了。建议初学者从一本基础的Android开发书籍开始，每个章节过一遍，试一下里面的例子，粗略地了解下Android的全貌。

我的第一个APP，是从获取Android手机参数、手机信号强度和WiFi信号强度开始的。

APK下载地址：http://apk.hiapk.com/appinfo/com.example.projecthelloworld

包名还是用的com.example.Projecthelloworld，现在想想也是醉了。

用的是ViewPager实现的左右滑动的Tab页布局效果，如下图：

主框架Layout文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
tools:context=".MainActivity" >

<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:orientation="horizontal" >

<TextView
android:id="@+id/textMobile"
android:text = "@string/strMobile"
android:gravity="center"
android:background="#6699cc"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight = "1"
android:onClick="onMobileButtonClick"/>

<TextView
android:id="@+id/textWifi"
android:text = "@string/strWifi"
android:gravity="center"
android:background="#8B864E"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight = "1" />

<TextView
android:id="@+id/textSystemInfo"
android:text = "@string/strSystemInfo"
android:gravity="center"
android:background="#99cc33"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight = "1" />
</LinearLayout>

<ImageView
android:id="@+id/cursor"
android:contentDescription="@string/strCursor"
android:layout_width = "fill_parent"
android:layout_height = "5dp"
android:background="#FFFFFF"
android:scaleType = "matrix"
android:src = "@drawable/cursor1" />

<android.support.v4.view.ViewPager
android:id="@+id/vPager"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:background="#FFFFFF"
android:flipInterval="30"
android:persistentDrawingCache="animation" />

</LinearLayout>

LinearLayout、RelativeLayout和TableLayout的使用规范不在这里详述，可以看到，第一个LinearLayout里包含了三个TextView用于显示Tab标签，下面的ImageView是为了增强滑动效果而使用的一个小阴影图片，最后的ViewPager即内容部分的页面。

手机信号Tab页的Layout文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000">

<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#000000">

<TableRow
android:layout_margin="0.5dip">
<TextView
android:gravity="top"
android:text="@string/strDBM"
android:textColor="#FFFFFF"/>
<TextView
android:gravity="top"
android:id="@+id/valueDBM"
android:textColor="#FFFFFF"/>
</TableRow>

<TableRow
android:layout_margin="0.5dip">
<TextView
android:gravity="top"
android:text="@string/strOperator"
android:textColor="#FFFFFF"/>
<TextView
android:gravity="top"
android:id="@+id/valueOperator"
android:textColor="#FFFFFF"/>
</TableRow>

<TableRow
android:layout_margin="0.5dip">
<TextView
android:gravity="top"
android:text="@string/strPhoneType"
android:textColor="#FFFFFF"/>
<TextView
android:gravity="top"
android:id="@+id/valuePhoneType"
android:textColor="#FFFFFF"/>
</TableRow>

<TableRow
android:layout_margin="0.5dip">
<TextView
android:gravity="top"
android:text="@string/strNetType"
android:textColor="#FFFFFF"/>
<TextView
android:gravity="top"
android:id="@+id/valueNetType"
android:textColor="#FFFFFF"/>
</TableRow>

<TableRow
android:layout_margin="0.5dip">
<TextView
android:gravity="top"
android:text="@string/strSIMOperatorName"
android:textColor="#FFFFFF"/>
<TextView
android:gravity="top"
android:id="@+id/valueSIMOperatorName"
android:textColor="#FFFFFF"/>
</TableRow>

<TableRow
android:layout_margin="0.5dip">
<TextView
android:gravity="top"
android:text="@string/strDataConnectionState"
android:textColor="#FFFFFF"/>
<TextView
android:gravity="top"
android:id="@+id/valueDataConnectionState"
android:textColor="#FFFFFF"/>
</TableRow>

<TableRow
android:layout_margin="0.5dip">
<TextView
android:gravity="top"
android:text="@string/strDataActivity"
android:textColor="#FFFFFF"/>
<TextView
android:gravity="top"
android:id="@+id/valueDataActivity"
android:textColor="#FFFFFF"/>
</TableRow>

<TableRow
android:layout_margin="0.5dip">
<TextView
android:gravity="top"
android:text="@string/strCell"
android:textColor="#FFFFFF"/>
<TextView
android:gravity="top"
android:id="@+id/valueCell"
android:textColor="#FFFFFF"/>
</TableRow>

<TableRow
android:layout_margin="0.5dip">
<TextView
android:gravity="top"
android:text="@string/strDeviceID"
android:textColor="#FFFFFF"/>
<TextView
android:gravity="top"
android:id="@+id/valueDeviceID"
android:textColor="#FFFFFF"/>
</TableRow>

<TableRow
android:layout_margin="0.5dip">
<TextView
android:gravity="top"
android:text="@string/strSubscriberId"
android:textColor="#FFFFFF"/>
<TextView
android:gravity="top"
android:id="@+id/valueSubscriberId"
android:textColor="#FFFFFF"/>
</TableRow>
</TableLayout>

<LinearLayout
android:id="@+id/chartContainer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#000000" />

</LinearLayout>

这里使用了TableLayout并指定了具体每行的元素，如何在代码中新增行会在后面的项目中用到。Table的下方放置了一个Layout用于显示曲线图。

处理Tab切换相关的代码如下

/*
* 初始化头标
*/
private void InitTextView()
{
tab1 = (TextView) findViewById(R.id.textMobile);
tab2 = (TextView) findViewById(R.id.textWifi);
tab3 = (TextView) findViewById(R.id.textSystemInfo);

tab1.setOnClickListener(new MyOnClickListener(0));
tab2.setOnClickListener(new MyOnClickListener(1));
tab3.setOnClickListener(new MyOnClickListener(2));
}

/*
* 头标点击监听
*/
public class MyOnClickListener implements View.OnClickListener{
private int index=0;

public MyOnClickListener(int i) {
index = i;
}

@Override
public void onClick(View v) {
mPager.setCurrentItem(index);
GetDetailInfo(index);
}
}

/*
* 初始化ViewPager
*/
private void InitViewPager() {
mPager = (ViewPager) findViewById(R.id.vPager);
listViews = new ArrayList<View>();
LayoutInflater mInflater = getLayoutInflater();
listViews.add(mInflater.inflate(R.layout.layout_mobile, null));
listViews.add(mInflater.inflate(R.layout.layout_wifi, null));
listViews.add(mInflater.inflate(R.layout.layout_sysinfo, null));
mPager.setAdapter(new MyPagerAdapter(listViews));
mPager.setCurrentItem(0);
mPager.setOnPageChangeListener(new MyOnPageChangeListener());
}

/*
* tab页卡切换监听
*/
public class MyOnPageChangeListener implements OnPageChangeListener {
int one;// 页卡1 -> 页卡2 偏移量
int two;// 页卡1 -> 页卡3 偏移量

public MyOnPageChangeListener() {
one = offset * 2 + bmpW;
two = one * 2;
}

@Override
public void onPageSelected(int index) {
Animation animation = null;
switch (index) {
case 0:
if (currIndex == 1) {
animation = new TranslateAnimation(one, 0, 0, 0);
} else if (currIndex == 2) {
animation = new TranslateAnimation(two, 0, 0, 0);
}
tab1.setTextSize(18);
tab2.setTextSize(14);
tab3.setTextSize(14);
break;
case 1:
if (currIndex == 0) {
animation = new TranslateAnimation(offset, one, 0, 0);
} else if (currIndex == 2) {
animation = new TranslateAnimation(two, one, 0, 0);
}
tab1.setTextSize(14);
tab2.setTextSize(18);
tab3.setTextSize(14);
break;
case 2:
if (currIndex == 0) {
animation = new TranslateAnimation(offset, two, 0, 0);
} else if (currIndex == 1) {
animation = new TranslateAnimation(one, two, 0, 0);
}
tab1.setTextSize(14);
tab2.setTextSize(14);
tab3.setTextSize(18);

break;
}

currIndex = index;
animation.setFillAfter(true);// True:图片停在动画结束位置
animation.setDuration(300);
cursor.startAnimation(animation);

GetDetailInfo(currIndex);
}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}

@Override
public void onPageScrollStateChanged(int arg0) {
}

}

* Android开发进阶系列（一） 序言 *

* Android开发进阶系列（二） Tab页界面布局 *

* Android开发进阶系列（三） 系统参数的获取和Broadcast *

* Android开发进阶系列（四） 左移拉出Menu菜单界面布局 *

* Android开发进阶系列（五） 连接服务器更新APK或下载资源文件 *

* Android开发进阶系列（六） ListView的基本用法 *

* Android开发进阶系列（七） 使用数据库 *

* Android开发进阶系列（八） 界面美化之自定义弹出框 *

* Android开发进阶系列（九） AChartEngine专题 *