2. 程式人生 > >android網易頂部導航欄demo

android網易頂部導航欄demo

阿新 • • 發佈：2019-01-09

       隨著時間的推移現在的軟體要求顯示的內容越來越多，所以要在小的螢幕上能夠更好的顯示更多的內容，首先我們會想到底部選單欄，但是有時候想網易新聞要顯示的內容太多，而且又想在主頁面全部顯示出來，所以有加了頂部導航欄，但是Android這樣的移動裝置記憶體是受限的，那麼多介面快取到記憶體中，很容易導致記憶體溢位，這個是比較致命的，所以不得不考慮。雖然我在之前也做過網易的頂部導航欄但是哪種方式並不好，就像使用viewpager做一些複雜的介面由於圖片佔用記憶體過多，很容易導致記憶體溢位，學習了今天的內容大家做一下對比相信就有所體會。

              先看一下今天要實現的效果：

      

          至於頂部導航的具體要用到的圖片和佈局大家自己調整。

        由於前面已經介紹了底部選單欄了，所以一些重複性的程式碼就不貼上來了，最後我也會把下載地址貼上大家有興趣自行下載。

        首先看一些頂部導航欄的佈局檔案：

  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="fill_parent"
  4.     android:layout_height
    ="fill_parent"
  5.     android:orientation="vertical">
  6.     <includelayout="@layout/head"/>
  7.   <LinearLayout
  8.     android:layout_width="fill_parent"
  9.     android:layout_height="wrap_content">
  10.             <RadioGroup
  11.                 android:id="@+id/add_tab_group"
  12.                 android:layout_width
    ="fill_parent"
  13.                 android:layout_height="wrap_content"
  14.                 android:gravity="center"
  15.                 android:paddingTop="6dp"
  16.                 android:paddingBottom="6dp"
  17.                 android:background="@drawable/big_button_up"
  18.                 android:orientation="horizontal"
  19.                  >
  20.                 <RadioButton
  21.                     android:id="@+id/main_tab_addExam"
  22.                     style="@style/MMTabButton1"
  23.                     android:layout_weight="1.0"
  24.                     android:checked="true"
  25.                     android:text="新增考試"/>
  26.                 <RadioButton
  27.                     android:id="@+id/main_tab_myExam"
  28.                     style="@style/MMTabButton1"
  29.                     android:layout_weight="1.0"
  30.                     android:text="我的考試"/>
  31.                 <RadioButton
  32.                     android:id="@+id/main_tab_message"
  33.                     style="@style/MMTabButton1"
  34.                     android:layout_weight="1.0"
  35.                     android:text="我的通知"/>
  36.                 <RadioButton
  37.                     android:id="@+id/main_tab_testing"
  38.                     style="@style/MMTabButton1"
  39.                     android:layout_weight="1.0"
  40.                     android:text="測試"/>
  41.                 <RadioButton
  42.                     android:id="@+id/main_tab_settings"
  43.                     style="@style/MMTabButton1"
  44.                     android:layout_weight="1.0"
  45.                     android:text="設定"/>
  46.             </RadioGroup>
  47.        </LinearLayout>
  48.     <LinearLayout
  49.         android:id="@+id/container"
  50.         android:layout_width="fill_parent"
  51.         android:layout_height="fill_parent"
  52.         android:layout_weight="1">
  53.     </LinearLayout>
  54. </LinearLayout>

      具體寬度樣式大家可以自己調節，然後看一下核心類：
  1. import android.app.ActivityGroup;  
  2. import android.app.AlertDialog;  
  3. import android.app.LocalActivityManager;  
  4. import android.content.Context;  
  5. import android.content.DialogInterface;  
  6. import android.content.Intent;  
  7. import android.os.Bundle;  
  8. import android.view.KeyEvent;  
  9. import android.view.View;  
  10. import android.view.animation.Animation;  
  11. import android.view.animation.AnimationUtils;  
  12. import android.widget.Button;  
  13. import android.widget.LinearLayout;  
  14. import android.widget.RadioGroup;  
  15. import android.widget.TextView;  
  16. import android.widget.RadioGroup.OnCheckedChangeListener;  
  17. public class AddExamActivity extends ActivityGroup {  
  18.     protected Button btn_leftTop, btn_rightTop;  
  19.     protected TextView tv_head;  
  20.     private  static LocalActivityManager manager;  
  21.     private  RadioGroup radioGroup;  
  22.     private  static LinearLayout container;  
  23.     public  static Context context;  
  24.     @Override  
  25.     protected void onCreate(Bundle savedInstanceState) {  
  26.         // TODO Auto-generated method stub  
  27.         super.onCreate(savedInstanceState);  
  28.         setContentView(R.layout.addexam);  
  29.         context=this;  
  30.         initHead();  
  31.         manager=getLocalActivityManager();  
  32.         container= (LinearLayout)findViewById(R.id.container);  
  33.         radioGroup=(RadioGroup) this.findViewById(R.id.add_tab_group);  
  34.         container.removeAllViews();  
  35.         container.addView(manager.startActivity(  
  36.                 "PAGE_0",  
  37.                 new Intent(context, MyExamActivity.class).addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP))  
  38.                 .getDecorView());  
  39.         radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {  
  40.             @Override  
  41.             public void onCheckedChanged(RadioGroup group, int checkedId) {  
  42.                 // TODO Auto-generated method stub  
  43.                 switch (checkedId) {  
  44.                 case R.id.main_tab_addExam://新增考試  
  45.                     container.removeAllViews();  
  46.                     container.addView(manager.startActivity(  
  47.                             "PAGE_0",  
  48.                             new Intent(context, MyExamActivity.class).addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP))  
  49.                             .getDecorView());  
  50.                     break;  
  51.                 case R.id.main_tab_myExam://我的考試  
  52.                     container.removeAllViews();  
  53.                     container.addView(manager.startActivity(  
  54.                             "PAGE_1",  
  55.                             new Intent(context, MyMessageActivity.class).addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP))  
  56.                             .getDecorView());  
  57.                     break;  
  58.                 case R.id.main_tab_message://我的通知  
  59.                     container.removeAllViews();  
  60.                     container.addView(manager.startActivity(  
  61.                             "PAGE_2",  
  62.                             new Intent(context, SettingActivity.class).addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP))  
  63.                             .getDecorView());  
  64.                     break;  
  65.                 case R.id.main_tab_testing://測試  
  66.                     container.removeAllViews();  
  67.                     container.addView(manager.startActivity(  
  68.                             "PAGE_3",  
  69.                             new Intent(context, TestingActivity.class).addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP))  
  70.                             .getDecorView());  
  71.                     break;  
  72.                 case R.id.main_tab_settings://設定  
  73.                     container.removeAllViews();  
  74.                     container.addView(manager.startActivity(  
  75.                             "PAGE_4",  
  76.                             new Intent(context, MyExamActivity.class).addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP))  
  77.                             .getDecorView());  
  78.                     break;  
  79.                 default:  
  80.                     //tabHost.setCurrentTabByTag("我的考試");  
  81.                     break;  
  82.                 }  
  83.             }  
  84.         });  
  85.     }  
  86.     public static void changeTo(){  
  87.         Animation slideLeftIn = AnimationUtils.loadAnimation(context, R.anim.slide_bottom_in_no_alpha);  
  88.         container.removeAllViews();  
  89.         container.addView(manager.startActivity(  
  90.                 "PAGE_4",  
  91.                 new Intent(context, MyExamActivity.class).addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP))  
  92.                 .getDecorView());  
  93.         container.startAnimation(slideLeftIn);  
  94.     }  

  95. 相關推薦

    android網易頂部導航欄demo

           隨著時間的推移現在的軟體要求顯示的內容越來越多，所以要在小的螢幕上能夠更好的顯示更多的內容，首先我們會想到底部選單欄，但是有時候想網易新聞要顯示的內容太多，而且又想在主頁面全部顯示出來，所以有加了頂部導航欄，但是Android這樣的移動裝置記憶體是受限的，那

    mono for android 自定義titleBar Actionbar 頂部導航欄 修改 樣式 學習

     以前的我是沒有做筆記的習慣的，學習了後覺得自己能記住，但是最近發現很多學的東西都忘記了，所有現在一有新的知識，就記下來吧。  最近又做一個mono for android 的專案 這次調整比較大，上次做的點餐系統很好用 ，但是做的時候沒有做筆記很多東西都忘記了，這次我把專案涉及到的知識傳到部落格上，方便記

    Android之仿今日頭條頂部導航欄效果

    隨著時間的推移現在的軟體要求顯示的內容越來越多，所以要在小的螢幕上能夠更好的顯示更多的內容，首先我們會想到底部選單欄，但是有時候像今日頭條新聞客戶端要顯示的內容太多，而且又想在主介面全部顯示出來，所以有加了頂部導航欄。 今日頭條頂部導航欄區域的主要部分是一個導航選單。導航選

    android頂部導航欄的封裝

    android中每個頁面基本上都有頂部導航，android中頂部導航有actionbar，但actionbar一方面要向下相容問題，另一方面很多時候修改樣式比較繁瑣，自定義的actionbar也需要寫很多東西。對於頂部導航，有兩個比較可行的方式： 可以自己封

    android 自定義組合控制元件 頂部導航欄

        在軟體開發過程中，經常見到，就是APP 的標題欄樣式幾乎都是一樣的，只是文字不同而已，兩邊圖示不同。為了減少重複程式碼，提高效率， 方便大家使用，我們把標題欄通過組合的方式定義成一個控制元件。 例下圖：                                

    Android——TabLayout頂部導航欄間距調整

     <android.support.design.widget.TabLayout android:id="@+id/home_tabLayout" android:layout_width

    我的第一個flutter demo 頂部導航欄加網路請求的基本使用

    上圖是要實現的效果，廢話不多說上程式碼。。由於涉及到公司的介面，所以程式碼裡涉及這塊就不貼出來了。1 首先建立一個類 繼承 StatelessWidget 由於是我的模組 就命名為MineLayoutclass ReadLayout extends StatelessWidg

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

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

    Android 網易雲信整合（二）即時通訊Demo分析

    因為公司需要接網易雲信的實時音視訊部分，下載了網易雲信的即時通訊的Demo，能滿足基本要求。下面是我自己畫的關於網易雲信Demo的一個流程圖，可以更方便快捷的理解，網易雲信demo的跳轉流程，額，其實我主要畫的是快速找到音視訊的跳轉。用xmind畫的有點太長，讓我截成了3張圖

    TabLayout用法，android頂部導航欄，android底部導航欄

    轉載出處：http://blog.csdn.net/tianyaleixiaowu/article/details/50820257 TabLayout是android.support.design裡的一個控制元件，使用它可以很方便的做出頂部導航和底部導航。

    Android 動態隱藏顯示導航欄，狀態欄

    sets tab mil repeat art gif ava hide sticky Talk is cheap, show me the code.--Linus TorvaldsOkay, here:一、導航欄：[java] view plain copyprivat

    MUI學習02-頂部導航欄

    連接 工具條 -a -c title dcl article header 選項卡 建議：先看一下MUI註意事項 連接：http://ask.dcloud.net.cn/article/122 固定欄靠前 所謂的固定欄，也就是帶有.mui-bar屬性的節點，都是基於fix

    ionic3在ios上頂部導航欄顯示不正常--據頂部有空隙條

    在專案中遇到這樣的問題： 如圖： 頂部導航平白多了一道白條，而且這個只是在ios的真機或者是模擬器上才顯示，用chrome和android真機是一點問題沒有，於是就重新下載了一個tabs專案，執行，也沒有問題，一點點兒找原因才發現是因為覺得不需要頂部導航，就給去掉了，於是，解決的

    Android狀態列和導航欄

    1.隱藏狀態列或導航欄 View decordView = getWindow().getDecorView(); /*SYSTEM_UI_FLAG_HIDE_NAVIGATION和SYSTEM_UI_FLAG_FULLSCREEN 分別代表隱藏導航欄和狀態列

    Android全面屏虛擬導航欄適配

    手機正朝著全面屏的方向演進，與此同時也給開發者帶來了很多適配上的新問題，虛擬導航欄就是其中一個。最近在糗百的專案中，就有相關的適配問題，我查閱了目前關於虛擬導航欄適配的相關文章，基本上在全面屏手機裡都有不同程度的失效，這使我不禁開始思考這個問題， 為什麼我們對虛擬導航欄的判斷在全面屏中失效

    卡拉OK歌詞原理和實現高仿Android網易雲音樂

    大家好，我們是愛學啊，繼上一篇講解了【LRC歌詞原理和實現高仿Android網易雲音樂】，今天給大家帶來一篇關於卡拉OK歌詞原理和在Android上如何實現歌詞逐字滾動的效果，本文來自【Android開發專案實戰我的雲音樂】課程。 效果圖 相信大家都懂一張圖勝過千言萬語。 效果和現在市面上大部分播放

    LRC歌詞原理和實現高仿Android網易雲音樂

    大家好，我們是愛學啊，今天給大家帶來一篇關於LRC歌詞原理和在Android上如何實現歌詞逐行滾動的效果，本文來自【Android開發專案實戰我的雲音樂】課程；逐字滾動下一篇文章講解。 效果圖 相信大家都懂一張圖勝過千言萬語。 效果和現在市面上大部分播放器差不多，當然如果要運用到商業專案中，肯定還需

    技術小白之記錄微信小程式頂部導航欄

    現在來說說頂部導航欄的程式碼，先來看看簡單的頂部導航欄的截圖： 可以從上面的圖片看到有寫著[簡介]和[試看]的導航欄內容，下面來記錄下程式碼過程： wxml <!--導航條--> <view class="navbar"> <text wx:for

    Android中的底部導航欄切換TabContainerView

    前言：在GitHub上看到一個框架，實現底部導航欄切換，感覺不錯，就在這裡總結一下。 第一步：準備工作。 在project的build.gradle中新增： allprojects { repositories { ... maven

    React Native 一個小專案其中一些主要功能實現 （頂部導航欄（可滑動）,網路解析，上拉重新整理，下拉載入）

    //網路解析 import React, { Component } from "react"; import { View, Text, TouchableOpacity } from "react-native"; import RefreshListView, { Re