安卓开发微信页面设计

twelvecoder

发布于 2021-12-24 09:44:46

9430

发布于 2021-12-24 09:44:46

文章被收录于专栏：十二的树洞

功能要求

1.页面具有标题

2.具有四个页面，页面具有底部选择框，同时具有选择事件，当点击选择事件的时候进行页面切换

3.页面内容不超出边界且清晰

思路分析

该微信界面由三部分组成

页面顶部标题栏（top.xml）
中间内容页面
底部导航栏（bottom.xml）

所以我们需要编写上述几个xml布局页面，分别分析每部分的布局内容及要求：顶部标题栏：此栏需有app的标题，标题大小颜色自定义且居中显示，背景色自选中间内容页面：由于本app是仿微信界面，所以设置了四个页面，分别显示不同的内容底部导航栏：四个图标，单击可以切换中间内容页面，故该布局文件中包含四个ImageButton，界面切换部分需要用Fragment实现

设计过程

1.资源文件导入

把图片等资源文件导入到/app/res/drawble 目录下

2.布局设计

此仿微信界面分为三部分，标题栏，中间内容页面，底部栏，故分部分进行设计。

标题栏

添加一个TextView，填入文字，定义大小和颜色，设置背景颜色，有关于文字居中，我们要修改和添加一些配置信息。在linearlayout中，我们修改gravity所对应的配置信息为center 在TextView中，我们修改layout_gravity所对应的配置信息为center_horizontal

背景颜色等颜色设置，都可以直接点击左边的小方块进行设置

App名称是通过调用values中的strings.xml里的值设置的

中间页面

主页面设置为四个界面，即四个xml布局文件，每一个里面都设置一个TextView，居中显示即可

底部栏

设置一个水平放置的LinearLayout，在其下放入四个垂直的LinearLayout，每个垂直的LinearLayout下放置一个imagebutton后，再放一个TextView，慢慢拖动设置到满意的程度修改layout_width，layout_weight，orientation直到达到预期效果

activity_main主布局文件

在activity_main里，首先在最外面设置垂直，配置orientation就行，配置以v开头就行。然后是将标题栏和底部栏放入，用include导入top和bottom，然后中间放入一个FrameLayout就可以了。

3.java文件编写

由于布局文件以及设置编写好了，我们需要编写控制代码逻辑的Java文件这里最重要的是Fragment，这里我们需要对每一个Fragment（对应一个xml布局文件）新建一个Fragment类

ChatFragment.java
FriendsFragment.java
CommFragment.java
SettingFragment.java

按上图配置，每一个类相当于对应一个布局，这样我们就将四个布局所对应的xml文件就变成了四个类对象，从而可以正常的调用它。

在MainActivity.java中控制操作逻辑首先要new出各个界面（Fragment）的对象，还有有一个FragmentManager管理所有的Fragment

	private Fragment chatFragment = new ChatFragment();
    private Fragment friendsFragment = new FriendsFragment();
    private Fragment commFragment = new CommFragment();
    private Fragment settingFragment = new SettingFragment();

并且创建一个Fragment管理变量

private FragmentManager fragmentManager;

新建一个initFragment函数用以给Fragment页面初始化，在此函数中，将此前定义个4个Fragment变量使用fragmentManager添加到activity_mainw文件的Framelayout布局中

private void initFragment(){
        fragmentManager = getSupportFragmentManager();
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        transaction.add(R.id.content,chatFragment);
        transaction.add(R.id.content,friendsFragment);
        transaction.add(R.id.content,commFragment);
        transaction.add(R.id.content,settingFragment);
        transaction.commit();
    }

对bottom.xml下的4个imagebutton控件和4个linearlayout控件建立8个变量

	private LinearLayout chatLayout;
    private LinearLayout friendsLayout;
    private LinearLayout commLayout;
    private LinearLayout settingLayout;

    private ImageButton chatImageButton;
    private ImageButton friendsImageButton;
    private ImageButton commImageButton;
    private ImageButton settingImageButton;

编写initview函数，将此8个变量和bottom中的8个控件联系起来，先使用findviewbyid函数找到对应的控件，再把它强制转换成对应的变量类型即可

private void initView(){
        chatLayout = findViewById(R.id.chatLayout);
        friendsLayout = findViewById(R.id.friendsLayout);
        commLayout = findViewById(R.id.commLayout);
        settingLayout = findViewById(R.id.settingLayout);

        chatImageButton = findViewById(R.id.chatImageButton);
        friendsImageButton = findViewById(R.id.friendsImageButton);
        commImageButton = findViewById(R.id.commImageButton);
        settingImageButton = findViewById(R.id.settingImageButton);

        chatText = findViewById(R.id.chatText);
        friendsText = findViewById(R.id.friendsText);
        commText = findViewById(R.id.commText);
        settingText = findViewById(R.id.settingText);
    }

将所有的textview隐藏起来，通过点击每个图标给界面选择函数发送不同的参数，从而实现界面的选择，在界面选择函数中需要先将4个界面对应的textview控件都隐藏

private void hideFragment(FragmentTransaction transaction){
        transaction.hide(chatFragment);
        transaction.hide(friendsFragment);
        transaction.hide(commFragment);
        transaction.hide(settingFragment);
    }

设置监听程序

public class MainActivity extends AppCompatActivity implements View.OnClickListener

点击图标后颜色变化，此方法的方法体的开始需要一个resetBtn函数，此函数作用为把xml文件中的4个图标都初始化为浅色的图标，然后等待选则的时候，再将对应的图片改为深色

 @SuppressLint("ResourceAsColor")
    private void resetBtn(){
        chatImageButton.setImageResource(R.drawable.chat);
        friendsImageButton.setImageResource(R.drawable.friends);
        commImageButton.setImageResource(R.drawable.comm);
        settingImageButton.setImageResource(R.drawable.setting);

        chatText.setTextColor(this.getResources().getColor(R.color.nopickText));
        friendsText.setTextColor(this.getResources().getColor(R.color.nopickText));
        commText.setTextColor(this.getResources().getColor(R.color.nopickText));
        settingText.setTextColor(this.getResources().getColor(R.color.nopickText));
    }

仅仅对bottom的四个linerlayout监听

    private void initEvent(){
        chatLayout.setOnClickListener(this);
        friendsLayout.setOnClickListener(this);
        commLayout.setOnClickListener(this);
        settingLayout.setOnClickListener(this);
    }