[Android] ColorV UI代码理解笔记（2）-主页面

主页面：

activity_colorv.xml:

页面内容放在FrameLayout，每一页是一个Fragment。底部为五个权值都为1的RelativeLayout。

layout_weight用法会使View额外获得父空间剩余空间中权重大的长度或宽度。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/divider" />

    <View            //底部空间的分割细线
        android:id="@+id/divider"
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:layout_above="@+id/bottom_view"
        android:background="@color/v4_sep_border" />

    <LinearLayout
        android:id="@+id/bottom_view"
        android:layout_width="match_parent"
        android:layout_height="49dp"
        android:layout_alignParentBottom="true"    //处于父控件的底部
        android:baselineAligned="false"
        android:background="@color/white">

        <RelativeLayout
            android:layout_width="0dp"       //宽度设为0，weight设为一样的权值，使五个RelativeLayout平分横向空间
            android:layout_height="match_parent"
            android:layout_weight="1">

            <ImageView
                android:id="@+id/tab_home"
                android:layout_width="50dp"
                android:layout_height="match_parent"
                android:layout_centerInParent="true"     //居中显示
                android:scaleType="fitXY"    //图片缩放方式。fitXY为拉伸到与View一样大
                android:src="@drawable/tab_bar_home_icon_state" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <ImageView
                android:id="@+id/tab_find"
                android:layout_width="50dp"
                android:layout_height="match_parent"
                android:layout_centerInParent="true"
                android:scaleType="fitXY"
                android:src="@drawable/tab_bar_find_icon_state" />
        </RelativeLayout>


        <RelativeLayout
            android:id="@+id/tab_publish"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <View       //红色的底部背景
                android:id="@+id/tab_publish_bg"
                android:layout_width="45dp"
                android:layout_height="35dp"
                android:layout_centerInParent="true"
                android:background="@drawable/tab_add_bg" />

            <ImageView     //白色的十字
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:src="@drawable/add_white" />
        </RelativeLayout>


        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <ImageView
                android:id="@+id/tab_message"
                android:layout_width="50dp"
                android:layout_height="match_parent"
                android:layout_centerInParent="true"
                android:scaleType="fitXY"
                android:src="@drawable/tab_bar_message_icon_state" />

            <TextView
                android:id="@+id/message_new"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="-25dp"
                android:layout_marginTop="7dp"
                android:layout_toRightOf="@id/tab_message"
                android:background="@drawable/message_new_point"
                android:gravity="center"
                android:textColor="@color/white"
                android:textSize="@dimen/v4_t6_dp"
                android:visibility="gone" />

        </RelativeLayout>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <ImageView
                android:id="@+id/tab_me"
                android:layout_width="50dp"
                android:layout_height="match_parent"
                android:layout_centerInParent="true"
                android:scaleType="fitXY"
                android:src="@drawable/tab_bar_me_icon_state" />

            <ImageView
                android:id="@+id/message_remain"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignTop="@+id/tab_me"
                android:layout_marginLeft="-10dp"
                android:layout_marginTop="3dp"
                android:layout_toRightOf="@+id/tab_me"
                android:src="@drawable/red_point"
                android:visibility="gone" />
        </RelativeLayout>
    </LinearLayout>

    <TextView
        android:id="@+id/make_pop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/bottom_view"
        android:layout_centerHorizontal="true"
        android:background="@drawable/pop_center_bg"
        android:text="您的创作之旅从这里开始"
        android:textColor="@color/white"
        android:textSize="@dimen/v4_t3"
        android:visibility="gone" />
</RelativeLayout>

MainActivity.java:

在onCreate中把所有Fragment放到一个数组里，全部add，通过show和hide来控制当前页面的显示。

commitAllowingStateLoss方法与commit有所不同。当Activity执行完onSaveInstanceState再commit会报错，因为新的Fragment修改会丢失。使用commitAllowingStateLoss会忽略修改丢失。

commitAllowingStateLoss详见 https://blog.youkuaiyun.com/kaiqiangzhang001/article/details/42241441

    protected void onCreate(Bundle savedInstanceState) {
 
   //.......

        fragments = new ArrayList<>();
        homeFragment = new HomeFragment();
        fragments.add(homeFragment);
        fragments.add(new FindFragment());
        fragments.add(new MessageFragment());
        fragments.add(new MineFragment());
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        for (int i = 0; i < fragments.size(); i++) {
            transaction.add(R.id.container, fragments.get(i));
            transaction.hide(fragments.get(i));
        }
        transaction.show(fragments.get(0));
        transaction.commitAllowingStateLoss();     
    
    //......

把所有下方的Tab切换按钮加入到一个数组，绑定监听，点击执行selectTab，将HOME页Tab键设为Selected true.

    private List<ImageView> tabs;

        protected void onCreate(Bundle savedInstanceState) {
    //....
            tabHome = (ImageView) findViewById(R.id.tab_home);
        tabHome.setSelected(true);
        tabHome.setOnClickListener(this);
        tabFind = (ImageView) findViewById(R.id.tab_find);
        tabFind.setOnClickListener(this);
        tabMessage = (ImageView) findViewById(R.id.tab_message);
        tabMessage.setOnClickListener(this);
        messageNew = (TextView) findViewById(R.id.message_new);
        tabMe = (ImageView) findViewById(R.id.tab_me);
        tabMe.setOnClickListener(this);
        viewTabPublish = findViewById(R.id.tab_publish_bg);
        dealTabChange();
        tabs = new ArrayList<>();
        tabs.add(tabHome);
        tabs.add(tabFind);
        tabs.add(tabMessage);
        tabs.add(tabMe);
    //.......

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
    //......
                case R.id.tab_home:
                if (curSelectTab == 0) {
                    homeFragment.onHomeClicked();
                } else {
                    selectTab(0);
                }
                break;
            case R.id.tab_find:
                selectTab(1);
                break;
            case R.id.tab_message:
                selectTab(2);
                break;
            case R.id.tab_me:
                selectTab(3);
                break;
    //....

每次有Tab切换键被点击，重新标记当前被选中Tab，遍历所有Tab，修改selected状态。遍历所有Fragment，修改show状态。

setUserVisibleHint方法用于实现Fragment的懒加载。当Fragment被用户可见或不可见时调用该方法，用于避免不可见的Fragment执行大量操作或加载影响性能。

    private void selectTab(int selectIndex) {
        if (curSelectTab == selectIndex)
            return;
        curSelectTab = selectIndex;
        for (int i = 0; i < tabs.size(); i++) {
            if (selectIndex == i) {
                tabs.get(i).setSelected(true);
            } else {
                tabs.get(i).setSelected(false);
            }
        }
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        for (int i = 0; i < fragments.size(); i++) {
            if (i == selectIndex) {
                transaction.show(fragments.get(i));
                fragments.get(i).setUserVisibleHint(true);      //当Fragment可见状态改变时执行的可复写Fragment方法。参见ViewPager。
            } else {
                transaction.hide(fragments.get(i));
                fragments.get(i).setUserVisibleHint(false);
            }
        }
        transaction.commitAllowingStateLoss();
    }

复写onBackPressed，改为弹出确认退出的Dialog，点击确认后退出。

    @Override
    public void onBackPressed() {
        CustomerDialogUtils.showDialog(this, getString(R.string.quit_colorv), new CustomerDialogUtils.DialogListener() {
            @Override
            public void onComfirm() {
                finish();
            }

            @Override
            public void onCancel() {

            }
        });
    }