Android Studio 開發–微信APP門戶界面設計

本次Github代碼倉庫 --crcr1013/MyWechat

文章目錄

- Android Studio 開發--微信APP門戶界面設計
前言
一、成果要求
二、關鍵步驟
- 1、準備作業
- - 1.1環境準備
  - 1.2圖片準備
- 2、布局設計
- - 2.1頭部檔案（top.xml）
  - 2.2底部檔案（bottom.xml）
  - 2.2.1框架
  - 2.2.2調參
  - 2.3基本布局檔案（activity_main.xml）
  - 2.3.1框架
  - 2.3.2調參
  - 2.4中部布局檔案（fragment_xxx.xml）
  - 2.5主活動函式的java代碼（MainActivity.java）
  - 2.5.1中部布局檔案對應的Fragment
  - 2.5.2撰寫MainActivity.java主函式
三、效果展示
四、總結

前言

一、成果要求

1、根據課程實操實作APP門戶界面框架設計，共包含4個tab頁，能實作tab頁之間的點擊切換;
2、在進行切換時，頂部title同步改變，中間顯示框的頁面同步改變，底部選擇框被選擇的圖示顏色加深，

二、關鍵步驟

1、準備作業

1.1環境準備

新建AS專案WechatDemo，安裝SDK、AVD，完成專案基礎的搭建，

1.2圖片準備

把該專案中用到的ui圖片（四個功能按鈕各有兩個圖示圖片）復制粘貼到專案的檔案夾WechatDemo\app\src\main\res\drawable-v24，并注意圖片命名，
在這里插入圖片描述

2、布局設計

微信共包含4個tab頁，即聊天，朋友，發現，設定，頁面分為上中下三個部分，頭部是界面標題部分，中部是界面展示部分，底部是按鈕控制部分，故我們需要頭部顯示的xml檔案（top.xml），底部按鈕控制的xml檔案（bottom.xml），點擊的四個button要對應四個中部展示界面的xml檔案（fragment_weixin.xml，fragment_friends.xml，frament_find.xml，fragment_shezhi.xml），

2.1頭部檔案（top.xml）

簡單的TextView文本顯示，需要調整文本大小，文本顏色，文本背景顏色，文本位置居中，
LinearLayout中添加一個TextView，需將LinearLayout設定為horizontal,TextView的gravity設定為center，顏色，文本大小等引數如代碼所示：

<?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="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="微信"
        android:textColor="@color/white"
        android:textSize="30sp" />
</LinearLayout>

2.2底部檔案（bottom.xml）

2.2.1框架

微信底部應為四個按鈕圖片及對應文字，即p1(聊天)，p2（朋友），p3(發現)，p4（設定），在已有的LinearLayout中添加一個LinearLayout，放入ImageView和TextView，設定最外層LinearLayout的orientation為水平（即使待添加的每個控制元件在一條水平線上），再復制粘貼三個LinearLayout，調整內層4個LinearLayout的orientation為垂直（即圖片和文本呈上下垂直關系），

2.2.2調參

1、給每個LinearLayout中的ImageView和TextView添加對應圖片和文本，設定每個LinearLayout為平鋪，即將layout_width設定為wrap_content，將layout_height設定為match_parent，將layout_weight設定為1，同時需要修改每個LinearLayout中ImageView和TextView的id，增加每個LinearLayout的id（以便于后邊把ImageView和TextView合起來作為一個可以點擊的按鈕），
2、設定最外層LinearLayout的高度，背景顏色，內層四個LinearLayout的背景顏色，居中，每個TextView的文本顏色，文本大小，居中，代碼引數如下（以LinearLayout_weixin為例）：
最外層LinearLayout

<?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="100dp">
</LinearLayout>

LinearLayout_weixin

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

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/p1"
            tools:srcCompat="@drawable/p1"/>

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

注意：在設定ImageView的圖片資源時，要用android:src="@drawable/p1"引數，否則肯會出現圖片不顯示的情況，

2.3基本布局檔案（activity_main.xml）

2.3.1框架

將已有的最外層LinearLayout布局設定為vertical，用include將top和bottom加入到該xml視圖中，添加一個FrameLayout在include中間，

2.3.2調參

將FrameLayout的id設定為content，便于呼叫，將其layout_width設定為match_parent，將layout_height設定為match_parent，將layout_weight設定為1，

<?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/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">
    </FrameLayout>
    <include layout="@layout/bottom" />
</LinearLayout>

2.4中部布局檔案（fragment_xxx.xml）

layout中新建四個中部布局檔案，分別命名，
在這里插入圖片描述
分別添加TextView，設定文字內容，字體大小風格和居中，
以fragment_weixin.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:id="@+id/title_weixin"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="這是微信聊天界面！"
        android:textSize="30sp" />

</LinearLayout>

要實作點擊bottom不同按鈕用以切換中間內容，大體思路是在java檔案夾下第一個package中為4個內容xml界面配置4個Fragment，再把它們壓縮成一個FrameLayout，寫到程式中，做一個子視窗，具體步驟在后面主活動函式的java代碼中介紹，

2.5主活動函式的java代碼（MainActivity.java）

2.5.1中部布局檔案對應的Fragment

創建四個Fragment類
在這里插入圖片描述
創建好后可以將沒用的方法陳述句洗掉，在每個類中，最需要注意的是最后一行代碼，修改R.layout.x為對應xml檔案，
以weixinFragment為例：

package com.example.wechatdemo;

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.fragment_weixin, container, false);
    }
}

注意：有時默認匯入的Fragment相關的包可能會出現問題，需手動修改為import android.app.Fragment;，

2.5.2撰寫MainActivity.java主函式

1 、用4個Fragment類創建4個實體物件，創建FragmentManager物件；分別創建LinearLayout、TextView、ImageView物件；

private weixinFragment weixinFragment = new weixinFragment();
private friendsFragment friendsFragment = new friendsFragment();
private findFragment findFragment = new findFragment();
private shezhiFragment shezhiFragment = new shezhiFragment();
private FragmentManager fragmentManager;
private View LinearLayout1,LinearLayout2,LinearLayout3,LinearLayout4;
private TextView textView1,textView2,textView3,textView4;
private ImageView image1,image2,image3,image4;

2、在onCreate中在onCreate中添加需要找到的LinearLayout，需要更改的按鈕圖片ImageView，需要更改的頭部文本TextView；

3、撰寫initFragment函式把4個Fragment放到FrameLayout中，即可將四個檔案的展示界面進行傳遞；

    private void initFragment(){
        fragmentManager = getFragmentManager();
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        transaction.add(R.id.content,weixinFragment);
        transaction.add(R.id.content,friendsFragment);
        transaction.add(R.id.content,findFragment);
        transaction.add(R.id.content,shezhiFragment);
        transaction.commit();
    }

4、撰寫hideFragment函式隱藏所有內容頁面，該函式在界面展示函式showFragment呼叫；

    public void hideFragment(FragmentTransaction transaction){
        transaction.hide(weixinFragment);
        transaction.hide(friendsFragment);
        transaction.hide(findFragment);
        transaction.hide(shezhiFragment);
    }

5 、撰寫resetImg函式用來把圖示變灰，該函式需在onClick函式中呼叫；

    private void resetImgs(){
        image1.setImageResource(R.drawable.p1);
        image2.setImageResource(R.drawable.p2);
        image3.setImageResource(R.drawable.p3);
        image4.setImageResource(R.drawable.p4);
    }

6、撰寫showFragment函式用來實作bottom中四個按鈕對應的fragment界面的展示，同時實作頭部控制元件文本的切換，底部控制元件被選中的按鈕圖片顏色由灰色變為有顏色（此處只展示case(0)的情況）；注意需要將bottom.xml中各LinearLayout的監聽引數設定如下android:clickable="true";

    private void showFragment(int i){
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        hideFragment(transaction);
        switch (i){
            case 0:
                transaction.show(weixinFragment);
                image1.setImageResource(R.drawable.p1_color);
                textView1.setText("聊天");
                break;
            case 1:
            ...
                       }
        transaction.commit();
    }

7、將MainActivity繼承Activity類，添加implements View.OnClickListener，重寫onClick函式，利用switch…case函式通過不同的引數呼叫showFragment(i)

public class MainActivity extends Activity implements View.OnClickListener {

onClick函式如下：

    @Override
    public void onClick(View v) {
        resetImgs();
        switch (v.getId()){
            case R.id.LinearLayout_weixin:
                showFragment(0);
                break;
            case R.id.LinearLayout_friends:
                showFragment(1);
                break;
            case R.id.LinearLayout_find:
                showFragment(2);
                break;
            case R.id.LinearLayout_shezhi:
                showFragment(3);
                break;
            default:
                break;
        }
    }

8、在onCreate中呼叫 initFragment(); showFragment(0);

三、效果展示

影片展示

四、總結

本次博客是我第一次寫博客，發博客，內容是AS開發，

本次的Project非常有意思，讓我對AS開發產生了較大的興趣，不過目前我尚且不算已入門，希望在今后的AS學習中，跟著老師的腳步，跟著眾多大佬的腳步提高自己的技術水平和作為一個程式猿的各方面的修養，

寫本博客讓我對該專案的開發在結構上和內容上都有了更深刻的認識，在今后開發AS專案的思路方面也有了更深刻的體會，不論是本站還是其他的博客網站，都有有意義和無意義的博客之分，在此順便向認真寫博客分享資源的人致敬，希望之后多在專案開發思路、專案原始碼等方面有著自己貢獻！！加油！🆗

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/306456.html

標籤：其他

上一篇：Android學習記錄

下一篇：ARouter 在多 module 專案中實戰