Android Studio微信頁面
Android Studio微信頁面提交
這次實驗主要要求是微信基本頁面的搭建
實驗要求
- 頁面具有頭部“WeChat”
- 頁面具有中間顯示框
- 頁面具有底部選擇框,並且具有選擇事件(選擇底部不同按鈕時,圖示、中間顯示框都發生相應改變)
最終頁面展示
在這裡插入圖片描述
注意中間顯示框以及圖示顏色的改變
實驗步驟
很明顯,微信介面分為上中下三個部分,因而至少需要三個xml檔案。又因為有微信,朋友,通訊錄,設定四個介面,所以中間部分需要四個xml檔案。最終,除去activity_main.xml外共有6個xml檔案。
準備工作
將需要用到的圖示匯入到工程的/app/res/drawble 目錄下
top.xml
top中主要只是加入一個textview,並使其居中
需要注意的是,設定text時,如果直接設定
android:text="WeChat"
會出現警告
通常在/res/values資料夾下的string.xml檔案裡事先設定好將會用到的字串
<string name="app_name">WeChat</string>
然後設定text為
android:text="@string/app_name"
bottom.xml
bottom首先要加入一個黑色bar
android:background="@drawable/bottom_bar_9"
為使四個LinearLayout平鋪需設定
android:layout_width="0dp"
android:layout_weight="1"
activity_main.xml
<include layout="@layout/top" />
<FrameLayout
android:id="@+id/id_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<!--
高度為0,為了讓bottom顯示出來
android:layout_height="0dp"
android:layout_weight="1"
-->
</FrameLayout>
<include layout="@layout/bottom" />
include 在當前xml中新增一個新的xml檔案
重點!MainActivity.java
這本次實驗中,需要我們控制的功能事件並不多,只要點選底部,中間的fragment能夠相應的進行變換即可
做到兩點
- 監聽我們對底部控制元件的點選
- 將監聽到的底部點選事件,相應的傳遞給fragment的事件控制
//監聽只針對4個linerlayout
private void initEvent(){
mImgMessage.setOnClickListener(this);
mImgFriend.setOnClickListener(this);
mImgContact.setOnClickListener(this);
mImgSettings.setOnClickListener(this);
}
//fragment獲取監聽並且返回相應
private void selectFragment(int i){
FragmentTransaction transaction = fm.beginTransaction(); //再次發生fragment控制
hideFragment(transaction);
//設定圖示顏色轉換,頁面內容轉換
switch (i) {
case 0:
transaction.show(mTab01);
mImgMessage.setImageResource(R.drawable.tab_weixin_pressed);
break;
case 1:
transaction.show(mTab02);
mImgFriend.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case 2:
transaction.show(mTab03);
mImgContact.setImageResource(R.drawable.tab_address_pressed);
break;
case 3:
transaction.show(mTab04);
mImgSettings.setImageResource(R.drawable.tab_settings_pressed);
break;
default:
break;
}
transaction.commit();
}
程式碼連結: link.
踩雷:忘記換倉庫連結了(直接使用了test倉庫),導致出錯
相關文章
- 微信小程式-頁面連結微信小程式
- Java Web專案,Android和微信小程式的初始頁面配置JavaWebAndroid微信小程式
- BEM 實戰之微信個人頁面
- 微信小程式攜帶引數跳轉頁面/獲取頁面棧微信小程式
- 微信小程式 webview 頁面重新整理微信小程式WebView
- 模擬微信小程式頁面Page方法微信小程式
- 微信小程式之頁面攔截器微信小程式
- 微信小程式頁面跳轉傳參微信小程式
- 獲取微信小程式頁面路徑微信小程式
- SAP BSP, Java Web Project,Android和微信小程式的初始頁面設定JavaWebProjectAndroid微信小程式
- 直播系統app原始碼,Android studio 實現app登入註冊頁面APP原始碼Android
- Android 設定相關頁面Android
- 微信瀏覽器內禁止頁面回退返回瀏覽器
- 微信內 H5 頁面自定義分享H5
- H5頁面在微信端的分享H5
- 單頁面應用微信分享跳坑指南
- iOS開發之微信聊天頁面實現iOS
- 微信小程式頁面功能-----標籤切換微信小程式
- 微信小程式開發系列七:微信小程式的頁面跳轉微信小程式
- VUE開發微信H5頁面總結VueH5
- 數控開發 · 元件 · 仿微信的首頁面元件
- Android 頁面跳轉傳遞引數及頁面返回接收引數Android
- android高階頁面效果集錦Android
- 如何加速Android WebView頁面載入AndroidWebView
- Android 網頁開啟App進入對應頁面Android網頁APP
- 微信小程式WXML頁面常用語法(講解+示例)微信小程式XML
- 微信公眾號H5頁面–JqueryWeui元件使用H5jQueryUI元件
- 微信小程式中頁面間跳轉傳參方式微信小程式
- 微信公眾號H5頁面--JqueryWeui元件使用H5jQueryUI元件
- 清空微信瀏覽器清除快取debug頁面瀏覽器快取
- 微信php分享頁面自定義標題與內容PHP
- 微信小程式之匯出頁面為doc檔案微信小程式
- 微信H5頁儲存當前頁面為圖片踩坑H5
- Android Studio 2.0 to Android Studio 3.0Android
- android app 啟動第一個頁面AndroidAPP
- Android 頁面多狀態佈局管理Android
- 移動H5頁面微信支付踩坑之旅(微信支付、單頁面路由模擬、按鈕加鎖、輪詢等常見功能)H5路由
- android專案點餐app1:基礎功能:閃屏頁、登入頁面、註冊頁面AndroidAPP