移动开发技术作业1-类微信界面

yiEL

已于 2022-09-29 20:15:47 修改

阅读量1.3k

点赞数 2

文章标签： java android-studio

于 2022-09-29 20:06:49 首次发布

本文链接：https://blog.csdn.net/weixin_50425831/article/details/127109279

版权

2.底部控件 button_layout.xml

3.顶部控件 titlebar.xml

4.四个页面 weixin.xml、tongxunlu.xml、faxian.xml、wo.xml

5.核心功能实现 Manactivity.java、Fragemnt_weixin.java等

四、运行展示截图

五、源码仓库地址

一、设计目标

完成类微信门户页面框架设计，APP最少包含4个Tab页面(微信、通讯录、发现、我)。框架设计需要使用fragment、activity。

二、功能说明

共四个页面，可通过点击界面底部对应控件进行切换，当前所处页面对应图案会处于点亮状态，其余页面对应图案为灰色。

三、代码解析

1.项目整体结构

2.底部控件 button_layout.xml

底部控件最外层为一个horizontal的LinearLayout控件，其内包含四个vertical的LinearLayout控件，内层的LinearLayout分别包含一个ImageView控件和一个TextView控件，分别用于存储每个页面对应的图案和文字。

<?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">

    <LinearLayout
        android:id="@+id/LinearLayout1"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/img_weixin"
            android:layout_width="match_parent"
            android:layout_height="64dp"
            android:contentDescription="@string/app_name"
            android:scaleType="centerInside"
            app:srcCompat="@drawable/weixin" />

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

    <LinearLayout
        android:id="@+id/LinearLayout2"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/img_tongxunlu"
            android:layout_width="match_parent"
            android:layout_height="65dp"
            android:contentDescription="@string/app_name"
            android:scaleType="centerInside"
            app:srcCompat="@drawable/tongxunlu" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="通讯录"
            android:textSize="20dp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/LinearLayout3"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/img_faxian"
            android:layout_width="match_parent"
            android:layout_height="64dp"
            android:contentDescription="@string/app_name"
            android:scaleType="centerInside"
            app:srcCompat="@drawable/faxian" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="发现"
            android:textSize="20dp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/LinearLayout4"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/img_wo"
            android:layout_width="match_parent"
            android:layout_height="64dp"
            android:contentDescription="@string/app_name"
            android:scaleType="centerInside"
            app:srcCompat="@drawable/wo" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="我"
            android:textSize="20dp" />
    </LinearLayout>
</LinearLayout>

3.顶部控件 titlebar.xml

此部分仅用于展示界面顶部微信二字。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="#e5e5e5"
    android:gravity="top">


    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_weight="1"
        android:text="微信"
        android:textSize="30dp" />

</LinearLayout>

4.四个页面 weixin.xml、tongxunlu.xml、faxian.xml、wo.xml

此部分代码高度重合，此处只展示weixin.xml。此次作业未设计页面具体内容，只包含一个TextView控件。

<?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">


    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="微信界面"
        android:textSize="30dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

5.核心功能实现Manactivity.java、Fragemnt_weixin.java等

Manactivity.java

核心函数: Frags_init、Frags_hide、Frags_show、reFresh、onClick

Frags_init:创建一个transaction并向Activity state中添加四个Fragment，并与最外层容器Frame_all绑定。

Frags_hide:通过传递进来的参数，对指定Fragment进行隐藏

Frags_show:通过findViewById返回对应的View,并进行强制类型转换，先隐藏所有Fragment，通过传入参数决定对对应页面进行Frags_show，将ImageButton中的图片替换成亮色。

reFresh:将所有亮色图片替换回灰色

onClick:对四个LinearLayout进行点击监听，通过getid()所点击LinearLayout的id，并将其对应的页面show()

public class MainActivity extends AppCompatActivity {

    private Fragment weixinFragment=new Fragment_weixin();
    private Fragment tongxunluFragment=new Fragment_tongxunlu();
    private Fragment faxianFragment=new Fragment_faxian();
    private Fragment woFragment=new Fragment_wo();
    private FragmentManager manager;

    private ImageButton weixinbutton;
    private ImageButton tongxunlubutton;
    private ImageButton faxianbutton;
    private ImageButton wobutton;

    private LinearLayout Linearlayout1,Linearlayout2,Linearlayout3,Linearlayout4;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Linearlayout1=findViewById(R.id.LinearLayout1);
        Linearlayout2=findViewById(R.id.LinearLayout2);
        Linearlayout3=findViewById(R.id.LinearLayout3);
        Linearlayout4=findViewById(R.id.LinearLayout4);
        Linearlayout1.setOnClickListener(this::onClick);
        Linearlayout2.setOnClickListener(this::onClick);
        Linearlayout3.setOnClickListener(this::onClick);
        Linearlayout4.setOnClickListener(this::onClick);
        weixinbutton= (ImageButton) findViewById(R.id.img_weixin);
        tongxunlubutton= (ImageButton) findViewById(R.id.img_tongxunlu);
        faxianbutton= (ImageButton) findViewById(R.id.img_faxian);
        wobutton= (ImageButton) findViewById(R.id.img_wo);


        Frags_init();
        Frags_show(0);
    }
    private void Frags_init()
    {
        manager=getSupportFragmentManager();
        FragmentTransaction transaction= manager.beginTransaction();
        transaction.add(R.id.id_content,weixinFragment);
        transaction.add(R.id.id_content,tongxunluFragment);
        transaction.add(R.id.id_content,faxianFragment);
        transaction.add(R.id.id_content,woFragment);
        transaction.commit();
    }

    private void Frags_hide(FragmentTransaction transaction)
    {
        transaction.hide(weixinFragment);
        transaction.hide(tongxunluFragment);
        transaction.hide(faxianFragment);
        transaction.hide(woFragment);
    }

    private void Frags_show(int i)
    {
        FragmentTransaction transaction=manager.beginTransaction();
        Frags_hide(transaction);
        switch(i){
            case 0:
                Log.d("Show Fragment","1");
                transaction.show(weixinFragment);
                weixinbutton.setImageResource(R.drawable.weixin_b);
                break;
            case 1:
                transaction.show(tongxunluFragment);
                tongxunlubutton.setImageResource(R.drawable.tongxunlu_b);
                break;
            case 2:
                transaction.show(faxianFragment);
                faxianbutton.setImageResource(R.drawable.faxian_b);
                break;
            case 3:
                transaction.show(woFragment);
                wobutton.setImageResource(R.drawable.wo_b);
                break;
            default:
                break;
        }
        transaction.commit();
    }


    public void onClick(View v){
        Log.d("onClick","1");
        reFresh();
        switch(v.getId()){
            case R.id.LinearLayout1:
                Frags_show(0);
                break;
            case R.id.LinearLayout2:
                Frags_show(1);
                break;
            case R.id.LinearLayout3:
                Frags_show(2);
                break;
            case R.id.LinearLayout4:
                Frags_show(3);
                break;
            default:
                break;
        }
    }

    public void reFresh(){
        weixinbutton.setImageResource(R.drawable.weixin);
        tongxunlubutton.setImageResource(R.drawable.tongxunlu);
        faxianbutton.setImageResource(R.drawable.faxian);
        wobutton.setImageResource(R.drawable.wo);

    }
}

Fragemnt_weixin.java（剩余三个界面类似）

在为当前Fragment创建视图时调用onCreateBiew,其中参数包含了布局文件（weixin.xml）,和当前Fragment所在的容器。

package com.example.homework;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.fragment.app.Fragment;

public class Fragment_weixin extends Fragment{
    public Fragment_weixin() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.weixin, container, false);
    }
}