移动开发第一次作业——实现微信首页跳转

文章目录

移动开发第一次作业——实现微信首页跳转
- 一、页面分层设计
- 二、顶部title设计
- 三、底部菜单设计
- - 1、布局结构：
  - 2、图片及文字数据添加
- 四、主体内容设计
- 五、Fragment实现切换功能
- - 1.新建四个Fragment类
  - 2、在Fragment中添加文字说明
- 六、逻辑代码书写，实现点击切换效果
- - 1、inItFragment（实现进入默认显示微信菜单）
  - 2、replaceFragment（动态切换fragment）
  - 3、changeColor（切换图片以及文字颜色）
  - 4、重写监听函数
  - 5、重写onCreate函数
- 七、MainActivity全部代码
- 八、gitee仓库地址

一、页面分层设计

经过分析，首页分为三个部分：、

顶部title显示
主体
底部菜单

二、顶部title设计

使用水平线性布局，将一个TextView放入其中即可

code如下：

三、底部菜单设计 1、布局结构：

2、图片及文字数据添加

每个菜单下载两个图片放入drawable目录下，用于点击切换显示不同颜色的图片。具体做法是设置选中属性，当imageView被选中显示图片1否则显示图片2。文字颜色类似设置。

drawable目录结构：

图片切换示例（以通讯录为例）code： icon_address.xml

文字颜色code：textcolor.xml

随后在控件的code设计中将图片引用路径和文字颜色路径设置为相对应的.xml文件即可。具体操作如下：

将其他四个ImageView和TextView做相同操作即可。

随后在MainActivity中绑定相关点击事件即可。

四、主体内容设计

只用在activity_main.xml中加入一个frameLayout作为容器，之后新建四个Fragment然后点击相对应的菜单将Fragment替换到frameLayout中。

五、Fragment实现切换功能 1.新建四个Fragment类

由于本阶段只用返还fragment页面并显示文字即可，所以不用更改初始化的代码，写好return即可

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    return inflater.inflate(R.layout.fragment_wx, container, false);

}

2、在Fragment中添加文字说明

//这是通讯录

至此所有的页面设计和数据都已经准备好了，下面写MainActivity.java中的逻辑代码。

六、逻辑代码书写，实现点击切换效果

本部分介绍主要函数。

1、inItFragment（实现进入默认显示微信菜单）

private void inInFragment(Fragment fragment){
    FragmentManager fragmentManager = getSupportFragmentManager();
    FragmentTransaction transaction = fragmentManager.beginTransaction();
     //将传入的fragment添加到fragment_main中fragment_main是一个frameLayout控件
    transaction.add(R.id.fragment_main,fragment);
    transaction.commit();
}

2、replaceFragment（动态切换fragment）

接受当前Fragment，并将此Fragment替换进R.id.fragment_main这个frameLayout中显示。

private void replaceFragment(Fragment fragment) {
    //得到一个fragmentManager
    FragmentManager fragmentManager = getSupportFragmentManager();
    FragmentTransaction transaction = fragmentManager.beginTransaction();
    //将传入的fragment替换到fragment_main中fragment_main是一个frameLayout控件
    transaction.replace(R.id.fragment_main,fragment);
    transaction.commit();
}

3、changeColor（切换图片以及文字颜色）

接受一个id用于指示当前被点击的页面并将其中的ImageView和TextView的Selected属性设置为true

离开此页面时将Selected属性设置为false。

private void changeColor(int id){
    //当前页面imgView和textView指针，离开当前菜单时将控件设置为未选中
    imgCur.setSelected(false);
    textCur.setSelected(false);
    switch (id){
        case 1:
            textWx.setSelected(true);
            imgWx.setSelected(true);
            textCur = textWx;
            imgCur=imgWx;
            break;
        case 2:
            textAddress.setSelected(true);
            imgAddress.setSelected(true);
            textCur=textAddress;
            imgCur=imgAddress;
            break;
        case 3:
            textFriend.setSelected(true);
            imgFriend.setSelected(true);
            textCur=textFriend;
            imgCur = imgFriend;
            break;
        case 4:
            textMe.setSelected(true);
            imgMe.setSelected(true);
            textCur=textMe;
            imgCur = imgMe;
            break;
        default:
            break;
    }

}

4、重写监听函数

使用switch-case语句，检查当前点击的视图id，然后执行两个函数

replaceFragment(new FragmentWx());
changeColor(1);

 @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.linear_wx:
                replaceFragment(new FragmentWx());
                changeColor(1);
                break;
            case R.id.linear_address:
                replaceFragment(new FragmentAddress());
                changeColor(2);
                break;
            case R.id.linear_friend:
                replaceFragment(new FragmentFriend());
                changeColor(3);
                break;
            case R.id.linear_me:
                replaceFragment(new FragmentMe());
                changeColor(4);
                break;
            default:
                break;
        }
    }

5、重写onCreate函数

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    //隐藏项目名
    supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
    setContentView(R.layout.activity_main);
	//初始化成员参数
    inItParam();
    //默认显示微信菜单
    inItFragment(new FragmentWx());
    imgWx.setSelected(true);
    textWx.setSelected(true);

}

七、MainActivity全部代码

package com.hsy.wx;

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.view.Window;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private LinearLayout linearWx,linearAddress,linearFriend,linearMe;
    private ImageView imgWx,imgAddress,imgFriend,imgMe,imgCur;
    private TextView textWx,textAddress,textFriend,textMe,textCur;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //隐藏项目名
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);

        inItParam();
        inItFragment(new FragmentWx());
        imgWx.setSelected(true);
        textWx.setSelected(true);

    }
    private void inItParam(){
        imgCur = findViewById(R.id.ima_wx);
        textCur = findViewById(R.id.text_wx);
        //微信点击事件
        textWx = findViewById(R.id.text_wx);
        imgWx = findViewById(R.id.ima_wx);
        linearWx = findViewById(R.id.linear_wx);
        linearWx.setOnClickListener(this);
        //通讯录
        textAddress=findViewById(R.id.text_address);
        imgAddress = findViewById(R.id.ima_address);
        linearAddress = findViewById(R.id.linear_address);
        linearAddress.setOnClickListener(this);
        //朋友圈
        textFriend = findViewById(R.id.text_friend);
        imgFriend = findViewById(R.id.ima_friend);
        linearFriend = findViewById(R.id.linear_friend);
        linearFriend.setOnClickListener(this);
        //我的
        textMe = findViewById(R.id.text_me);
        imgMe = findViewById(R.id.ima_me);
        linearMe = findViewById(R.id.linear_me);
        linearMe.setOnClickListener(this);
    }

    private void changeColor(int id){
        imgCur.setSelected(false);
        textCur.setSelected(false);
        switch (id){
            case 1:
                textWx.setSelected(true);
                imgWx.setSelected(true);
                textCur = textWx;
                imgCur=imgWx;
                break;
            case 2:
                textAddress.setSelected(true);
                imgAddress.setSelected(true);
                textCur=textAddress;
                imgCur=imgAddress;
                break;
            case 3:
                textFriend.setSelected(true);
                imgFriend.setSelected(true);
                textCur=textFriend;
                imgCur = imgFriend;
                break;
            case 4:
                textMe.setSelected(true);
                imgMe.setSelected(true);
                textCur=textMe;
                imgCur = imgMe;
                break;
            default:
                break;
        }

    }
    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.linear_wx:
//                imgWx.setSelected(true);
//                imgCur=imgWx;
                replaceFragment(new FragmentWx());
                changeColor(1);
                break;
            case R.id.linear_address:
//                imgAddress.setSelected(true);
//                imgCur = imgAddress;
                replaceFragment(new FragmentAddress());
                changeColor(2);
                break;
            case R.id.linear_friend:

//                imgFriend.setSelected(true);
//                imgCur=imgFriend;
                replaceFragment(new FragmentFriend());
                changeColor(3);
                break;
            case R.id.linear_me:
//                imgMe.setSelected(true);
//                imgCur=imgMe;
                replaceFragment(new FragmentMe());
                changeColor(4);
                break;
            default:
                break;
        }
    }
    private void inItFragment(Fragment fragment){
        FragmentManager fragmentManager = getSupportFragmentManager();
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        transaction.add(R.id.fragment_main,fragment);
        transaction.commit();
    }
    //动态切换fragment
    private void replaceFragment(Fragment fragment) {
        //得到一个fragmentManager
        FragmentManager fragmentManager = getSupportFragmentManager();
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        //将传入的fragment替换到fragment_main中fragment_main是一个frameLayout控件
        transaction.replace(R.id.fragment_main,fragment);
        transaction.commit();
    }
}

八、gitee仓库地址

别忘了点赞收藏哦！！！

移动开发第一次作业——实现微信首页跳转

Java相关栏目本月热门文章