安卓移动技术开发——类微信界面设计

Android Studio第一次作业——实现微信界面的设计

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

一、界面布局分析。
1.先对button.xml界面进去设计分析，下面是显示的界面。

2.分别建立四个.xml文件weixin.xml、friend.xml、contact.xml、config.xml，显示所需的四个界面的文本内容，图片如下图所示。
(1)weixin.xml的文本内容

(2)friend.xml的文本内容

(3)contact.xml的文本内容

(4)config.xml的文本内容

3.top.xml文件对微信界面的顶部进去分析设计。

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

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

二、实现界面之间的跳转
通过建立4个Fragment，将4个Fragment文件放入java文件中。

然后通过fragment的代码与4个.xml文件相连接。如图展示一个weixinFragment代码：

package com.example.mywork;

import android.os.Bundle;

import android.app.Fragment;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class weixinFragment extends Fragment {
     


    public weixinFragment() {
     
        // Required empty public constructor
    }


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

由于四个代码类似，这里只展示一个，然后对四个控件进行监听。
关键代码如下：

    private void  initFragment(){
     
        fragmentManager = getFragmentManager();
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        transaction.add(R.id.id_content, weixinFragment);
        transaction.add(R.id.id_content, friendFragment);
        transaction.add(R.id.id_content, configFragment);
        transaction.add(R.id.id_content, contactFragment);
        transaction.commit();

    }
    private void  hideFragment(FragmentTransaction transaction) {
     
        transaction.hide(weixinFragment);
        transaction.hide(friendFragment);
        transaction.hide(configFragment);
        transaction.hide(contactFragment);
    }

    private void showfragment(int i){
     
        FragmentTransaction transaction= fragmentManager.beginTransaction();
        hideFragment(transaction);
        switch(i) {
     
            case 0:
                Log.d("showfragment","1");
                transaction.show(weixinFragment);
                migweixin.setImageResource(R.drawable.weixin);
                break;
            case 1:
                transaction.show(friendFragment);
                migfriend.setImageResource(R.drawable.friend);
                break;
            case 2:
                transaction.show(contactFragment);
                migcontact.setImageResource(R.drawable.contact);
                break;
            case 3:
                transaction.show(configFragment);
                migconfig.setImageResource(R.drawable.config);
                break;
            default:
                break;
        }
        transaction.commit();
    }

    @Override
    public void onClick(View v) {
     
        Log.d("onClick","1");
        resetImg();
        switch(v.getId()){
     
            case R.id.LinearLayout1:
                showfragment(0);
                break;
            case R.id.LinearLayout2:
                showfragment(1);
                break;
            case R.id.LinearLayout3:
                showfragment(2);
                break;
            case R.id.LinearLayout4:
                showfragment(3);
                break;
            default:
                break;
        }
    }

}

最后展示最后的结果界面：
1.weixin界面。

2.friend界面。

3.contact界面。

4.config界面。

代码地址：https://gitee.com/shijia0526/demo