移动开发-类微信的门户页面框架设计

最新推荐文章于 2022-10-18 10:46:57 发布

胆小鬼311

最新推荐文章于 2022-10-18 10:46:57 发布

阅读量584

点赞数 1

文章标签： android java github

本文链接：https://blog.csdn.net/qq_59348550/article/details/127122506

版权

本文详细介绍了如何使用Android Studio（AS）设计一个包含四个tab的APP，采用Fragment和Activity构建主界面。顶部显示标题，中间区域通过FrameLayout切换不同Fragment内容，底部设置导航栏，包含四个功能项，每个项由ImageView和TextView组成，点击切换内容。代码示例展示了布局XML和Java实现。

摘要由CSDN通过智能技术生成

设计目标：

设计一个最少包含4个tab界面的APP；框架设计需要使用fragment，activity

功能说明：

以手机微信主界面为例：
应将主界面分为三个版块，top,content,bottom；

top（主界面标题区）
在top版块应该展示出该主界面的标题，即wechat，在AS中，可在layout使用textview部件居中展示该文字效果。

fragment（中心内容展示区）
在该板块，应该能够根据底部功能栏的切换而随之切换。因此，在AS中，可以使用FrameLayout实现该功能，在FrameLayout中包含四个fragment部件对应四个功能栏即可。

bottom（底部导航栏区）
在bottom版块中，进一步分析应将其水平划分为四个LinearLayout，在每一个LinearLayout中应该再垂直划分为两个LinearLayout。

代码展示：

top主页面标题区：

代码展示

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

    <TextView
        android:id="@+id/top"
        android:layout_width="wrap_content"
        android:layout_height="40sp"
        android:gravity="center"
        android:layout_weight="1"
        android:textColor="@color/white"
        android:background="@color/cardview_dark_background"
        android:text="title" />
</LinearLayout>

效果展示

fragment中心内容展示区（以第一个界面为例）：

代码展示

<?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=".Fragment1">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="微信"
        android:textSize="35dp" />
</FrameLayout>

效果展示

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

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

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

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

        </LinearLayout>

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

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

            <TextView
                android:id="@+id/textView2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="联系人" />

        </LinearLayout>

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

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

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

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

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

            <TextView
                android:id="@+id/textView4"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="我的" />
        </LinearLayout>
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

效果展示

activity_main.xml

代码展示

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

    <include
        android:id="@+id/include1"
        layout="@layout/top"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <FrameLayout
        android:id="@+id/framelayout1"
        android:layout_width="410dp"
        android:layout_height="638dp"
        app:layout_constraintBottom_toBottomOf="@+id/include2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/include1"
        app:layout_constraintVertical_bias="0.0">

    </FrameLayout>

    <include
        android:id="@+id/include2"
        layout="@layout/bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

效果展示

fragment对应的Java文件（以第一个界面为例，其余文件相同）：

代码展示

package com.example.test;

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 {

    // TODO: Rename parameter arguments, choose names that match
    // the fragment initialization parameters, e.g. ARG_ITEM_NUMBER


    @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);
    }
}

主函数MainActivity.java

package com.example.test;



import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentTransaction;
import android.view.View;

import android.os.Bundle;

import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private Fragment Fragment1,Fragment2,Fragment3,Fragment4;
    private LinearLayout linearlayout1,linearlayout2,linearlayout3,linearlayout4;
    private FragmentManager manager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Fragment1=new Fragment1();
        Fragment2=new Fragment2();
        Fragment3=new Fragment3();
        Fragment4=new Fragment4();
        manager=getSupportFragmentManager();
        FragmentTransaction transaction=manager.beginTransaction()
                .add(R.id.framelayout1,Fragment1)
                //            .add(R.id.framelayout1,Fragment2)
                //            .add(R.id.framelayout1,Fragment3)
                //            .add(R.id.framelayout1,Fragment4)
                ;
        transaction.commit();
        linearlayout1=findViewById(R.id.linearlayout1);
        linearlayout2=findViewById(R.id.linearlayout2);
        linearlayout3=findViewById(R.id.linearlayout3);
        linearlayout4=findViewById(R.id.linearlayout4);
        linearlayout1.setOnClickListener(this);
        linearlayout2.setOnClickListener(this);
        linearlayout3.setOnClickListener(this);
        linearlayout4.setOnClickListener(this);
    }

    private void select(int i){
        FragmentTransaction transaction=manager.beginTransaction();
        transaction.setCustomAnimations(android.R.anim.fade_in, android.R.anim.slide_out_right);
        switch (i){
            case 1:
                transaction.replace(R.id.framelayout1,Fragment1).commit();
                break;
            case 2:
                transaction.replace(R.id.framelayout1,Fragment2).commit();
                break;
            case 3:
                transaction.replace(R.id.framelayout1,Fragment3).commit();
                break;
            case 4:
                transaction.replace(R.id.framelayout1,Fragment4).commit();
                break;


        }

    }
    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.linearlayout1:
                select(1);
                break;
            case R.id.linearlayout2:
                select(2);
                break;
            case R.id.linearlayout3:
                select(3);
                break;
            case R.id.linearlayout4:
                select(4);
                break;

        }

    }

}