APP门户界面设计

主界面与框架

这是微信主界面的具体页面设计

还包括top部分，FrameLayout部分，button部分；以及如下xml文件：

还有相应的Java文件：

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="80dp"
    android:background="@android:color/background_dark"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="我的微信"
        android:textColor="@android:color/background_light"
        android:gravity="center"
        android:textSize="36sp" />
</LinearLayout>

button部分

界面设计

具体布局

代码（先给出一部分）

<LinearLayout
        android:id="@+id/Linearlayout_friend"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:clickable="true"
        android:orientation="vertical"
        android:background="@drawable/colorchange">

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:contentDescription="@string/app_name"
            app:srcCompat="@android:drawable/btn_star_big_off" />

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

main部分

代码

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <include
        layout="@layout/top"
        android:layout_width="match_parent"
        android:layout_height="80sp" />

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

    </FrameLayout>

    <include
        layout="@layout/bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

fragment_weixin文件

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

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="微信界面" />

</FrameLayout>

fragment_friend文件

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

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="朋友界面" />

</FrameLayout>

fragment_find文件

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

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="发现界面" />

</FrameLayout>

fragment_set文件

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

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="设置界面" />

</FrameLayout>

MainActivity

具体代码

package com.example.mywork;

import androidx.appcompat.app.AppCompatActivity;

import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;

import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{


    private Fragment weixinFragment=new weixinFragment();
    private Fragment friendFragment=new friendFragment();
    private Fragment setFragment=new setFragment();
    private Fragment discoverFragment=new findFragment();
    private FragmentManager fragmentManager;
    private LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);

        linearLayout1=findViewById(R.id.LinearLayout_weixin);
        linearLayout1=findViewById(R.id.LinearLayout_friend);
        linearLayout1=findViewById(R.id.LinearLayout_find);
        linearLayout1=findViewById(R.id.LinearLayout_set);

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

        initFragment();
        selectFragment(0);
    }

    private void initFragment() {
        fragmentManager = getFragmentManager();
        FragmentTransaction transaction =fragmentManager.beginTransaction();
        transaction.add(R.id.id_connect, weixinFragment);
        transaction.add(R.id.id_connect, friendFragment);
        transaction.add(R.id.id_connect, setFragment);
        transaction.add(R.id.id_connect, findFragment);
        transaction.commit();
    }

    private void hideFragment(FragmentTransaction transaction){
        transaction.hide(weixinFragment);
        transaction.hide(friendFragment);
        transaction.hide(setFragment);
        transaction.hide(findFragment);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.LinearLayout_weixin:
                selectFragment(0);
                break;
            case R.id.LinearLayout_friend:
                selectFragment(1);
                break;
            case R.id.LinearLayout_find:
                selectFragment(2);
                break;
            case R.id.LinearLayout_set:
                selectFragment(3);
                break;
            default:
                break;
        }
    }

    private void selectFragment(int i) {
        FragmentTransaction transaction=fragmentManager.beginTransaction();
        hideFragment(transaction);
        switch (i){
            case 0:
                transaction.show(weixinFragment);
                break;
            case 1:
                transaction.show(friendFragment);
                break;
            case 2:
                transaction.show(findFragment);
                break;
            case 3:
                transaction.show(setFragment);
                break;
            default:
                break;
        }
        transaction.commit();
    }
}

实现选中变色

具体代码：

<?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/clr_normal" android:state_pressed="false"/>
        <item android:drawable="@drawable/clr_pressed" android:state_pressed="true"/>
    </selector>

具体效果

选中效果

全部代码：Gitee