Android Studio 微信界面开发——主页面框架

目录

功能说明

设计流程

核心代码详解

总结

源码开源地址(gitee)


一、功能说明

类似微信界面的设计。本次主要进行初步设计,完成微信页面的基础框架,即当点击下方按钮时,页面随之转换,分别包括“微信”、“通讯录”、“发现”、“我”,后续将会添加其他功能。

二、设计流程

        1. 将屏幕界面分为上中下三个部分,进行初步设计。

 根据微信界面的展示效果,我们知道上部主要展示带有“微信”的标签部分,在本次设计中,此部分为固定结构,即转换页面时该部分内容不发生改变,因此在我们设计的过程中,只需要设计出一个top.xml。底部页面同理。

Android Studio 微信界面开发——主页面框架_第1张图片

 中间部分是本次界面设计中相对而言较为复杂的一部分,为支持转换页面时出现不同界面效果,需要设计出四个分别对应的页面效果。现在很多手机和平板都是大尺寸和高分辨率,为了更好地重用和适应大屏幕的需求,在这其中需要引入Fragment,即“片段”。

右键layout文件夹,新建一个空白“Fragment”,对于同时产生的Java文件设置(

“R.layout.fragment_2”代表界面设计fragment_2.xml文件的位置,即res下的layout文件夹中。

):

Android Studio 微信界面开发——主页面框架_第2张图片

 通讯录页面,其他页面以此类推:

Android Studio 微信界面开发——主页面框架_第3张图片

        2. 整合上中下三部分页面。

通过,在mainlayout.xml(一般默认是activity_main.xml,我重新创建了一个xml文件,注意添加“tools:context=".MainActivity")中导入顶部布局和底部布局,中间部分使用Framlayout,将控件层叠起来,通过隐藏和展现等手段实现界面的转换,这部分则是下一部分需要完成的。mainlayout.xml文件表示:

Android Studio 微信界面开发——主页面框架_第4张图片 

        3. 实现界面转换。

(1)为完成界面转换,刚开始完成界面设计时我们使用了Fragment组件,根据官网FragmentTransaction  |  Android Developers (google.cn)icon-default.png?t=N176https://developer.android.google.cn/reference/android/app/FragmentTransaction?hl=en介绍的相关方法作用,可以得知:

 a.使用add()方法先将四个界面导入中间部分,图示来源于官网,之后的操作方法则不另外多介绍

 b.进行a步骤后,我们可以发现中间部分字体重叠了,因为通过上一个步骤将四个界面都统一导入到了中间部分,在这之后我们需要隐藏界面,即需要hide()方法,隐藏不需要的界面

c.相应的需要show()展现需要的界面,在后续代码详解中将会对代码进行解释。

 (2)完成上述步骤后,通过设置setOnClickListener() 方法、重写onClick()方法来实现点击转换界面:

Android Studio 微信界面开发——主页面框架_第5张图片

 (3)点击相对应的位置出现界面跳转(为明显表示此时界面显示功能,对于下方按钮因进行颜色区分,这将在后续完善框架中完成):

Android Studio 微信界面开发——主页面框架_第6张图片

 三、核心代码详解

(1)整合片段,将fragment添加到中间部分

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

(2)隐藏中间部分片段

public void fragmentHide(FragmentTransaction transaction){
    transaction.hide(fragment1);
    transaction.hide(fragment2);
    transaction.hide(fragment3);
    transaction.hide(fragment4);
}

(3)展现中间片段,其中引用了fragmentHide()方法,是为了防止在界面转换时出现界面重叠。除此之外,在该方法中引用fragmentHide()方法,而不是在onClick()方法引用,主要是因为:

1)将FragmentTransaction事务设置为局部变量,可进行多次commit

2)在onClick()方法引用需要再次声明transaction

private void showFragment(Fragment fragment){
    FragmentTransaction transaction;
    transaction=manager.beginTransaction();
    fragmentHide(transaction);
    transaction.show(fragment);
    transaction.commit();
}

(4)重写onClick()方法,通过对比传递过来的控件信息,以实现点击转换界面功能

public void onClick(View view){
    int j = view.getId();
    switch (j){
        case R.id.LinearLayout1:
            showFragment(fragment1);
            break;
        case R.id.LinearLayout2:
            showFragment(fragment2);
            break;
        case R.id.LinearLayout3:
            showFragment(fragment3);
            break;
        case R.id.LinearLayout4:
            showFragment(fragment4);
        default:
            break;
    };
}

四、总结

(1)主要过程:

初步设计界面->整合界面->实现界面转换功能

(2)其中需要注意:FragmentTransaction事务是全局变量时,只能提交(commit)一次,因此在本次设计中最好都设计为局部变量

五、源码开源地址(gitee)

https://gitee.com/h9lei/android-studio.git

你可能感兴趣的:(android,studio,java,前端)