APP门户界面设计

APP界面设计效果展示

• 微信聊天界面
  
• 微信通讯录界面
  
• 微信发现界面
  
• 微信设置页面
  

界面设计分析

上述界面可以分为三部分分别进行开发，一是顶部的标题栏，二是中间的内容栏，三是底部的菜单栏，接下来分析三部分分别如何设计开发。

底部菜单

底部需要有四个按钮来回切换，所以可以将底部分为四个空间，每个空间都由textView和imageButton组成。

<!-- 单个空间代码示例  -->
<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:layout_gravity="center_horizontal"
            android:clickable="false"
            android:background="#000000"
            android:src="@drawable/tab_weixin_normal"
            />
        <TextView
            android:id="@+id/textview1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:background="@color/black"
            android:text="微信"
            android:textColor="@color/white"
            android:textSize="20sp"
            />
    </LinearLayout>

顶部标题

顶部标题只需一个TextView控件即可，所以在top.xml中进行简单布局即可

<!--top.xml-->
<?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="65dp"
    android:gravity="center"
    android:background="@color/black"
    android:orientation="vertical"

    >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="冒牌微信"
        android:textColor="@color/white"
        android:textSize="25sp"
        />

</LinearLayout>

中间内容区

中间内容需要在点击不同的按钮时进行切换，且其他部分不变，因此可以引入fragment实现。通过inflate方法将xml布局压缩到一个fragment中，当在主程序中通过按钮调用时，实际上中间切换的是fragment，每一个fragment拥有自己的界面。

• 核心代码

<?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="match_parent"
    tools:context=".news">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="40sp"
        android:textColor="@color/black"
        android:text="@string/hello_blank_fragment" />
</LinearLayout>

public class news extends Fragment {

    public news() {
        // Required empty public constructor
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        //将xml文件压缩至container
        return inflater.inflate(R.layout.fragment_news, container, false);
    }
}

整体布局

整体布局在activity_main.xml文件中体现，通过include标签引入top.xml和bottom.xml布局文件

<!--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">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <include layout="@layout/top"></include>
        <!--引入顶部-->
        <FrameLayout
            android:id="@+id/Frame_container"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">
        </FrameLayout>
        <include layout="@layout/bottom"></include>
        <!--引入底部-->
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

功能实现方法

页面切换

• 核心思路：通过fragment的控制达到显示所需页面而隐藏其他页面，就可以实现四个页面的相互切换。
• 核心代码
  • 初始化fragment，将xml布局装入container

private Fragment news = new news();
private Fragment friends = new friends();
private Fragment address =new address();
private Fragment setting = new setting();
private FragmentManager fragmentManager;

private void init_Fragment(){
        fragmentManager =getFragmentManager();
        
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        fragmentTransaction.add(R.id.Frame_container,news);
        fragmentTransaction.add(R.id.Frame_container,friends);
        fragmentTransaction.add(R.id.Frame_container,address);
        fragmentTransaction.add(R.id.Frame_container,setting);
        fragmentTransaction.commit();
        showFragment(0);
        
        news_button.setImageResource(R.drawable.tab_weixin_pressed);
    }

• 隐藏所有fragment

    private void hide_Fragment(FragmentTransaction fragmentTransaction)
    {
        fragmentTransaction.hide(news);
        fragmentTransaction.hide(friends);
        fragmentTransaction.hide(address);
        fragmentTransaction.hide(setting);
    }

• 显示特定的fragment

private void showFragment(int i) {
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        hide_Fragment(fragmentTransaction);
        switch (i){
            case 0:
                fragmentTransaction.show(news);
                break;
            case 1:
                fragmentTransaction.show(friends);
                break;
            case 2:
                fragmentTransaction.show(setting);
                break;
            case 3 :
                fragmentTransaction.show(address);
                break;
            default:
                break;
        }
        fragmentTransaction.commit();
    }

• 定义onClick()响应监听，并在监听到点击动作时显示相应fragment。
• 四个Button响应时分别向showFragment()函数传入参数0、1、2、3，showFragment()函数中通过switch语句重设资源图片和transaction，实现点击后按钮图片变绿且其余变灰同时fragment内容发生切换。

@Override
    public void onClick(View view) {
        resetButton();

        switch (view.getId()){
            case R.id.id_tab_news:
                showFragment(0);
                news_button.setImageResource(R.drawable.tab_weixin_pressed);
                break;
            case R.id.id_tab_friends:
                showFragment(1);
                friends_button.setImageResource(R.drawable.tab_find_frd_pressed);
                break;
            case R.id.id_tab_setting:
                showFragment(2);
                setting_button.setImageResource(R.drawable.tab_settings_pressed);
                break;
            case R.id.id_tab_address:

                showFragment(3);
                address_button.setImageResource(R.drawable.tab_address_pressed);
                break;
            default:
                break;
        }
    }

按钮颜色切换

• 核心思路：提前准备正常状态下和按压状态下的按钮图片，当监听到点击事件时，在显示fragment的同时，重设imageButton的图片资源，设置为按压后的按钮，当切换按钮时，重设所有按钮的状态。
• 核心代码：
  • 重设按钮图片资源

    private void resetButton(){
        news_button.setImageResource(R.drawable.tab_weixin_normal);
        friends_button.setImageResource(R.drawable.tab_find_frd_normal);
        address_button.setImageResource(R.drawable.tab_address_normal);
        setting_button.setImageResource(R.drawable.tab_settings_normal);
    }

• 切换按钮图片资源

···
news_button.setImageResource(R.drawable.tab_weixin_pressed);
···

问题解决

问题描述

启动APP时，会出现所有fragment同时显示的问题，即所有fragment在初始化后全部显示，导致页面杂乱。

解决办法

• 在进行fragment初始化结束后，设置默认显示页面，并隐藏其他页面即可解决。

    private void init_Fragment(){
        fragmentManager =getFragmentManager();
		//初始化，代码省略
        showFragment(0);
        //默认显示第一个页面
        news_button.setImageResource(R.drawable.tab_weixin_pressed);
        //默认第一个按钮为按压状态
    }

代码仓库地址

gitee仓库地址