安卓移動技術開發——類微信界面設計

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