类微信门户页面框架设计

一、设计目标

  根据课程教学内容利用AS完成类微信的门户页面框架设计，APP包含4个tab页面。框架设计使用fragment，activity。

二、功能说明

  显示页面主要分为三个部分:
  1.顶部top.xml的实现：最外层为水平的LinearLayout,在其下添加一个TextView即可。

  2.底部layout_bottom.xml的实现：底部需要四个相同格式的LinearLayout（vertical），四个部分都在LinearLayout（horizontal）下，每个LinearLayout（vertical）包括一个imageview和textview。运行时点击下面的四个imageView，在blankfragment中return tab的id，会显示对应的tab，tab02，tab03，tap04页面。

   

   3.总框架activity_main.xml的实现：添加一个FramLayout，同时用include将top.xml和layout_bottom.xml包括进去。

三、代码解析

MainActivity.java：

package com.example.myapplication0919;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;


import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    private Fragment fragment1,fragment2,fragment3,fragment4;

    private FragmentManager manager;

    private LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;

    private FragmentTransaction transaction;//类中的全局变量transaction；

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

        linearLayout1=findViewById(R.id.linearlayout1);
        linearLayout2=findViewById(R.id.linearlayout2);
        linearLayout3=findViewById(R.id.linearlayout3);
        linearLayout4=findViewById(R.id.linearlayout4);

        fragment1=new BlankFragment();
        fragment2=new BlankFragment02();
        fragment3=new BlankFragment03();
        fragment4=new BlankFragment04();

        manager=getSupportFragmentManager();

        initial();

        hide();

        linearLayout1.setOnClickListener(this);
        linearLayout2.setOnClickListener(this);
        linearLayout3.setOnClickListener(this);
        linearLayout4.setOnClickListener(this);
        }

    private void initial(){
            FragmentTransaction transaction=manager.beginTransaction()
                    .add(R.id.framelayout,fragment1)
                    .add(R.id.framelayout,fragment2)
                    .add(R.id.framelayout,fragment3)
                    .add(R.id.framelayout,fragment4);
            transaction.commit();
        }

    @Override
    public void onClick(View view) {
        int i=0;
        switch (view.getId()){
            case R.id.linearlayout1:select(1);
            break;
            case R.id.linearlayout2:select(2);
            break;
            case R.id.linearlayout3:select(3);
                break;
            case R.id.linearlayout4:select(4);
                break;

        }

    }

    public void select(int i){
        hide();
        switch(i){
            case 1:showFragment(fragment1);
                break;
            case 2:showFragment(fragment2);
                break;
            case 3:showFragment(fragment3);
                break;
            case 4:showFragment(fragment4);
                break;
        }

    }

    private void showFragment(Fragment fragment){
        transaction.show(fragment);
    }

    private void hide(){
        transaction=manager.beginTransaction()//将类中的trasaction变量做了重新赋值
                .hide(fragment1)
                .hide(fragment2)
                .hide(fragment3)
                .hide(fragment4);
        transaction.commit();
    }

}

BlankFragment.java：

package com.example.myapplication0919;

import android.os.Bundle;

import androidx.fragment.app.Fragment;

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

public class BlankFragment extends Fragment {

    // TODO: Rename parameter arguments, choose names that match
    // the fragment initialization parameters, e.g. ARG_ITEM_NUMBER


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

BlankFragment02.java：……

BlankFragment03.java：

BlankFragment004.java：

（四个BlankFragment内容相同，仅对应的命名和return 的tab页面不同，此处仅展示BlankFragment代码）

四、运行展示截图

初始界面：

 点击“微信”：

 点击“通讯录”：

 点击“发现”：

点击“我的”：

五、源码仓库地址

移动开发类微信门户 · 黄橘子/orange - 码云 - 开源中国 (gitee.com)