Android studio第一次作業：實作Wechat界面

移動開發.Android studio實作類Wechat界面

移動開發.Android studio實作類Wechat界面

• • 目錄

    移動開發.Android studio實作類Wechat界面

    文章目錄

    1>類Wechat界面有哪些功能

    2>分析如何實作這些功能

    3>bottom.xml的構造

    4>top.xml的構造

    5>activity_main.xml的構造

    6>**MainActivity的構造**

    7>呼叫的四個Fragment檔案

    8>Wechat的運行**

    ---

1>類Wechat界面有哪些功能

1.在界面的下方有四個按鈕，微信，朋友，通訊錄，設定，按下后按鈕會又暗變亮

2.在點擊四個按鈕后，會跳轉到四個不同的界面

3.在界面的上方有一個標題Wechat

2>分析如何實作這些功能

1.首先要準備8個界面圖示,將它們放入到drawable中

?bottom_bar.png ? weixin1.png ?weixin2.png

?friend1.png ? friend2.png ? address1.png

? address2.png ? setting1.png ?setting2.png

2.在layout的bottom.xml中涉及wechat的底部ui，在底部設定4個按鈕，對應四個微信，朋友，通訊錄和設定，

3.在top.xml中設計微信的title，黑底白字Wechat

4.在layout的activity_main.xml中，設計中間一層的ui，將一個空Fragement拉進來，并且把top.xml和bottom.xml引入，這樣初始的類微信界面就設計好了 ，

5.要實作，點擊底部圖示換顏色和界面的功能，要新建四個java 的Fragment檔案，即weixinFragement，FrdFragement，contactFragement和settingFragement,,在主函式中首先宣告變數，將部件和java代碼連接起來，設計點擊圖示，圖示變數，其余圖示為灰色，并改變相應的代碼，而這一切都要有一個監聽函式，監聽滑鼠的動態，

3>bottom.xml的構造

在這個Linearlayout中添加textview和imagebutton（選中之前拖入drawable檔案夾里的圖示），調整為圖片在上文本在下

?

調整Linearlayout

<LinearLayout
        android:id="@+id/id_tab_weixin"
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:layout_weight="1"
        android:background="@drawable/bottom_bar"
        android:orientation="vertical">

調整文本為白色并調整大小

<TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:saveEnabled="false"
            android:text="微信"
            android:textColor="#ffffff"
            android:textSize="15sp" />

將imagebutton背景調整為黑色并調整寬度為80dp

<ImageButton
            android:id="@+id/id_tab_weixin_img"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:layout_weight="1"
            android:clickable="false"
            android:background="#000000"
            app:srcCompat="@drawable/weixin2"
            tools:ignore="SpeakableTextPresentCheck" /

然后將這個Linearlayout單元copy三份總共四份，由于四份的Linearlayout名字一樣會報錯，所以需要修改一下每一份的id，調整四個Linearlayout的引數

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

此時bottom的基本雛形已經完成

?

4>top.xml的構造

拖入一個textview到linearlayout里，修改內容為WeChat，在Code中調整xml檔案

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
?
    android:layout_height="65dp"
?
    android:gravity="center"
?
    android:background="#000000"
?
    android:orientation="vertical">
?
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
?
        android:layout_weight="1"
        android:text="WeChat"
?
        android:textColor="#ffffff"
?
        android:textSize="40sp" />
</LinearLayout>

?

5>activity_main.xml的構造

layout中新建一個activity_main.xml檔案 將FrameLayout拖入，進入Code編輯代碼

<?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="match_parent"
    android:orientation="vertical">
    <include layout="@layout/top" />
    <FrameLayout
        android:id="@+id/id_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">
    </FrameLayout>
    <include layout="@layout/bottom" />
</LinearLayout>

在其中引入top.xml和bottom.xml.

?

6>**MainActivity的構造**

package com.example.mywork_lbw;
?
import androidx.appcompat.app.AppCompatActivity;
?
import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
?
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.LinearLayout;
?
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
?
    private LinearLayout mTabWeixin;
    private LinearLayout mTabfrd;
    private LinearLayout mTabAddress;
    private LinearLayout mTabSetting;
?
    private ImageButton mWeixinImg;
    private ImageButton mFrdImg;
    private ImageButton mAddressImg;
    private ImageButton mSettingImg;
?
?
    private Fragment mTab01 = new weixinFragment();
    private Fragment mTab02 = new frdFragment();
    private Fragment mTab03 = new contactFragment();
    private Fragment mTab04 = new settingsFragment();
?
    private FragmentManager fm;
?
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
?
        initView();
        initEvent();
        initFragment();
        selectfragment(0);
    }
?
    private void initFragment() {
        //fragment的切換
        fm = getFragmentManager();
        FragmentTransaction transaction = fm.beginTransaction();
        transaction.add(R.id.id_content, mTab01);
        transaction.add(R.id.id_content, mTab02);
        transaction.add(R.id.id_content, mTab03);
        transaction.add(R.id.id_content, mTab04);
        transaction.commit();
    }
?
    private void initEvent() {
        mTabWeixin.setOnClickListener(this);
        mTabfrd.setOnClickListener(this);
        mTabAddress.setOnClickListener(this);
        mTabSetting.setOnClickListener(this);
    }
?
    private void initView() {
        //改變圖示的顏色
        mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);
        mTabfrd = (LinearLayout) findViewById(R.id.id_tab_frd);
        mTabAddress = (LinearLayout) findViewById(R.id.id_tab_contact);
        mTabSetting = (LinearLayout) findViewById(R.id.id_tab_settings);
?
        mWeixinImg = (ImageButton) findViewById(R.id.id_tab_weixin_img);
        mFrdImg = (ImageButton) findViewById(R.id.id_tab_frd_img);
        mAddressImg = (ImageButton) findViewById(R.id.id_tab_contact_img);
        mSettingImg = (ImageButton) findViewById(R.id.id_tab_settings_img);
?
?
    }
?
    private void selectfragment(int i) {
        //顯示選中界面的內容，選中界面圖示為綠色
        FragmentTransaction transaction = fm.beginTransaction();
        hideFragment(transaction);
        switch (i) {
            case 0:
                Log.d("setSelect", "1");
                transaction.show(mTab01);
                mWeixinImg.setImageResource(R.drawable.weixin1);
                break;
            case 1:
                transaction.show(mTab02);
                mFrdImg.setImageResource(R.drawable.friend1);
                break;
            case 2:
                transaction.show(mTab03);
                mAddressImg.setImageResource(R.drawable.address1);
                break;
            case 3:
                transaction.show(mTab04);
                mSettingImg.setImageResource(R.drawable.setting1);
                break;
            default:
                break;
        }
        transaction.commit();
    }
?
    private void hideFragment(FragmentTransaction transaction) {
        //把沒有使用的界面的內容隱藏
        transaction.hide(mTab01);
        transaction.hide(mTab02);
        transaction.hide(mTab03);
        transaction.hide(mTab04);
    }
?
    @Override
    public void onClick(View view) {
        //監聽函式，監聽到底是哪一個圖示被擊中從而顯示哪一個界面的內容
        resetimg();
        switch (view.getId()) {
            case R.id.id_tab_weixin:
                selectfragment(0);
                break;
            case R.id.id_tab_frd:
                selectfragment(1);
                break;
            case R.id.id_tab_contact:
                selectfragment(2);
                break;
            case R.id.id_tab_settings:
                selectfragment(3);
                break;
        }
    }
?
    public void resetimg() {
        //沒有使用的界面的圖示為灰色
        mWeixinImg.setImageResource(R.drawable.weixin2);
        mFrdImg.setImageResource(R.drawable.friend2);
        mAddressImg.setImageResource(R.drawable.address2);
        mSettingImg.setImageResource(R.drawable.setting2);
    }
}
?

這里主要運用了Fragment

Fragment的優勢有以下幾點：

1. 模塊化（Modularity）：我們不必把所有代碼全部寫在Activity中，而是把代碼寫在各自的Fragment中，

2. 可重用（Reusability）：多個Activity可以重用一個Fragment，

3. 可適配（Adaptability）：根據硬體的螢屏尺寸、螢屏方向，能夠方便地實作不同的布局，這樣用戶體驗更好，

注意：這里的java檔案宣告變數時并不需要原檔案一樣的id，可以新建一個id，以免混淆

這里的4個Fragement對應著四個界面，注意要在四個Fragement里面修改最后的return值

?

7>呼叫的四個Fragment檔案

 private Fragment mTab01 = new weixinFragment();
    private Fragment mTab02 = new frdFragment();
    private Fragment mTab03 = new contactFragment();
    private Fragment mTab04 = new settingsFragment();
    private FragmentManager fm;

8>Wechat的運行**

?

?

?

?

原碼下載：

GitHub - yikemi/Wechat_lbw

?