微信门户界面设计

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

• 一、设计内容
• 二、完成步骤
• • 1.微信的界面设计
  • • top设计
    • bottom设计
    • 主页面设计
  • 2.页面切换的实现
  • 运行展示
• 总结

设计实现类似微信界面的框架设计，包括4个tab界面且tab页面之间可以点击切换。

在布局文件中还需要新建两个布局文件分别用于控制top和bottom的布局。

top.layout只是一个标题，代码如下：

控件的具体代码如下：

在布局文件中还需要新建两个布局文件分别用于控制top和bottom的布局。

相较top,botom的设计较为复杂，它需要用到1个列排列和4个行排列。另外，我们还需要在点击是有一个颜色的变化。首先在drawable文件夹下创建一个colorchange文件来控制控件颜色的变化。

这样就只需要把linerlayout的相应属性修改如下即可：

android:background="@drawable/colorchange">

它的代码设计如下：

这里展示是其中一组控件的详细设计。

在布局文件中还需要新建两个布局文件分别用于控制top和bottom的布局。

完成了以上两个界面的设计，至于要把这两个文件引入既可以了。代码如下：

效果图如图：

为四个界面分别创建java和xml文件。简单的为它们添加一些文字用于区分。在MainActivity文件中的代码具体如下：

public class MainActivity extends AppCompatActivity  implements View.OnClickListener{

    private  Fragment friendFragment = new friendFragment();
    private  Fragment findFragment = new findFragment();
    private  Fragment settingFragment = new settingFragment();
    private  Fragment weixinFragment = new weixinFragment();
    private FragmentManager fragmentManager;
    private LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;

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


        linearLayout1 = findViewById(R.id.Linearlayout_weixin);
        linearLayout2 = findViewById(R.id.Linearlayout_friend);
        linearLayout3 = findViewById(R.id.Linearlayout_find);
        linearLayout4 = findViewById(R.id.Linearlayout_setting);

        linearLayout1.setOnClickListener(this);
        linearLayout2.setOnClickListener(this);
        linearLayout3.setOnClickListener(this);
        linearLayout4.setOnClickListener(this);
        initFragment();
        ShowFragment(0);

    }
    private void initFragment(){
        fragmentManager = getFragmentManager();
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        transaction.add(R.id.id_content,weixinFragment);
        transaction.add(R.id.id_content,findFragment);
        transaction.add(R.id.id_content,friendFragment);
        transaction.add(R.id.id_content,settingFragment);
        transaction.commit();
    }
    private void hideFragment(FragmentTransaction transaction){
        transaction.hide(weixinFragment);
        transaction.hide(findFragment);
        transaction.hide(friendFragment);
        transaction.hide(settingFragment);
    }

    @Override
    public void onClick(View v){
        switch(v.getId()){
            case R.id.Linearlayout_weixin:
                ShowFragment(0);
                break;
            case R.id.Linearlayout_friend:
                ShowFragment(1);
                break;
            case R.id.Linearlayout_find:
                ShowFragment(2);
                break;
            case R.id.Linearlayout_setting:
                ShowFragment(3);
                break;
            default:
                break;
        }

    }

    private void ShowFragment(int i) {
        FragmentTransaction transaction=fragmentManager.beginTransaction();
        hideFragment(transaction);
        switch (i){
            case 0:
                transaction.show(weixinFragment);
                break;
            case 1:
                transaction.show(friendFragment);
                break;
            case 2:
                transaction.show(findFragment);
                break;
            case 3:
                transaction.show(settingFragment);
                break;
            default:
                break;
        }
        transaction.commit();
    }

完成这一次的设计其中也有不少隐藏的问题。例如程序运行时的标题框如何去掉，bottom中的图片在运行是不展示等等。总的来说，对于控件的设计，fragment如何对控件进行监听都有了一个清晰的认识。

附代码仓库如下：https://gitee.com/zhuizhuihome/as-programming/tree/master