移动开发技术学习（一）

完成展示

码云仓库
启动项目，默认显示聊天页面，点击图标可以切换页面

创建项目

创建一个empty空项目，给项目取个名字选择存储位置。

创建成功后就是这个样子

页面布局

创建xml文件

整体的页面布局分为三个部分，所以在activity_main.xml主布局文件中嵌入top.xml和bottom.xml，中间部分因为是点击tab动态切换Fragment，所以用到FrameLayout控件。
然后因为有四个tab，fragment应该有4个：fragment_weixin.xml、fragment_friend.xml、fragment_contact.xml、fragment_setting。

添加fragment的方式

xml文件内容

• activity_main.xml

<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/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">
    </FrameLayout>

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

注： 在布局的时候，系统会先按照view的layout_width和layout_height来布局，然后再根据layout_weight设置的权重比例对view的位置进行调整。这里如果FramLayout没有layout_weight="1"，就会覆盖掉bottom.xml。

• top.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="wrap_content" android:background="@color/black">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="我的微信"
        android:textColor="@color/white"
        android:textSize="30sp"/>
</LinearLayout>

注：

1. 这里的LinearLayout和TextView的 layout_height 都要为wrap_content，不然在主布局中就会有某个部分被覆盖掉。
2. 区分gravity和layout_gravity。
3. 字体单位一般用sp，布局的单位一般用dp。
4. 颜色或者字符串这种如果在项目中经常用到，比如主题色，可以定义在res -> values下面的xml文件中。
   

• bottom.xml
  就是一个水平的LinearLayout，里面4个垂直的LinearLayout，为了让4个tab能实现动态布局，给每个垂直的LinearLayout都加上layout_weight="1"。

一个垂直的LinearLayout

<LinearLayout
        android:id="@+id/tab01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@color/black"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/tab_weixin_normal" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="聊天"
            android:textColor="@color/white"
            android:textSize="18sp" />
    </LinearLayout>

• 4个fragment.xml文件里都先添加一个TextView控件，文字修改成相应的文字便于区别就行了。

实现动态切换fragment和图标

创建fragment的时候会创建Fragment.java文件，需要的就只有onCreateView函数

public class WeixinFragment extends Fragment {

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

在MainActivity.class中
成员变量

	private Fragment weixinfragment;
    private Fragment friendfragment;
    private Fragment contactfragment;
    private Fragment settingfragment;

    private FragmentManager fm;     //管理Fragment

    private LinearLayout tab01, tab02, tab03, tab04;    //需要监听控件的点击事件

    private ImageView imageView1, imageView2, imageView3, imageView4;   //需要更改图片资源

在onCreate函数中，先创建4个fragment对象和FragmentManager对象，并进行初始化，将fragment的添加，隐藏，展示完成。再绑定Layout中的tab和imageView，将聊天那的图标显示为选中状态，然后监听tab。

	@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        weixinfragment = new WeixinFragment();
        friendfragment = new FriendFragment();
        contactfragment = new ContactFragment();
        settingfragment = new SettingFragment();

        tab01 = findViewById(R.id.tab01);
        tab02 = findViewById(R.id.tab02);
        tab03 = findViewById(R.id.tab03);
        tab04 = findViewById(R.id.tab04);

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

        fm = getSupportFragmentManager();

        initFragment();

        imageView1.setImageResource(R.drawable.tab_weixin_pressed); //将tab01那的图标换成点中的样子

        tab01.setOnClickListener(this);     //this指的是onclick
        tab02.setOnClickListener(this);
        tab03.setOnClickListener(this);
        tab04.setOnClickListener(this);
    }

    private void initFragment() {
        FragmentTransaction fragmentTransaction = fm.beginTransaction();
        fragmentTransaction.add(R.id.content,weixinfragment);
        fragmentTransaction.add(R.id.content,friendfragment);
        fragmentTransaction.add(R.id.content,contactfragment);
        fragmentTransaction.add(R.id.content,settingfragment);
        hideAll(fragmentTransaction);
        fragmentTransaction.show(weixinfragment);
        fragmentTransaction.commit();

    }

4个tab的监听都是相同的，为了不写那么多重复的代码，直接让MainActivity实现View.OnClickListener，重写onClick方法。

    @Override
    public void onClick(View view) {
        switch (view.getId()){  //看选中的控件id
            case R.id.tab01:
                show(1);
                break;
            case R.id.tab02:
                show(2);
                break;
            case R.id.tab03:
                show(3);
                break;
            case R.id.tab04:
                show(4);
                break;
            default:
                break;
        }
    }

每次点击，就是先把所有的fragment隐藏，所有的图标换为没有选中的状态，然后再看点的是哪一个就显示对应的fragment，把图标换成选中的

    private void show(int i) {
        FragmentTransaction fragmentTransaction = fm.beginTransaction();
        hideAll(fragmentTransaction);
        switch (i){
            case 1:
                fragmentTransaction.show(weixinfragment);   //展现当前fragment
                imageView1.setImageResource(R.drawable.tab_weixin_pressed); //换图标
                break;
            case 2:
                fragmentTransaction.show(friendfragment);
                imageView2.setImageResource(R.drawable.tab_weixin_pressed);
                break;
            case 3:
                fragmentTransaction.show(contactfragment);
                imageView3.setImageResource(R.drawable.tab_weixin_pressed);
                break;
            case 4:
                fragmentTransaction.show(settingfragment);
                imageView4.setImageResource(R.drawable.tab_weixin_pressed);
                break;
            default:
                break;
        }
        fragmentTransaction.commit();
    }

    private void hideAll(FragmentTransaction fragmentTransaction) {
        //隐藏所有Fragment，transaction中间过程还没结束不commit
        fragmentTransaction.hide(weixinfragment);
        fragmentTransaction.hide(friendfragment);
        fragmentTransaction.hide(contactfragment);
        fragmentTransaction.hide(settingfragment);
        //把所有的图标换成normal
        imageView1.setImageResource(R.drawable.tab_weixin_normal);
        imageView2.setImageResource(R.drawable.tab_weixin_normal);
        imageView3.setImageResource(R.drawable.tab_weixin_normal);
        imageView4.setImageResource(R.drawable.tab_weixin_normal);

    }