Android Studio實現仿微信APP門戶界面詳解及源碼

更新時間：2021年10月09日 09:07:17 作者：一個喪樂的野指針

這篇文章帶你通過Android studio來實現微信APP的門戶界面，主要說明框架的各部分功能與實現過程，下文包含了整個開發(fā)過程，以及解決問題的思路并再末尾提供了源碼鏈接

前言

你好！本文章主要介紹如何用Android Studio制作簡易的門戶界面，主要說明框架的各部分功能與實現過程，結尾處附有源碼。

界面分析

注：按鈕圖標是從阿里矢量圖標庫獲取，保存在drawable文件中調用。

首先根據我們的大致規(guī)劃布局，我們可以先建立三個核心XML文件：
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="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:background="#070707"
            android:gravity="center"
            android:text="奶茶小樣"
            android:textAppearance="@style/TextAppearance.AppCompat.Body2"
            android:textColor="#F8F5F5"
            android:textSize="26sp"
            android:textStyle="bold"
            android:typeface="monospace" />
    </LinearLayout>
</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="100dp"
    android:background="#0B0B0B"
    android:baselineAligned="false"
    android:gravity="center|center_horizontal">

    <LinearLayout
        android:id="@+id/bottom_zhenzhu_bar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center|center_horizontal"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/bottom_zhenzhu_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/black"
            android:clickable="false"
            android:contentDescription="@string/app_name"
            android:src="@drawable/zhenzhu" />
        <!--            tools:srcCompat="@drawable/Zhengzhou" />-->

        <TextView
            android:id="@+id/bottom_zhenzhu_text"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="珍珠"
            android:textColor="#FBFBFB"
            android:textSize="24sp" />
    </LinearLayout>

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

        <ImageButton
            android:id="@+id/bottom_chadong_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/black"
            android:clickable="false"
            android:contentDescription="@string/app_name"
            android:src="@drawable/milktea1"
            tools:srcCompat="@drawable/milktea1" />

        <TextView
            android:id="@+id/bottom_chadong_text"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="茶凍"
            android:textColor="#FBFAFA"
            android:textSize="24sp" />
    </LinearLayout>

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

        <ImageButton
            android:id="@+id/bottom_naigai_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/black"
            android:clickable="false"
            android:contentDescription="@string/app_name"
            android:src="@drawable/milktea2"
            tools:srcCompat="@drawable/milktea2" />

        <TextView
            android:id="@+id/bottom_naigai_text"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="奶蓋"
            android:textColor="#FBF8F8"
            android:textSize="24sp" />
    </LinearLayout>

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

        <ImageButton
            android:id="@+id/bottom_buding_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/black"
            android:clickable="false"
            android:contentDescription="@string/app_name"
            android:src="@drawable/milktea3"
            tools:srcCompat="@drawable/milktea3" />

        <TextView
            android:id="@+id/bottom_buding_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="布丁"
            android:textColor="#FAF8F8"
            android:textSize="24sp" />
    </LinearLayout>

</LinearLayout>

lactivity_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:id="@+id/linearLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clickable="true"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <include
        layout="@layout/top"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <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"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

注意：在top.xml和bottom.xml文件寫好后，將其插入到lactivity_main.xml文件的頭尾位置，并在中間加入FrameLayout來設置之后的Fragment文件切換。

界面動態(tài)實現代碼

目錄結構：

主要java代碼文件

MainActivity:
建立相關變量：

private Fragment zhenzhuFragment=new zhenzhuFragment();
    private Fragment naigaiFragment=new naigaiFragment();
    private Fragment budingFragment=new budingFragment();
    private Fragment chadongFragment=new chadongFragment();

    private FragmentManager fragmentManager;
    private LinearLayout mTzhenzhu,mTchadong,mTnaigai,mTbuding;
    private ImageButton mTmgZhenZhu;
    private ImageButton mTmgChaDong;
    private ImageButton mTmgNaiGai;
    private ImageButton mTmgBuDing;

    private TextView text_zhenzhu;
    private TextView text_chadong;
    private TextView text_naigai;
    private TextView text_buding;

主要函數方法：

在這里插入圖片描述

OnCreate: 利用我們在XML文件中定義的View的id屬性來獲取相應的View對象，并且加上View.OnClickListener接口，使下方生成的OnClick()方法自動匹配相應，同時在此函數中我們有添加了相應的監(jiān)聽器。
initFragment:
我們?yōu)榱藢崿F界面切換，需定義Fragment文件，因為我們的轉換界面有4種，故我們總共需要5個fragment文件。
wechatFragemt:

public class wechatFragment extends Fragment {


    public wechatFragment() {
        // 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_wechat, container, false);
    }
}

其余四個文件大致上與此文件相似，但其中的onCreateView函數應根據我們自己配置的XML文件而有所不同，例如：
budingFragment:

public class budingFragment extends Fragment {
    public budingFragment(){

    }
    @Override
    public View onCreateView( LayoutInflater inflater,  ViewGroup container,  Bundle savedInstanceState) {
//        return super.onCreateView(inflater, container, savedInstanceState);
        return inflater.inflate(R.layout.buding_fragment_wechat,container,false);
    }
}

我們可以看到，此函數的返回值是根據XML文件而作出改變，如果忽視，界面轉換將會失敗。
initFragment函數主要作用就是向之前的lacitivity_main.xml文件中的Fragment部分添加我們要做切換的代碼。

showfagment：我們在此函數中通過調用索引值來設置相應的界面效果代碼，例如Fragment界面展示、圖片的改變、字體的設置。（由于我選擇的按鈕圖片顏色過于鮮艷，故無法實現點擊時的亮暗轉換，為了體現按鈕被點擊，我設置了當點擊按鈕時字體顏色會發(fā)生變化作為替代）

hideFragment：顧名思義，此函數是為了隱藏Fragment，配合showFragment函數只顯示我們目前需要顯示的Fragment。

onClick：前面在介紹OnCreate函數時說過，是由View.OnClickListener接口生成，設置我們的點擊過程，并且此函數調用showFragment，完全控制我們制作的界面轉換流程。

靜態(tài)界面實現

目錄結構：

在這里插入圖片描述

三個核心文件在前面已經介紹過，在此不做過多解釋，如果不清楚可翻到上面去查看。根據上述創(chuàng)建5個Fragment文件，我們應對應生成5個Fragment的XML文件來設計界面效果。

fragment_wechat：
此文件是由上述的的Fragment的java文件自動生成，故其余四個文件可參考該文件進行配置。

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

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="這是微信聊天界面"
        android:textSize="48sp" />

</LinearLayout>

在此提醒，像我前面寫的Fragment的java文件因與對應的XML文件聯(lián)系起來，我們的XML文件也應與Fragment的java文件聯(lián)系起來。
以buding_fragment_wechat為例：

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


    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:text="這是布丁界面"
        android:textSize="48sp" />

</LinearLayout>

調用context屬性與其JAVA文件聯(lián)系。

總結

本文介紹了AndriodStudio制作門戶界面的大致流程以及界面切換的功能，如有錯誤，敬請指正。

代碼倉庫：github

碼云鏈接：https://github.com/Haru-Malfoy/work1.git

到此這篇關于Android Studio實現仿微信APP門戶界面詳解及源碼的文章就介紹到這了,更多相關Android 微信界面內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

anroid開發(fā)教程之spinner下拉列表的使用示例
這篇文章主要介紹了anroid的spinner下拉列表的使用示例,需要的朋友可以參考下
2014-04-04
詳解Android ScrollView嵌套EditText出現的滑動問題
本篇文章主要介紹了詳解ScrollView嵌套EditText出現的滑動問題，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-01-01
Android證書安裝過程介紹
大家好，本篇文章主要講的是Android證書安裝過程介紹，感興趣的同學趕快來看一看吧，對你有幫助的話記得收藏一下，方便下次瀏覽
2021-12-12
Android中Fragmen首選項使用自定義的ListPreference的方法
Android中Fragmen的首選項可以使用自定義的ListPreference,這樣Fragment的PreferenceFragment就可以更方便地保存配置信息,需要的朋友可以參考下
2016-05-05
一些比較實用的 Android adb 命令分享
這篇文章主要介紹了一些比較實用的 Android adb 命令分享,本文講解了查看設備、安裝應用、卸載一個應用、啟動一個頁面、進入設備的shell界面等內容,需要的朋友可以參考下
2015-02-02
Android中通過MediaStore獲取音樂文件信息方法
這篇文章主要介紹了Android中通過MediaStore獲取音樂文件信息方法,本文講解了獲取歌曲的名稱、歌曲的專輯名、歌曲的歌手名、歌曲文件的全路徑、歌曲文件的名稱、歌曲文件的發(fā)行日期等音樂文件信息的方法,需要的朋友可以參考下
2015-04-04
Android 代碼JIT友好度檢測工具
本文主要介紹一個Android代碼JIT友好度檢測工具，這里對JIT工具的資料做了一下整理，有需要的小伙伴可以參考下
2016-08-08
Android eclipse使用gradle打包的圖文教程
本文通過圖文并茂的形式給大家介紹了Android eclipse使用gradle打包的方法,需要的朋友可以參考下
2018-10-10
使用Eclipse配置android開發(fā)環(huán)境教程
這篇文章主要介紹了使用Eclipse配置android開發(fā)環(huán)境教程,本文講解了下載需要用到的工具、下載完需要的工具之后開始安裝、讓Ecplise自動安裝Android開發(fā)插件(ADT- plugin)、配置Andiord SDK路徑、測試開發(fā)一個Android項目等內容,需要的朋友可以參考下
2015-04-04
Android編程自定義View時添加自己的監(jiān)聽器示例
這篇文章主要介紹了Android編程自定義View時添加自己的監(jiān)聽器,涉及Android自定義view中監(jiān)聽器的添加、設置與使用相關操作技巧,需要的朋友可以參考下
2018-01-01