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

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

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

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

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

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

Android开发进阶系列（二） 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());
        tab2.setOnClickListener(new MyOnClickListener());
        tab3.setOnClickListener(new MyOnClickListener());      
    }

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

        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();
        mPager.setOnPageChangeListener(new MyOnPageChangeListener());
    }

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

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

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

                 break;
             }

             currIndex = index;
             animation.setFillAfter(true);// True:图片停在动画结束位置
             animation.setDuration();
             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专题 *

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

主框架Layout文件

手机信号Tab页的Layout文件

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

继续阅读

专访邓凡平：深入理解Android

与专家面对面：Android开发入门问与答

Android MVP架构MVCMVP

mvp初探

Android常用工具类简介目录

android常用工具类转载自：http://www.trinea.cn/android/android-common-utils/Android常用工具类

Android常用工具类ToastUtilsSizeUtilsLogUtilsRetrofitManagerAnimUtil

Android Studio 0.8.0解决 Failure [INSTALL_FAILED_OLDER_SDK] 问题

Android – ListView 中添加按钮，动态删除添加ItemView的操作

Kotlin的ListView与RecyclerView的简单应用

关于公司的那些坑：Android Studio篇

android SQLite事务和kotlin协程

无法正常编译错误Compilation failed to complete

关于Gradle配置的小结

AOP编程_Android优雅权限框架(1)概念基础，2021金三银四前言正文大纲正文

Android APK文件反编译Android APK文件反编译