TesterHome android app 編寫曆程（一）

摘要

前段時間看到一個大神在Testerhome論壇裡面上傳了自己編寫的TesterHome的代碼，心裡也就下定決定我應該也去試試看，作為android app測試工程師，對于android的一些東西至少還是需要了解的。看了下那位大神的一些代碼，又看了他推薦的編寫代碼的規範，就按照上面的開始編寫吧，是以後面寫的一些内容，可能會有些内容是參考大神的代碼的。

正文

下來今天我們需要完成的是一個TesterHome的界面，基本的界面情況如下：

TesterHome android app 編寫曆程（一）

看這個界面的話，大體就是4個Fragment接着再其中的一個fragment中再嵌套4個fragment就行了。話說的簡單，我們還是來實作下比較好。

首先我們來實作底部的布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:background="#FFFFFF">

    <LinearLayout
        android:id="@+id/id_community"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical"
        android:gravity="center"
        android:padding="2dp"
        >
        <com.saii.testerhome.views.TintableImageView
            android:id="@+id/id_community_img"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:padding="3dp"
            android:src="@drawable/tab_main_home"
            app:tint="@color/tab_item_tint_color"/>
        <TextView
            android:id="@+id/id_community_tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="3dp"
            android:text="@string/community"
            android:textSize="15sp"
            android:textColor="#848484"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/id_topic"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical"
        android:gravity="center"
        android:padding="2dp"
        >
        <com.saii.testerhome.views.TintableImageView
            android:id="@+id/id_topic_img"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:padding="3dp"
            android:src="@drawable/tab_main_topic"
            app:tint="@color/tab_item_tint_color"/>
        <TextView
            android:id="@+id/id_topic_tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="3dp"
            android:text="@string/topic"
            android:textSize="15sp"
            android:textColor="#848484"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/id_job"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical"
        android:gravity="center"
        android:padding="2dp"
        >
        <com.saii.testerhome.views.TintableImageView
            android:id="@+id/id_job_img"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:padding="3dp"
            android:src="@drawable/tab_main_job"
            app:tint="@color/tab_item_tint_color"/>
        <TextView
            android:id="@+id/id_job_tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="3dp"
            android:text="@string/job"
            android:textSize="15sp"
            android:textColor="#848484"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/id_my"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical"
        android:gravity="center"
        android:padding="2dp"
        >
        <com.saii.testerhome.views.TintableImageView
            android:id="@+id/id_my_img"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:padding="3dp"
            android:src="@drawable/tab_main_my"
            app:tint="@color/tab_item_tint_color"/>
        <TextView
            android:id="@+id/id_my_tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="3dp"
            android:text="@string/my"
            android:textSize="12sp"
            android:textColor="#848484"/>
    </LinearLayout>


</LinearLayout>

底部的布局實際上不太難，就是4個linearylayout實作的。

再來就是綁定linearyLayout的點選事件，并且在點選的時候，顯示對應的fragment.代碼如下：

FragmentManager fm = getSupportFragmentManager();
FragmentTransaction fragmentTransaction =  fm.beginTransaction();
hideAllFragment(fragmentTransaction);
switch (index){
    case Config.COMMUNITYFRAGMENT:
        communityImage.setSelected(true);
        communityTextView.setTextColor(getResources().getColor(R.color.tab_item_tint_focused));
        if (communityFragment==null){
            communityFragment = new CommunityFragment();
            fragmentTransaction.add(R.id.id_content,communityFragment);
        }
        fragmentTransaction.show(communityFragment);
        break;
    case Config.TOPICFRAGMENT:
        topicImage.setSelected(true);
        topicTextView.setTextColor(getResources().getColor(R.color.tab_item_tint_focused));
        if (topicFragment==null){
            topicFragment = new TopicFragment();
            fragmentTransaction.add(R.id.id_content,topicFragment);
        }
        fragmentTransaction.show(topicFragment);
        break;
    case Config.JOBFRAGMENT:
        jobImage.setSelected(true);
        jobTextView.setTextColor(getResources().getColor(R.color.tab_item_tint_focused));
        if (jobFragment==null){
            jobFragment = new JobFragment();
            fragmentTransaction.add(R.id.id_content,jobFragment);
        }
        fragmentTransaction.show(jobFragment);
        break;
    case Config.MYFRAGMENT:
        myImage.setSelected(true);
        myTextView.setTextColor(getResources().getColor(R.color.tab_item_tint_focused));
        if (myFragment==null){
            myFragment = new MyFragment();
            fragmentTransaction.add(R.id.id_content,myFragment);
        }
        fragmentTransaction.show(myFragment);
        break;

}
fragmentTransaction.commit();

通過fragment管理器擷取到fragment的事務，接着就是判斷每個fragment是否為null如果為空則執行個體化出來，加入到事務中并且讓其顯示出來。

這樣子我們就完成了底部按鈕與Fragment的關聯了，下來的話我們需要實作頂部的最新，最熱按鈕，并且還需要它關聯viewpager 進行手勢滑動。

這裡我們采用了第三方的一個開源庫ViewPagerIndicator使用它友善了很多的工作。

首先還是一樣我們先将主要的布局準備好。

<?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"
    >

    <com.viewpagerindicator.TabPageIndicator
        android:id="@+id/id_indicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />

    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        />
</LinearLayout>

這裡隻需要聲明一個TabPagerIndicator以及一個viewpager就可以了。

下來就是在我們聲明的一個fragment中實作indicator與viewpager的綁定等等了。

因為Viewpager都需要一個擴充卡是以我們這裡先申明一個擴充卡

class TabPageIndicatorAdapter extends FragmentPagerAdapter{

        public TabPageIndicatorAdapter(FragmentManager fm){
            super(fm);

        }


        //這裡面的bundle隻是為了測試 是以傳遞了按鈕的名稱進去
        @Override
        public Fragment getItem(int position) {
            Fragment fragment = new CommunityItemFragment();
            Bundle bundle = new Bundle();
            bundle.putString("key",TITLE[position]);
            fragment.setArguments(bundle);
            return fragment;
        }

        //傳回每個按鈕的名稱
        @Override
        public CharSequence getPageTitle(int position) {
            return TITLE[position%TITLE.length];
        }

        @Override
        public int getCount() {
            return TITLE.length;
        }
    }

再來就是綁定viewpager 以及adpter還有就是indicator與viewpager的綁定

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_community,container,false);
        viewPager = (ViewPager)view.findViewById(R.id.id_viewpager);
        tabPageIndicatorAdapter = new TabPageIndicatorAdapter(getFragmentManager());
        viewPager.setAdapter(tabPageIndicatorAdapter);
        tabPageIndicator = (TabPageIndicator)view.findViewById(R.id.id_indicator);
        tabPageIndicator.setViewPager(viewPager);

        tabPageIndicator.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
//                Toast.makeText(getActivity(), TITLE[position], Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
        return view;

    }

最後還需要加上style.xml

<style name="StyledIndicators" parent="@android:style/Theme.Light">
        <item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>
    </style>

    <style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
        <item name="android:background">@drawable/tab_indicator</item>
        <item name="android:textAppearance">@style/CustomTabPageIndicator.Text</item>
        <item name="android:textSize">sp</item>
        <item name="android:dividerPadding">dp</item>
        <item name="android:showDividers">middle</item>
        <item name="android:paddingLeft">dp</item>
        <item name="android:paddingRight">dp</item>
        <item name="android:fadingEdge">horizontal</item>
        <item name="android:fadingEdgeLength">dp</item>
    </style>

    <style name="CustomTabPageIndicator.Text" parent="android:TextAppearance.Medium">
        <item name="android:typeface">monospace</item>

    </style>

在androidManifest.xml中設定對應的主題就ok了。

最終的效果如下

TesterHome android app 編寫曆程（一）

TesterHome android app 編寫曆程（一）

摘要

正文

繼續閱讀

專訪鄧凡平：深入了解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檔案反編譯