Android 微信开发界面 微信开发页面

功能介绍

1. 仿照微信界面，设计了4个界面
2. 点击底部的按键实现页面切换
3. 随着页面的切换，顶部的标题也会变换
4. 选中的页面底部的图标会有颜色加深

---

实现思路

1. 将整体界面分为三部分，上：标题，中：主体，下：导航栏
2. 分别为主题、导航栏、四个界面创建6个xml布局文件
3. 用一个额外的xml布局文件将所有布局串联起来

---

实现流程

1. 资源文件导入

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

2. 布局文件编写

目录结构

top.xml

采用水平布局，添加TextView控件显示标题，添加ImageView控件显示更多图标

预览

buttom.xml

采用水平布局，在水平布局上再添加4个垂直布局，然后再每个垂直布局上键入ImageView和TextView，用于显示图标和导航信息

预览

fragment1.xml

创建4个fragment.xml，采用fragment布局，再其中加入TextView控件显示不同的文字用于区别

预览

mainlayout.xml

采用ConstraintLayout布局，将顶部底部关联起来，中间用于显示主体

预览

3. Java文件编写

目录结构

创建4个Fragment类

MainActivity类

绑定主体页面

setContentView(R.layout.mainlayout);

通过new获取到4个Fragment对象

fragment1=new Fragment1();
        fragment2=new Fragment2();
        fragment3=new Fragment3();
        fragment4=new Fragment4();

再创建一个FragmentManager用于管理Fragment，将事务结果用transaction保存

private int transaction;
    private FragmentManager manager;

通过initall函数初始化主体区域

private void inital() {
        transaction = manager.beginTransaction()
                .add(R.id.content,fragment1)
                .add(R.id.content,fragment2)
                .add(R.id.content,fragment3)
                .add(R.id.content,fragment4)
                .commit();
        fragmentHide();//隐藏所有fragment
        showFragment(fragment1);//显示fragment1
        imageView1.setImageResource(R.drawable.weixin_pressed);//更改当前选中的图标
    }

创建LinearLayout类对象linearLayout1,linearLayout2,linearLayout3,linearLayout4

使用findViewById函数绑定buttom.xml中的四个LinearLayout控件,用于监听点击

创建ImageView类对象imageView1,imageView2,imageView3,imageView4

使用findViewById函数绑定buttom.xml中的四个ImageView控件，用于根据选择状态更改图标

创建创建ImageView类对象textView

使用findViewById函数绑定top.xml中的ImageView控件，用于根据选择状态更改标题

设置监听

public class MainActivity extends AppCompatActivity implements View.OnClickListener

重写方法

@Override
    public void onClick(View v) {
        fragmentHide();
        imageView1.setImageResource(R.drawable.weixin_normal);
        imageView2.setImageResource(R.drawable.contact_list_normal);
        imageView3.setImageResource(R.drawable.find_normal);
        imageView4.setImageResource(R.drawable.profile_normal);
        switch (v.getId()){
            case R.id.LinearLayout1:showFragment(fragment1);
                 imageView1.setImageResource(R.drawable.weixin_pressed);//更改图标
                 textView.setText("微信");//更改标题
                break;
            case R.id.LinearLayout2:showFragment(fragment2);
                imageView2.setImageResource(R.drawable.contact_list_pressed);//更改图标
                textView.setText("通讯录");//更改标题
                break;
            case R.id.LinearLayout3:showFragment(fragment3);
                imageView3.setImageResource(R.drawable.find_pressed);//更改图标
                textView.setText("发现");//更改标题
                break;
            case R.id.LinearLayout4:showFragment(fragment4);
                imageView4.setImageResource(R.drawable.profile_pressed);//更改图标
                textView.setText("我的");//更改标题
                break;
        }
    }

---

运行结果