类微信的门户页面框架设计

这本次实验中,需要我们控制的只是我们在底部点击后,中间的fragment能够相应的进行轮转即可
而为了控制这样一个事件,我们需要做两件事:

1.监听我们对底部控件的点击
2.将监听到的底部点击事件,传递给fragment的事件控制

top层
top层是微信界面最上方的内容
top层xml代码如下

// A code block
var foo = 'bar';
// An highlighted block
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="#4CAF50">

    <TextView
        android:id="@+id/微信"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:text="@string/微信"
        android:textSize="30sp" />
</LinearLayout>

bottom层
在一级linearlayout下再放置4个linearlayout,每个二级linearlayout下分别再放置一个imageview和一个textview用于展示所要点击的图标与文字描述
bottom层是微信界面下方的四个按钮
bottom层xml代码如下

下面展示一些 内联代码片

// A code block
var foo = 'bar';
// An highlighted block
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:orientation="horizontal">

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="105dp"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@android:drawable/sym_action_chat" />

        <TextView
            android:id="@+id/message"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="微信"
            android:textSize="25sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="101dp"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@android:drawable/ic_menu_my_calendar" />

        <TextView
            android:id="@+id/contact"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="联系人"
            android:textSize="25sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout3"
        android:layout_width="105dp"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@android:drawable/btn_star" />

        <TextView
            android:id="@+id/find"
            android:layout_width="105dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="发现"
            android:textSize="25sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout4"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@android:drawable/ic_menu_myplaces" />

        <TextView
            android:id="@+id/config"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="我的"
            android:textSize="25sp" />
    </LinearLayout>
</LinearLayout>

在mainactivity.xml中将botton.xml和top.xml包含进去,并在中间加入一个framelayout用于展示页面信息
在这里插入图片描述
下面展示一些 内联代码片

// A code block
var foo = 'bar';
// An highlighted block
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#4CAF50"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/微信"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="@string/微信"
            android:textSize="30sp" />
    </LinearLayout>

    <FrameLayout
        android:id="@+id/id_content"
        android:layout_width="409dp"
        android:layout_height="614dp"
        android:layout_marginTop="2dp"
        android:layout_marginEnd="2dp"
        android:layout_weight="1"
        app:layout_constraintBottom_toTopOf="@+id/linearLayout5"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/linearLayout">

    </FrameLayout>

    <LinearLayout
        android:id="@+id/linearLayout5"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="#00FFFFFF"
        android:orientation="horizontal"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">

        <LinearLayout
            android:id="@+id/linearLayout1"
            android:layout_width="105dp"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:contentDescription="@string/todo"
                app:srcCompat="@android:drawable/sym_action_chat"
                tools:ignore="ImageContrastCheck" />

            <TextView
                android:id="@+id/message"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="@string/weixin"
                android:textSize="25sp" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/linearLayout2"
            android:layout_width="101dp"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:contentDescription="TODO"
                app:srcCompat="@android:drawable/ic_menu_my_calendar"
                tools:ignore="ImageContrastCheck" />

            <TextView
                android:id="@+id/contact"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="@string/lianxiren"
                android:textSize="25sp" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/linearLayout3"
            android:layout_width="105dp"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/imageView3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:contentDescription="@string/todo2"
                app:srcCompat="@android:drawable/btn_star"
                tools:ignore="ImageContrastCheck" />

            <TextView
                android:id="@+id/find"
                android:layout_width="105dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="@string/faxian"
                android:textSize="25sp" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/linearLayout4"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/imageView4"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:contentDescription="@string/todo1"
                app:srcCompat="@android:drawable/ic_menu_myplaces"
                tools:ignore="ImageContrastCheck" />

            <TextView
                android:id="@+id/config"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="@string/wode"
                android:textSize="25sp" />
        </LinearLayout>
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

添加fragement文件并设计相应的xml布局文件
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
下面展示一些 内联代码片

// A code block
var foo = 'bar';
// An highlighted block
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".configFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/自己的资料"
        android:gravity="center"
        android:textSize="30sp"/>

</FrameLayout>

只是其中一个fragment的代码,其余三个是一样的,将android:text改一下即可。

mainactivity.java代码
下面展示一些 内联代码片

// A code block
var foo = 'bar';
// An highlighted block
package com.example.wechat;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;

import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    private LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;

    private FragmentManager fragmentManager;
    private FragmentTransaction fragmentTransaction;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initEvent();
        linearLayout1.setBackgroundColor(Color.rgb(155,155,155));
        fragmentManager = getSupportFragmentManager();
        fragmentTransaction = fragmentManager.beginTransaction();
        fragmentTransaction.replace(R.id.id_content,new MessageFragment());
        fragmentTransaction.commit();
    }
    private void initEvent()
    {
        linearLayout1.setOnClickListener(this);
        linearLayout2.setOnClickListener(this);
        linearLayout3.setOnClickListener(this);
        linearLayout4.setOnClickListener(this);
    }
    private void initView()
    {
        linearLayout1 = findViewById(R.id.linearLayout1);
        linearLayout2 = findViewById(R.id.linearLayout2);
        linearLayout3 = findViewById(R.id.linearLayout3);
        linearLayout4 = findViewById(R.id.linearLayout4);
    }

    @Override
    public void onClick(View view)
    {
        setAllColor();
        fragmentManager = getSupportFragmentManager();
        fragmentTransaction = fragmentManager.beginTransaction();
        switch (view.getId())
        {
            case R.id.linearLayout1:
                fragmentTransaction.replace(R.id.id_content,new MessageFragment());
                linearLayout1.setBackgroundColor(Color.rgb(155,155,155));
                break;

            case R.id.linearLayout2:
                fragmentTransaction.replace(R.id.id_content,new contactFragment());
                linearLayout2.setBackgroundColor(Color.rgb(155,155,155));
                break;

            case R.id.linearLayout3:
                fragmentTransaction.replace(R.id.id_content,new findFragment());
                linearLayout3.setBackgroundColor(Color.rgb(155,155,155));
                break;

            case R.id.linearLayout4:
                fragmentTransaction.replace(R.id.id_content,new configFragment());
                linearLayout4.setBackgroundColor(Color.rgb(155,155,155));
                break;
        }
        fragmentTransaction.commit();
    }
    private void setAllColor()
    {
        linearLayout1.setBackgroundColor(Color.WHITE);
        linearLayout2.setBackgroundColor(Color.WHITE);
        linearLayout3.setBackgroundColor(Color.WHITE);
        linearLayout4.setBackgroundColor(Color.WHITE);
    }
}

其中switch片段是点击bottom中的四个按键展现出的四个fragment中的text
效果如下
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
git仓库地址:https://gitee.com/chenrrr/wechat.git

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 微信小程序是一种基于微信的应用开发平台,可以让开发者在微信中快速开发、部署和分发小程序。小程序框架是一种轻量级的开发框架,提供了一系列的基础组件和API,使得开发者可以快速构建高性能的小程序。微信小程序的开发语言是基于 JavaScript 和 WXML/WXSS,支持使用 IDE 和代码检查工具来开发和调试。 ### 回答2: 微信小程序框架是一种用于开发微信小程序的工具,它提供了一系列的开发规范、API接口以及组件库,帮助开发者快速搭建和开发小程序。微信小程序框架基于Vue.js和React.js实现,通过提供似于Web开发的组件化开发方式,使得开发小程序更加简单和高效。 微信小程序框架的特点如下: 1. 组件化开发:微信小程序框架采用组件化的开发方式,将界面拆分为各个独立的组件,开发者可以通过组件的组合和复用实现快速开发。 2. 轻量化:微信小程序框架采用轻量级的设计页面渲染速度快,性能稳定,并且具备良好的用户体验。 3. 开发门槛低:开发者可以使用HTML、CSS和JavaScript进行开发,并且可以快速上手,有助于降低学习成本。 4. 全面的API支持:微信小程序框架提供了丰富的API接口,包括常用的网络请求、数据存储、设备信息、地理位置等功能,方便开发者快速实现各种业务需求。 5. 实时预览:微信小程序框架提供实时预览功能,开发者可以在开发工具中实时查看小程序的效果,加快开发调试的速度。 6. 跨平台支持:微信小程序框架支持在微信客户端以及其他平台上运行,具有较好的跨平台兼容性。 综上所述,微信小程序框架是一个高效、灵活且易于上手的工具,为开发者提供了丰富的功能和良好的开发体验,同时也为用户提供了更多丰富多样的小程序应用。 ### 回答3: 微信小程序框架是一种用于开发微信小程序的软件开发框架。它提供了一套完整的开发工具和组件库,使开发者可以使用 HTML、CSS 和 JavaScript 来构建小程序。 首先,微信小程序框架具有跨平台的特点。开发者只需要通过微信开发者工具即可编写小程序代码,而不需要针对不同的操作系统进行开发。这大大简化了开发流程和成本,并提高了开发效率。 其次,小程序框架具有丰富的组件库。开发者可以通过简单的代码调用各种组件,如按钮、列表、输入框等,来快速构建小程序界面。这些组件经过优化,能够在微信客户端中实现良好的用户体验。 再次,小程序框架提供了强大的接口能力。开发者可以使用框架提供的接口,访问微信提供的各种功能和服务,如获取用户信息、定位、支付等。这样,开发者可以充分发挥自己的创意和想象力,将丰富的功能集成到小程序中。 此外,微信小程序框架还提供了丰富的开发文档和示例,方便开发者学习和参考。开发者可以根据自己的需求,灵活运用框架提供的功能和工具,进行个性化的开发。 综上所述,微信小程序框架是一种高效、便捷、灵活的开发工具,为开发者提供了一种快速开发小程序的方式,并且能够实现丰富的功能和良好的用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值