?实现过程

一、界面框架设计思路

我们发现对于APP的四个tab页面来说，每个页面都是由三个部分组成的：顶部的固定部分，用来显示自己APP的名字；中间部分的主页面，用来显示不同页面的主内容；底部的导航页面，用来帮助使用者清晰的切换页面。同时由于要实现页面之间的交互（中间的主内容随底部导航切换而切换），因此我们的设计思路为设计三个框架进行拼接：顶部的top、底部的bottom、中间的分段以及最后的总框架。以下是各部分的实现方法：

1.top.xml

该部分的实现方法为：最外层使用一个水平的linearlayout布局，然后使用一个textview即可。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@color/white"
        android:gravity="center"
        android:text="Yangxuefeng的应用"
        android:textColor="@color/black"
        android:textSize="30sp" />
</LinearLayout>

?

2.bottom.xml

该部分的设计思路如下：在该部分中一共有四个图片以及四个文本，每一个文本和一个图片组成一个垂直方向的元素，四个元素又组成一个水平方向的大框架。因此对于此部分，最外层采用水平的linearlayout的布局，在水平布局下又放四个垂直方向的linearlayout的布局，在每个垂直布局下又放上一个imageview和一个textview（imageview放在textview上层）即可。

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="90dp"
    android:background="@color/white">

    <LinearLayout
        android:id="@+id/linearLayout_news"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="match_parent"
            android:layout_height="45dp"
            android:src="@drawable/news" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="消息"
            android:textColor="@color/black"
            android:textSize="20dp" />
    </LinearLayout>

?注：以上为水平布局的代码及一个垂直布局的代码，另外三个垂直布局代码修改一些参数即可。

3.整体框架activity_main.xml

?整体框架就是将top，bottom以及中间的主内容进行拼接，那么最外层就需要使用一个垂直方向的lineaarlayout，然后将top和bottom部分liclude进来（top在上，bottom在下，中间放主内容），同时中间的主内容使用framelayout，以便进行接下来的交互设计。

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <include layout="@layout/top" />

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


    </FrameLayout>

    <include layout="@layout/bottom" />
</LinearLayout>

?

?二、交互设计思路

想要实现四个tab界面的交互，那么就需要activity调用FragmentManager来获取不同的Fragment，因此首先我们需要创建四个不同的Fragment，用于创建不同tab页面的主页面，之后通过一系列的调用实现不同页面的交互，以下为实现过程：

1.FragmentManager的创建

首先定义FragmentManager并创建相应的函数

private FragmentManager fragmentManager;

private void initFragment() {
       fragmentManager = getFragmentManager();
       FragmentTransaction transaction = fragmentManager.beginTransaction();
       transaction.add(R.id.id_content, newsFragment);
       transaction.add(R.id.id_content, settingFragment);
       transaction.add(R.id.id_content, friendsFragment);
       transaction.add(R.id.id_content, discoveryFragment);
       transaction.commit();

2.创建不同的Fragment.java及layout

package com.example.myworkyxf;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import android.app.Fragment;

public class discoveryFragment extends Fragment {

    public discoveryFragment() {
        // Required empty public constructor
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_discovery, container, false);
    }
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".newsFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="50sp"
        android:text="这是发现界面" />

</LinearLayout>

注：其余三个同理，修改参数即可

3.实现Fragment的隐藏和显示

我们需要将四个Fragment隐藏起来，只有在点击相应的导航时才会出现相应的Frgment，而另外三个将会继续隐藏起来，那么实现方法如下：

隐藏Fragment

    private void hideFragment(FragmentTransaction transaction) {
        transaction.hide(newsFragment);
        transaction.hide(settingFragment);
        transaction.hide(friendsFragment);
        transaction.hide(discoveryFragment);
    }

显示Fragment

    private void showfragment(int i) {
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        hideFragment(transaction);
        switch (i){
            case 0:
                transaction.show(newsFragment);
                break;
            case 1:
                transaction.show(friendsFragment);
                break;
            case 2:
                transaction.show(discoveryFragment);
                break;
            case 3:
                transaction.show(settingFragment);

                break;
            default:
                break;

        }
        transaction.commit();
    }

4.完善底部导航

我们在切换界面的时候，为了提升用户的体验感，会让底部导航的文字和图标也发生相应的变化，那么我们可以通过以下方式实现，选中两组颜色不同的图标，同时设置两组不同的文本颜色，在点击不同的导航时相应layout的图标和文字会发生改变：

private ImageView imageView1,imageView2,imageView3,imageView4;

private TextView textView1,textView2,textView3,textView4;

private void showcolor(int i){
        imageView1.setImageResource(R.drawable.news);
        textView1.setTextColor(Color.BLACK);
        imageView2.setImageResource(R.drawable.friends);
        textView2.setTextColor(Color.BLACK);
        imageView3.setImageResource(R.drawable.discovery);
        textView3.setTextColor(Color.BLACK);
        imageView4.setImageResource(R.drawable.setting);
        textView4.setTextColor(Color.BLACK);
        switch (i){
            case 0:
                imageView1.setImageResource(R.drawable.news1);
                textView1.setTextColor(Color.GREEN);
                break;
            case 1:
                imageView2.setImageResource(R.drawable.friends1);
                textView2.setTextColor(Color.GREEN);
                break;
            case 2:
                imageView3.setImageResource(R.drawable.discovery1);
                textView3.setTextColor(Color.GREEN);
                break;
            case  3:
                imageView4.setImageResource(R.drawable.setting1);
                textView4.setTextColor(Color.GREEN);
                break;
            default:
                break;

        }

    }

5.对控件进行监听实现交互

对控件的监听放在了onCreate中，同时用到了Onclick(),通过利用switch可以使得点击不同的导航可以获得不同layout的id从而实现显示不同的tab页面，实现了交互。

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);

        linearLayout_news=findViewById(R.id.linearLayout_news);
        linearLayout_friends=findViewById(R.id.linearLayout_friends);
        linearLayout_discovery=findViewById(R.id.linearLayout_discovery);
        linearLayout_setting=findViewById(R.id.linearLayout_setting);

        linearLayout_news.setOnClickListener(this);
        linearLayout_friends.setOnClickListener(this);
        linearLayout_discovery.setOnClickListener(this);
        linearLayout_setting.setOnClickListener(this);

        imageView1=findViewById(R.id.imageView1);
        imageView2=findViewById(R.id.imageView2);
        imageView3=findViewById(R.id.imageView3);
        imageView4=findViewById(R.id.imageView4);

        textView1=findViewById(R.id.textView1);
        textView2=findViewById(R.id.textView2);
        textView3=findViewById(R.id.textView3);
        textView4=findViewById(R.id.textView4);

        initFragment();
    }

@Override
    public void onClick(View v){
        switch (v.getId()){
            case R.id.linearLayout_news:
                showfragment(0);
                showcolor(0);
                break;
            case R.id.linearLayout_friends:
                showfragment(1);
                showcolor(1);
                break;
            case R.id.linearLayout_discovery:
                showfragment(2);
                showcolor(2);
                break;
            case R.id.linearLayout_setting:
                showfragment(3);
                showcolor(3);
                break;
            default:
                break;
        }

    }