Android studio：类微信App门户页面设计与开发

MX_wyx

已于 2023-10-24 08:26:23 修改

阅读量189

点赞数

文章标签： android studio 微信 android 1024程序员节

于 2023-10-16 12:09:10 首次发布

本文链接：https://blog.csdn.net/MX_wyx/article/details/133850570

版权

一、实验目标

1、设计一个app的门户框架，需要实现四个tab的切换效果；本功能要求需要的技术为：activity、xml、fragment

2、在任一tab页中实现列表效果；本功能要求需要的技术为：recycleview

二、App效果展示

三、实验过程

1、用户框架

大致分为三部分，顶部标题，中部tab切换后效果页面，底部四个点击切换选项

（1）顶部，top.xml

a.思路

顶部只需要一个标题即可，所以使用一个TextView，在Design中将Palette处的TextView拖拽至Component Tree处即可自动生成大致代码

b.基础

TextView：文本框

android:layout_width：设置TextView控件的宽度

android:layout_height：设置TextView控件的高度

android:background：设置背景颜色

android:id：设置唯一ID

android:layout_weight：按比例分配（例，a,b的android:layout_weight均=1，则a,b均分（1:1））

android:text：设置文本内容

android:textSize：设置文字大小

android:textColor：设置文字颜色

android:gravity：设置文字位置（例，center为居中显示）

c.源码

<?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="wrap_content"
    android:background="@color/black">

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:layout_weight="1"
        android:text="微信"
        android:textSize="40dp"
        android:textColor="@color/white"
        android:gravity="center"/>
</LinearLayout>

（2）底部，bottom.xml

a.思路

底部四个点击切换选项，均由文字与对应图片组成，故每个选项均由一个ImageView和一个TextView组成，两个控件需在同一个LinearLayout中，可以竖向排列在同一个直线中；同时四个LinearLayout再包含在同一个水平的LinearLayout中，使得四个选项在同一横线上。（四个选项只需修改文字与图片即可，其他设置均相同）

默认生成的为tools:srcCompat="@android:drawable/×××"，此时运行程序后图标不显示。改为android:src="@android:drawable/×××"后可正常显示

b.基础

android:orientation："horizontal" 指定布局内控件排列方式为水平排列

"vertical" 指定布局内控件排列方式为垂直排列

c.源码

<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
    android:background="@color/black"
    android:textColor="@color/white">

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

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"

            android:src="@android:drawable/sym_action_chat" />

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

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

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"

            android:src="@android:drawable/ic_menu_my_calendar" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="通讯录"
            android:textColor="@color/white"
            android:textSize="25sp" />
    </LinearLayout>

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

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"

            android:src="@android:drawable/ic_menu_search" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="发现"
            android:textColor="@color/white"
            android:textSize="25sp" />
    </LinearLayout>

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

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"

            android:src="@android:drawable/ic_menu_compass" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="我"
            android:textColor="@color/white"
            android:textSize="25sp" />
    </LinearLayout>
</LinearLayout>

（3）总框架，layout1.xml

a.思路

LinearLayout垂直布局将三个部分组合起来

b.基础

include引入top和bottom的布局

注意此时FrameLayout设置的id

c.源码

<?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="match_parent"
    android:orientation="vertical">

    <include layout="@layout/top" />

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

    <include layout="@layout/bottom" />

</LinearLayout>

2、点击切换动作

设置四个FragmentManager分别管控四个不同的tab，根据不同的点击动作显示对应所需tab并隐藏另外三个tab

（1）FragmentManager

a.思路

定义一个Fragment类，另外三个同理（可以copy然后黏贴，只需更改名称，更加快捷）

b.基础

（自动生成，记得改对应的名称）

c.源码

package edu.hubu;

import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Fragment1 extends Fragment {

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

（2）fragment_1.xml

a.思路

定义Fragment时自动生成，目前暂时均只需添加一个TextView表示当前tab分别对应什么即可

b.基础

tools:context：可参考https://blog.csdn.net/xiabing082/article/details/50563559

c.源码

<?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="match_parent"
    tools:context=".MainActivity2"
    xmlns:tools="http://schemas.android.com/tools">

    <TextView
        android:id="@+id/textView6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:gravity="center"
        android:text="聊天界面"
        android:textSize="25sp" />

</LinearLayout>

（3）MainActivity.java（tab的点击显示/隐藏）

a.思路

创建函数fragmentHide隐藏所有，fragmentshow显示其中被点击的，onClick实时监听，并将被点击的参数通过if,else if判断选择开启。（switch-else会报错，也可以用但更加复杂）

b.基础

if-else：判断

R.id.：与自己设定的对应ID对应

c.源码

public class MainActivity2 extends AppCompatActivity implements View.OnClickListener {

    Fragment fragment1,fragment2,fragment3,fragment4;
    LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;
    static final int l1=R.id.LinearLayout_wechat1;
    static final int l2=R.id.LinearLayout_wechat2;
    static final int l3=R.id.LinearLayout_wechat3;
    static final int l4=R.id.LinearLayout_wechat4;
    //Fragment fragment;
    FragmentManager fm;
    FragmentTransaction fragmentTransaction;

    private FragmentManager fragmentManager;

    RecyclerView recyclerView;
    Myadapter myadapter;

    @SuppressLint("MissingInflatedId")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);

        linearLayout1 = findViewById(l1);
        linearLayout2 = findViewById(l2);
        linearLayout3 = findViewById(l3);
        linearLayout4 = findViewById(l4);

        fm = getSupportFragmentManager();
        fragment1 = new Fragment1();
        fragment2 = new Fragment2();
        fragment3 = new Fragment3();
        fragment4 = new Fragment4();

        innitial();
        fragmentshow(fragment1);

        linearLayout1.setOnClickListener(this);
        linearLayout2.setOnClickListener(this);
        linearLayout3.setOnClickListener(this);
        linearLayout4.setOnClickListener(this);
    }

    private void fragmentHide() {
        FragmentTransaction ft=fm.beginTransaction()
                .hide(fragment1)
                .hide(fragment2)
                .hide(fragment3)
                .hide(fragment4);

        ft.commit();
    }

    private void fragmentshow(Fragment fragment) {
        fragmentHide();
        FragmentTransaction ft=fm.beginTransaction()
                .show(fragment);
        ft.commit();
    }

    private void innitial() {
        FragmentTransaction ft=fm.beginTransaction()
                .add(R.id.content,fragment1)
                .add(R.id.content,fragment2)
                .add(R.id.content,fragment3)
                .add(R.id.content,fragment4);
        ft.commit();
    }

    @Override
    public void onClick(View view) {
        if (view.getId()==R.id.LinearLayout_wechat1) fragmentshow(fragment1);
        else if (view.getId()==R.id.LinearLayout_wechat2) fragmentshow(fragment2);
        else if (view.getId()==R.id.LinearLayout_wechat3) fragmentshow(fragment3);
        else if (view.getId()==R.id.LinearLayout_wechat4) fragmentshow(fragment4);
    }
}

3、实现列表效果

（1）fragment2.xml（想要获取列表效果的tab）

a.思路

插入一个可滚动列表RecyclerView

b.基础

RecyclerView：可参考Android 控件 RecyclerView - 简书

c.源码

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

    android:orientation="vertical"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity2">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:textSize="25sp" />

</LinearLayout>

（2）item.xml（列表的细分）

a.思路

两个TextView文字框，也可以设计成为别的，例如一图一文本等，外面需由LinearLayout括起

b.源码

<?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="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView21"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="微信昵称"
        android:textColor="@color/material_dynamic_primary70"
        android:textSize="30sp" />

    <TextView
        android:id="@+id/textView22"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="微信号"
        android:textColor="@color/material_dynamic_primary0"
        android:textSize="20sp" />
</LinearLayout>

（3）MainActivity.java（应用进去）

a.思路

因为我想应用到联系人界面，所以前面更改的也是fragment_2，此处加至fragment2的显示即可

b.源码

else if (view.getId()==R.id.LinearLayout_wechat2) {
            fragmentshow(fragment2);
            recyclerView=findViewById(R.id.recyclerView);
            List<String> list=new ArrayList();

            for (int i=0;i<9;i++){
                list.add("这是好友："+i);
            }
            myadapter=new Myadapter(list,this);
            recyclerView.setAdapter(myadapter);
            LinearLayoutManager manager=new LinearLayoutManager(this);
            manager.setOrientation(RecyclerView.VERTICAL);
            recyclerView.setLayoutManager(manager);
        }