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檔案反編譯