微信门户界面设计

最新推荐文章于 2023-10-16 09:30:37 发布

追_追_

最新推荐文章于 2023-10-16 09:30:37 发布

阅读量350

点赞数

文章标签：微信 android 小程序

本文链接：https://blog.csdn.net/kjkjdnf/article/details/120665961

版权

该博客详细介绍了如何设计并实现类似微信的应用界面，包括顶部标题、底部导航栏的布局，以及页面间的切换功能。通过XML布局文件创建顶部和底部的界面，使用Fragment进行页面管理，并通过点击事件实现不同页面的显示。博客还讨论了在实际开发中遇到的一些问题，如标题栏的去除和图片显示等，并提供了完整的代码示例。

摘要由CSDN通过智能技术生成

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

一、设计内容

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

二、完成步骤

1.微信的界面设计

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

top设计

top.layout只是一个标题，代码如下：
在这里插入图片描述
控件的具体代码如下：

<TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="我的微信"
        android:textColor="@android:color/background_light"
        android:gravity="center"
        android:textSize="36sp" />

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

bottom设计

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

<?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/clr_normal" android:state_pressed="false"/>
        <item android:drawable="@drawable/clr_pressed" android:state_pressed="true"/>
    </selector>

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

android:background="@drawable/colorchange">

它的代码设计如下：
在这里插入图片描述
这里展示是其中一组控件的详细设计。

 <LinearLayout
        android:id="@+id/Linearlayout_weixin"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:clickable="true"
        android:orientation="vertical"
        android:background="@drawable/colorchange">

        <ImageView
            android:id="@+id/imageView5"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:clickable="false"
            android:contentDescription="@string/app_name"
            app:srcCompat="@android:drawable/presence_audio_online" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:gravity="center"
            android:text="消息"
            android:textColor="@android:color/background_light"
            android:textSize="20sp" />

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

主页面设计

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

 <include
        layout="@layout/top"
        android:layout_width="match_parent"
        android:layout_height="80sp" />

    <FrameLayout
        android:id="@+id/id_content"
        android:layout_width="match_parent"
        android:layout_height="0sp"
        android:layout_weight="1">

    </FrameLayout>

    <include
        layout="@layout/bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

效果图如图：
在这里插入图片描述

2.页面切换的实现

为四个界面分别创建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