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

qq_51952365

已于 2022-09-29 18:52:12 修改

阅读量480

点赞数 1

文章标签：微信 javascript android

于 2022-09-29 18:48:49 首次发布

本文链接：https://blog.csdn.net/qq_51952365/article/details/127098776

版权

这本次实验中，需要我们控制的只是我们在底部点击后，中间的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);
    }
}