1. 程式人生 > >Android仿微信底部選單欄+頂部選單欄

Android仿微信底部選單欄+頂部選單欄

        本文要實現仿微信微信底部選單欄+頂部選單欄,採用ViewPage來做,每一個page對應一個XML,當手指在ViewPage左右滑動時,就相應顯示不同的page(其實就是xml)並且同時改變底部選單按鈕的圖片變暗或變亮,同時如果點選底部選單按鈕,左右滑動page(其實就是xml)並且改變相應按鈕的亮度。


一、佈局

1、頂部選單佈局,命名為top_layout.xml

  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="45dp"
  5.     android:background="@drawable/title_bar">
  6.     <TextView
  7.         android:layout_width="wrap_content"
  8.         android:layout_height="wrap_content"
  9.         android:layout_marginLeft="20dp"
  10.         android:text="微信"
  11.         android:layout_centerVertical="true"
  12.         android:textColor="#ffffff"
  13.         android:textSize="20sp"
  14.         android:textStyle="bold"
  15.         />
  16.     <ImageButton
  17.         android:id="@+id/top_add"
  18.         android:layout_width="wrap_content"
  19.         android:layout_height="wrap_content"
  20.         android:background="@drawable/top_add"
  21.         android:layout_centerVertical="true"
  22.         android:layout_alignParentRight="true"
  23.         />
  24.        <ImageButton
  25.         android:id="@+id/top_search"
  26.         android:layout_width="wrap_content"
  27.         android:layout_height="wrap_content"
  28.         android:background="@drawable/top_search"
  29.         android:layout_centerVertical="true"
  30.         android:layout_toLeftOf="@id/top_add"
  31.         />
  32. </RelativeLayout>
效果:


2、底部選單佈局bottom_layout.xml

  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="60dp"
  5.     android:background="@drawable/bottom_bar"
  6.     android:orientation="horizontal">
  7.     <LinearLayout
  8.         android:id="@+id/id_tab_weixin"
  9.         android:layout_width="0dp"
  10.         android:layout_height="match_parent"
  11.         android:layout_weight="1"
  12.         android:gravity="center"
  13.         android:orientation="vertical">
  14.  <!-- android:clickable="false" 是為了防止ImageButton截取了觸控事件 ,這裡事件要給它的上一級linearlayout-->
  15.         <ImageButton
  16.              android:id="@+id/id_tab_weixin_img"
  17.             android:layout_width="wrap_content"
  18.             android:layout_height="wrap_content"
  19.             android:background="#00000000"
  20.             android:clickable="false"
  21.             android:src="@drawable/tab_weixin_pressed"/>
  22.         <TextView
  23.             android:layout_width="wrap_content"
  24.             android:layout_height="wrap_content"
  25.             android:text="微信"
  26.           />
  27.     </LinearLayout>
  28.     <LinearLayout
  29.          android:id="@+id/id_tab_address"
  30.         android:layout_width="0dp"
  31.         android:layout_height="match_parent"
  32.         android:layout_weight="1"
  33.         android:gravity="center"
  34.         android:orientation="vertical">
  35.         <ImageButton
  36.              android:id="@+id/id_tab_address_img"
  37.             android:layout_width="wrap_content"
  38.             android:layout_height="wrap_content"
  39.             android:background="#00000000"
  40.              android:clickable="false"
  41.             android:src="@drawable/tab_address_normal"/>
  42.         <TextView
  43.             android:layout_width="wrap_content"
  44.             android:layout_height="wrap_content"
  45.             android:text="通訊錄"
  46.           />
  47.     </LinearLayout>
  48.     <LinearLayout
  49.         android:id="@+id/id_tab_frd"
  50.         android:layout_width="0dp"
  51.         android:layout_height="match_parent"
  52.         android:layout_weight="1"
  53. 相關推薦

    Android仿底部選單+今日頭條頂部導航

    背景 Android應用幾乎都會用到底部選單欄,在Material Design還沒有出來之前,TabHost等技術一直佔主流,現在Google新sdk中提供了TabLayout類可以便捷的做出底部選單欄效果。 本節我們實現兩種主要的Tab效果: 仿微信底部選

    Android仿底部選單+頂部選單

            本文要實現仿微信微信底部選單欄+頂部選單欄,採用ViewPage來做,每一個page對應一個XML,當手指在ViewPage左右滑動時,就相應顯示不同的page(其實就是xml)並且同時改變底部選單按鈕的圖片變暗或變亮,同時如果點選底部選單按鈕,左

    Android仿底部實現Tab選項卡切換效果

    在網上看了比較多的關於Tab的教程,發現都很雜亂。比較多的用法是用TitlePagerTabStrip和ViewPaper。不過TitlePagerTabStrip有個很大的缺陷,Tab裡面的內容剛進去是沒有的,要滑一次才能加載出來。而且滑動的時候,Tab裡面的內容位置

    Android專案導航仿底部導航TabLayout+ViewPager+Fragment

    一、實現效果: 二、依賴jar包: compile 'com.android.support:design:24+'三、專案工程結構: 四、XML佈局 activity_main.xml佈局: <?xml version="1.0" encoding="u

    Android仿右側頂部下拉對話方塊

    我們使用微信都知道,其右側頂部有一個下拉對話方塊,我們可以執行新增好友,掃一掃等功能,今天我們就來模仿實現一下這個功能(實現的方式有很多種,我今天只說一種藉助透明主題Activity的方式實現);實現的效果如下: 下面就來說一說實現的思路(重要): 第一步:建立彈

    Android 仿介面 使用RadioGroup+ViewPager實現底部按鈕切換以及滑動

    先來效果圖哈哈 ![在這裡插入圖片描述](https://img-blog.csdn.net/2018100916182717?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNjcwN

    簡單的自定義BottomBar-仿底部導航

    今天寫一個簡單的自定義的BottomBar。 圖片文字都是比較隨意的,具體實現中自己可以修改。下面是實現圖: 首先我們現在佈局中把想要顯示的整個介面的基本佈局搭建成功。(其實主要在於設定你的Tab。 如果專案中用到Bootmbar的地方比較多 或者是你想複用性高一點的話

    Android仿今日頭條首頁的頂部標籤底部導航

    //主頁 public class MainActivity extends AppCompatActivity implements View.OnClickListener { //初始化fragment private HomePageFragment mHomePageFragment; pr

    html css 仿底部自定義選單

             最近幾個月一直從事微信開發,從剛開始的懵懂漸漸成長了一點。今天覺得微信底部自定義選單,如果能在html的頁面上也能顯示就好了. 記得以前看過某個網頁有類似效果.查找了該網頁的css.  ok現在html css 實現微信自定義選單效果. 不多說直接上程式碼

    Android 仿通訊錄 導航分組列表-下】自定義View為RecyclerView打造右側索引導航IndexBar

    本篇文章已授權微信公眾號 guolin_blog (郭霖)獨家釋出 一 概述 在上篇文章(http://blog.csdn.net/zxt0601/article/details/52355199)裡,我們用ItemDecoration為Recy

    Android 仿調用第三方應用導航(百度,高德、騰訊)

    detail decorview fcm onclick api 描述 log def repr 實現目標 先來一張微信功能截圖看看要做什麽 其實就是有一個目的地,點擊目的地的時候彈出可選擇的應用進行導航。 大腦動一下,要實現這個功能應該大體分成兩步: 底部彈出可選的地

    android仿紅包動畫、Kotlin綜合應用、Xposed模塊、炫酷下拉視覺、UC瀏覽器滑動動畫等源碼

    架構分析 body oot googl short html 博文 urn 管理 Android精選源碼 仿微信打開紅包旋轉動畫 使用Kotlin編寫的Android應用,內容你想象不到 Android手機上的免Root Android系統日誌Viewer 一個能讓微

    android 仿表情雨下落!

    block private www 事件觸發 dog ase 之間 apk ces 文章鏈接:https://mp.weixin.qq.com/s/yQXn-YjEFSW1X7A7CcuaVg 眾所周知,微信聊天中我們輸入一些關鍵詞會有表情雨下落,比如輸入「生日快樂」「

    android仿、QQ等聊天介面,實現點選輸入框彈出軟鍵盤、點選其他區域收起軟鍵盤,預設滑動至最低端

    如圖所示,點選輸入框及選擇圖片和傳送按鈕時軟鍵盤顯示且不消失,點選其他區域,則隱藏軟鍵盤。 主要程式碼如下: override fun dispatchTouchEvent(ev: MotionEvent?): Boolean { if (ev!!.getAction() ==

    Android 仿qq未讀訊息角標 BadgeView的使用

    新增依賴: compile 'q.rorbin:badgeview:1.1.3' 使用方法: TextView textview = (TextView) findViewById(R.id.textview); new QBadgeView(this)

    Android仿首頁下拉顯示小程式列表

    花點時間重新熟悉一下AndroidUI方面的東西,把古董PullToRefreshView又擼了一遍,技術這種東西真是忘得快啊...在基礎上新增一點東西,粗糙地實現了仿微信首頁下拉顯示小程式列表的樣式,是的,粗糙粗糙... PullToRefreshView原始的實現思路: 1.垂直方向的L

    Android仿文章懸浮窗效果

    序言 前些日子跟朋友聊天,朋友Z果粉,前些天更新了微信,說微信出了個好方便的功能啊,我問是啥功能啊,看看我大Android有沒有,他說現在閱讀公眾號文章如果有人給你發微信你可以把這篇文章當作懸浮窗懸浮起來,方便你聊完天不用找繼續閱讀,聽完是不是覺得這叫啥啊,我大

    Android實現底部的帶訊息提示數量

    今天一朋友問我一個佈局檔案的實現,就是底部能帶訊息提示的TabHost的實現。其實這個效果之前早就想過,當初的想法就是肯定猜到了用FrameLayout來實現,那麼今天就和大家分享這樣的一個成果吧。而且像這種應用非常的廣泛。好吧有圖有真相,進入正題吧。 實現效果:  

    Android 仿錄製短視訊(不使用 FFmpeg)

    轉載請標明出處與作者:https://www.jianshu.com/p/2cb7b0110fde 專案中原本就有錄製短視訊的功能,使用的是 # qdrzwd/VideoRecorder 這個專案,但是該專案不支援 targetSdkVersion 22以上的版本,而現在各大

    Android仿朋友圈九宮格圖片展示自定義控制元件,支援縮放動畫~

    一直對微信朋友圈九宮格圖片顯示控制元件比較好奇,找到一篇介紹相關騷操作的部落格 部落格雖好但是不夠完美,缺少點選圖片預覽頁面和縮放動畫,作為一個不斷追求完美主義的人,我想把這個控制元件結合到專案中而不是單純作為一個控制元件。 下面是我的實現效果圖: (