as作业1

原创已于 2022-09-30 15:02:29 修改 · 529 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#android

于 2022-09-30 14:55:24 首次发布

本文详细介绍了如何使用Fragment和Activity设计一个类似微信的Android应用门户页面。页面包含顶部标题栏显示'微信'，中间显示框，以及底部四个Tab按钮：消息、好友、通讯录和设置。点击Tab按钮时，中间显示框的内容会相应切换。代码解析涵盖了布局文件的创建，如top.xml和button.xml，以及MainActivity中处理Fragment切换的逻辑。运行截图展示了设计效果，源码仓库地址也在文中给出。

根据课程教学内容完成类微信的门户页面框架设计，APP最少必须包含4个tab页面。框架设计需要使用fragment，activity

设计目标、功能说明、代码解析、运行展示截图、源码仓库地址

设计目标：

1．页面具有标题“微信”
2．页面具有中间显示框
3．页面具有底部选择框，并且具有选择事件
4．页面底部选择框在进行改变的时候，我们需要中间显示框的页面同步改变
5．页面的布局清晰

功能说明：

类似微信的初始化页面，顶部显示微信。界面下有四个按钮，分别是消息、好友、通讯录、设置。点击不同按钮，中间显示界面显示对应的内容。

代码解析：新建一个top.xml用来展示标题

然后修改代码，使字体背景正常

<?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="80"
    android:orientation="vertical"
    tools:context=".top"
    android:background="@color/black">

    <!-- TODO: Update blank fragment layout -->

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_horizontal"
        android:text="微信"
        android:textSize="30sp"
        android:textColor="@color/white" />

</LinearLayout>

然后进行底部的ui制作，采用四个LinearLayout（vertical），Imagebutton和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="75dp"
    android:background="@color/black"
    android:orientation="horizontal">

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

        <ImageButton
            android:id="@+id/id_tab_news_img"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/black"
            app:srcCompat="@drawable/tab_weixin_normal" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="聊天"
            android:textColor="@color/white"
            android:textSize="17sp" />
    </LinearLayout>

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

        <ImageButton
            android:id="@+id/id_tab_friend_img"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/black"
            app:srcCompat="@drawable/tab_find_frd_normal" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="朋友"
            android:textColor="@color/white"
            android:textSize="17sp" />
    </LinearLayout>

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

        <ImageButton
            android:id="@+id/id_tab_address_img"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/black"
            app:srcCompat="@drawable/tab_address_normal" />

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

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

        <ImageButton
            android:id="@+id/id_tab_setting_img"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/black"
            app:srcCompat="@drawable/tab_settings_normal" />

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

然后就是编写main 使top跟bottom能整合在一起

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

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

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

        </FrameLayout>

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

    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

创建四个4个xml文件，其中仅有textview，分别对应不同页面的不同button所显示的页面，tab01-04名称分别为消息，设置，联系人等界面

分别对应的方法大体如下，只用修改名称即可

contact

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

最后就是main activity

显示所选择的fragment

private void selectFragment(int i){
        FragmentTransaction transaction =fragmentManager.beginTransaction();
        hideFragment(transaction);
        switch (i){
            case 0:
                transaction.show(mTab01);
                mImgweixin.setImageResource(R.drawable.tab_weixin_pressed);
                break;
            case 1:
                transaction.show(mTab02);
                mImgfriend.setImageResource(R.drawable.tab_find_frd_pressed);
                break;
            case 2:
                transaction.show(mTab03);
                mImgcontact.setImageResource(R.drawable.tab_address_pressed);
                break;
            case 3:
                transaction.show(mTab04);
                mImgsetting.setImageResource(R.drawable.tab_settings_pressed);
                break;
            default:
                break;
        }
        transaction.commit();
    }

隐藏其他的fragment

private void hideFragment(FragmentTransaction transaction) {
        transaction.hide(mTab01);
        transaction.hide(mTab02);
        transaction.hide(mTab03);
        transaction.hide(mTab04);
    }

运行截图：