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

原创

张浪

发布于 2022-09-30 19:17:55

5320

发布于 2022-09-30 19:17:55

文章被收录于专栏：张浪浪的作业

功能要求

1.页面具有标题

2.具有四个页面，页面具有底部选择框，同时具有选择事件，当点击选择事件的时候进行页面切换

3.页面内容不超出边界且清晰

思路分析

该微信界面由三部分组成

页面顶部标题栏（top.xml）
中间内容页面
底部导航栏（bottom.xml）

所以我们需要编写上述几个xml布局页面，分别分析每部分的布局内容及要求：顶部标题栏：此栏需有app的标题，标题大小颜色自定义且居中显示，背景色自选中间内容页面：由于本app是仿微信界面，所以设置了四个页面，分别显示不同的内容底部导航栏：四个图标，单击可以切换中间内容页面，故该布局文件中包含四个ImageButton，界面切换部分需要用Fragment实现

设计思路

编写bottom.xml实现底部四个按钮，下面只展示其中一个控件的实现，剩下三个类似。

<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:orientation="horizontal">

    <LinearLayout
        android:id="@+id/tab01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical">

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

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

顶部布局实现

编写top.xml，实现顶部控件。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/black"
    >

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="My WeChat"
        android:textColor="@color/white"
        android:textSize="30sp" />
</LinearLayout>

四个分段代码代码

编写包括weixinFragment在内的四个分段的代码，其中一个如下

package com.example.myapplication;

import android.os.Bundle;

import androidx.fragment.app.Fragment;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * A simple {@link Fragment} subclass.
 * Use the {@link weixinFragment#newInstance} factory method to
 * create an instance of this fragment.
 */
public class weixinFragment extends Fragment {

    // TODO: Rename parameter arguments, choose names that match
    // the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
    private static final String ARG_PARAM1 = "param1";
    private static final String ARG_PARAM2 = "param2";

    // TODO: Rename and change types of parameters
    private String mParam1;
    private String mParam2;

    public weixinFragment() {
        // Required empty public constructor
    }

    /**
     * Use this factory method to create a new instance of
     * this fragment using the provided parameters.
     *
     * @param param1 Parameter 1.
     * @param param2 Parameter 2.
     * @return A new instance of fragment weixinFragment.
     */
    // TODO: Rename and change types and number of parameters
    public static weixinFragment newInstance(String param1, String param2) {
        weixinFragment fragment = new weixinFragment();
        Bundle args = new Bundle();
        args.putString(ARG_PARAM1, param1);
        args.putString(ARG_PARAM2, param2);
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            mParam1 = getArguments().getString(ARG_PARAM1);
            mParam2 = getArguments().getString(ARG_PARAM2);
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_weixin, container, false);
    }
}

四个分段页面布局代码

其中fragment_wechat.xml如下：

<LinearLayout 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"
    android:orientation="horizontal"
    tools:context=".weixinFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="50sp"
        android:gravity="center"
        android:text="这是微信界面" />

</LinearLayout>

分段初始化Oncreate()实现

包括对ImageButton、LinearLayout、Fragment的初始化

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    private Fragment weixinFragment = new weixinFragment();
    private Fragment friendFragment = new friendFragment();
    private Fragment contactFragment = new contactFragment();
    private Fragment settingFragment = new settingFragment();

    private FragmentManager fm;

    private LinearLayout tab01,tab02,tab03,tab04;
    private ImageView tab01_img;
    private ImageView tab02_img;
    private ImageView tab03_img;
    private ImageView tab04_img;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        weixinFragment = new weixinFragment();
        friendFragment = new friendFragment();
        contactFragment = new contactFragment();
        settingFragment = new settingFragment();

        tab01 = findViewById(R.id.tab01);
        tab02 = findViewById(R.id.tab02);
        tab03 = findViewById(R.id.tab03);
        tab04 = findViewById(R.id.tab04);

        fm = getSupportFragmentManager();

        initialfragment();
        tab01_img = findViewById(R.id.tab01_img);
        tab02_img = findViewById(R.id.tab02_img);
        tab03_img = findViewById(R.id.tab03_img);
        tab04_img = findViewById(R.id.tab04_img);
        tab01.setOnClickListener(this);
        tab02.setOnClickListener(this);
        tab03.setOnClickListener(this);
        tab04.setOnClickListener(this);
    }

页面切换实现

实现页面切换首先要实现对底部四个按钮的监听，当监听到点击时，进行切换页面。利用OnClickListener()实现监听，利用重写OnClick()实现点击时的操作，编写show()函数实现四个页面中的切换。

MainActivity.java中的关键代码：

private void show(int i) {
    FragmentTransaction transaction = fm.beginTransaction();
    Hide(transaction);
    switch (i){
        case 1:transaction.show(weixinFragment);break;
        case 2:transaction.show(friendFragment);break;
        case 3:transaction.show(contactFragment);break;
        case 4:transaction.show(settingFragment);break;
        default:break;
    }
    transaction.commit();
}