TesterHome android app 编写历程（一）

最新推荐文章于 2024-02-28 14:40:53 发布

saii

最新推荐文章于 2024-02-28 14:40:53 发布

阅读量1.2k

点赞数 2

分类专栏： android相关文章标签： indicator android

本文链接：https://blog.csdn.net/qq744746842/article/details/48688253

版权

android相关专栏收录该内容

21 篇文章 1 订阅

订阅专栏

摘要

前段时间看到一个大神在Testerhome论坛里面上传了自己编写的TesterHome的代码，心里也就下定决定我应该也去试试看，作为android app测试工程师，对于android的一些东西至少还是需要了解的。看了下那位大神的一些代码，又看了他推荐的编写代码的规范，就按照上面的开始编写吧，所以后面写的一些内容，可能会有些内容是参考大神的代码的。

正文

下来今天我们需要完成的是一个TesterHome的界面，基本的界面情况如下：
这里写图片描述
看这个界面的话，大体就是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">15sp</item>
        <item name="android:dividerPadding">8dp</item>
        <item name="android:showDividers">middle</item>
        <item name="android:paddingLeft">10dp</item>
        <item name="android:paddingRight">10dp</item>
        <item name="android:fadingEdge">horizontal</item>
        <item name="android:fadingEdgeLength">8dp</item>
    </style>

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

    </style>