移动开发技术1 app门户界面设计

要求

1、内容：请根据课程实操实现APP门户界面框架设计，至少包含4个tab页，能实现tab页之间的点击切换；
2、技术：使用布局（layouts）和分段（fragment），对控件进行点击监听；
（没有做出点击图标改变颜色的效果）

此界面分为三个部分

top：界面最上方的wechat，可在layout使用textview部件居中展示该文字效果。

content：下面四个标签，能够根据底部功能栏的切换而随之切换。可以使用FrameLayout实现该功能，在FrameLayout中包含四个fragment部件对应四个功能栏即可。

bottom：在bottom版块中，进一步分析应将其水平划分为四个LinearLayout，在每一个LinearLayout中应该再垂直划分为两个LinearLayout

想设置的图标在阿里矢量图中可以免费下载

从所在目录中直接拖拽到drawable目录下就可以导入使用

代码

 layout

activity_main.xml

<?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"
    tools:context=".MainActivity"
    android:orientation="vertical">

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

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

    </FrameLayout>

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

</LinearLayout>

bottom.xml 

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

    <LinearLayout
        android:id="@+id/LinearLayout_weixinFragment"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:clickable="true"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="40sp"
            android:src="@drawable/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="20sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/LinearLayout_weixinContacts"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:clickable="true"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="match_parent"
            android:layout_height="40sp"
            android:src="@drawable/contacts" />

        <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="20sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/LinearLayout_weixinLook"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:clickable="true"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="match_parent"
            android:layout_height="40sp"
            android:src="@drawable/look" />

        <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="20sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/LinearLayout_weixinMeow"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:clickable="true"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="match_parent"
            android:layout_height="40sp"
            android:src="@drawable/meow" />

        <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="20sp" />
    </LinearLayout>
</LinearLayout>

四个fragment.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="match_parent"
    tools:context=".weixinFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="40sp"
        android:gravity="center"
        android:text="这是微信聊天界面" />

</LinearLayout>

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

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="这是联系人界面"
        android:textSize="40sp" />

</LinearLayout>

还有两个也差不多

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

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="wechat"
        android:textColor="@color/white"
        android:gravity="center"
        android:textSize="24sp"/>
</LinearLayout>

MainActivity.java

package com.example.myapplication;

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.TextView;


public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private Fragment weixinFragment = new weixinFragment();
    private Fragment weixinContacts = new weixinContacts();
    private Fragment weixinLook = new weixinLook();
    private Fragment weixinMeow = new weixinMeow();
    private FragmentManager fragmentManager;
    private View LinearLayout1,LinearLayout2,LinearLayout3,LinearLayout4;
    private TextView textView1,textView2,textView3,textView4;


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

        LinearLayout1 = findViewById(R.id.LinearLayout_weixinFragment);
        LinearLayout2 = findViewById(R.id.LinearLayout_weixinContacts);
        LinearLayout3 = findViewById(R.id.LinearLayout_weixinLook);
        LinearLayout4 = findViewById(R.id.LinearLayout_weixinMeow);
        textView1 = findViewById(R.id.textView1);
        textView2 = findViewById(R.id.textView2);
        textView3 = findViewById(R.id.textView3);
        textView4 = findViewById(R.id.textView4);

        LinearLayout1.setOnClickListener(this);
        LinearLayout2.setOnClickListener(this);
        LinearLayout3.setOnClickListener(this);
        LinearLayout4.setOnClickListener(this);
        textView1.setOnClickListener(this);
        textView2.setOnClickListener(this);
        textView3.setOnClickListener(this);
        textView4.setOnClickListener(this);
        initFragment();
        showFragment(0);

    }

    private void initFragment(){
        fragmentManager = getFragmentManager();
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        transaction.add(R.id.content,weixinFragment);
        transaction.add(R.id.content,weixinContacts);
        transaction.add(R.id.content,weixinLook);
        transaction.add(R.id.content,weixinMeow);
        transaction.commit();
    }

    public void hideFragment(FragmentTransaction transaction){
        transaction.hide(weixinFragment);
        transaction.hide(weixinContacts);
        transaction.hide(weixinLook);
        transaction.hide(weixinMeow);
    }



    private void showFragment(int i){
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        hideFragment(transaction);
        switch (i){
            case 0:
                transaction.show(weixinFragment);
                textView1.setText("聊天");
                break;
            case 1:
                transaction.show(weixinContacts);
                textView2.setText("联系人");
                break;
            case 2:
                transaction.show(weixinLook);
                textView3.setText("朋友圈");
                break;
            case 3:
                transaction.show(weixinMeow);
                textView4.setText("喵呜");
                break;
            default:
                break;
        }
        transaction.commit();
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.LinearLayout_weixinFragment:
                showFragment(0);
                break;
            case R.id.LinearLayout_weixinContacts:
                showFragment(1);
                break;
            case R.id.LinearLayout_weixinLook:
                showFragment(2);
                break;
            case R.id.LinearLayout_weixinMeow:
                showFragment(3);
                break;
            default:
                break;

        }
    }
}

界面展示

 

 

 

代码仓库

https://github.com/aedela/MyApp