2. 程式人生 > >Android—（實現仿網易新聞的頂部導航指示器）

Android—（實現仿網易新聞的頂部導航指示器）

阿新 • • 發佈：2018-12-18
  1. public class MainActivity extends AppCompatActivity implements View.OnClickListener {  
  2.     private List<View> listViews;  
  3.     private ImageView cursorIv;  
  4.     private TextView tab01, tab02, tab03;  
  5.     private TextView[] titles;  
  6.     private ViewPager viewPager;  
  7.     /** 
  8.      * 偏移量（手機螢幕寬度 / 選項卡總數 - 選項卡長度） / 2 
  9.      */  
  10.     private int offset = 0;  
  11.     /** 
  12.      * 下劃線圖片寬度 
  13.      */  
  14.     private int lineWidth;  
  15.     /** 
  16.      * 當前選項卡的位置 
  17.      */  
  18.     private int current_index = 0;  
  19.     /** 
  20.      * 選項卡總數 
  21.      */  
  22.     private static final int TAB_COUNT = 3;  
  23.     private static final int TAB_0 = 0;  
  24.     private static final int TAB_1 = 1;  
  25.     private static final int TAB_2 = 2;  
  26.     @Override  
  27.     protected void onCreate(Bundle savedInstanceState) {  
  28.         super.onCreate(savedInstanceState);  
  29.         setContentView(R.layout.activity_main);  
  30.         initUI();  
  31.         initImageView();  
  32.         initVPager();  
  33.     }  
  34.     /** 
  35.      * 初始化佈局和監聽 
  36.      */  
  37.     private void initUI() {  
  38.         viewPager = (ViewPager) findViewById(R.id.vPager);  
  39.         cursorIv = (ImageView) findViewById(R.id.iv_tab_bottom_img);  
  40.         tab01 = (TextView) findViewById(R.id.tv01);  
  41.         tab02 = (TextView) findViewById(R.id.tv02);  
  42.         tab03 = (TextView) findViewById(R.id.tv03);  
  43.         tab01.setOnClickListener(this);  
  44.         tab02.setOnClickListener(this);  
  45.         tab03.setOnClickListener(this);  
  46.     }  
  47.     /** 
  48.      * 初始化底部下劃線 
  49.      */  
  50.     private void initImageView() {  
  51.         // 獲取圖片寬度  
  52.         lineWidth = BitmapFactory.decodeResource(getResources(), R.drawable.ic_orange_line).getWidth();  
  53.         // Android提供的DisplayMetrics可以很方便的獲取螢幕解析度  
  54.         DisplayMetrics dm = new DisplayMetrics();  
  55.         getWindowManager().getDefaultDisplay().getMetrics(dm);  
  56.         int screenW = dm.widthPixels; // 獲取解析度寬度  
  57.         offset = (screenW / TAB_COUNT - lineWidth) / 2;  // 計算偏移值  
  58.         Matrix matrix = new Matrix();  
  59.         matrix.postTranslate(offset, 0);  
  60.         // 設定下劃線初始位置  
  61.         cursorIv.setImageMatrix(matrix);  
  62.     }  
  63.     /** 
  64.      * 初始化ViewPager並新增監聽事件 
  65.      */  
  66.     private void initVPager() {  
  67.         listViews = new ArrayList<>();  
  68.         LayoutInflater mInflater = getLayoutInflater();  
  69.         listViews.add(mInflater.inflate(R.layout.tab_01, null));  
  70.         listViews.add(mInflater.inflate(R.layout.tab_02, null));  
  71.         listViews.add(mInflater.inflate(R.layout.tab_03, null));  
  72.         viewPager.setAdapter(new MyPagerAdapter(listViews));  
  73.         viewPager.setCurrentItem(0);  
  74.         titles = new TextView[]{tab01, tab02, tab03};  
  75.         viewPager.setOffscreenPageLimit(titles.length);  
  76.         viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {  
  77.             int one = offset * 2 + lineWidth;  
  78.             @Override  
  79.             public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {  
  80.             }  
  81.             @Override  
  82.             public void onPageSelected(int position) {  
  83.                 // 下劃線開始移動前的位置  
  84.                 float fromX = one * current_index;  
  85.                 // 下劃線移動完畢後的位置  
  86.                 float toX = one * position;  
  87.                 Animation animation = new TranslateAnimation(fromX, toX, 0, 0);  
  88.                 animation.setFillAfter(true);  
  89.                 animation.setDuration(500);  
  90.                 // 給圖片新增動畫  
  91.                 cursorIv.startAnimation(animation);  
  92.                 // 當前Tab的字型變成紅色  
  93.                 titles[position].setTextColor(Color.RED);  
  94.                 titles[current_index].setTextColor(Color.BLACK);  
  95.                 current_index = position;  
  96.             }  
  97.             @Override  
  98.             public void onPageScrollStateChanged(int state) {  
  99.             }  
  100.         });  
  101.     }  
  102.     /** 
  103.      * ViewPager介面卡 
  104.      */  
  105.     public class MyPagerAdapter extends PagerAdapter {  
  106.         public List<View> mListViews;  
  107.         public MyPagerAdapter(List<View> mListViews) {  
  108.             this.mListViews = mListViews;  
  109.         }  
  110.         @Override  
  111.         public void destroyItem(ViewGroup container, int position, Object object) {  
  112.             container.removeView(mListViews.get(position));  
  113.         }  
  114.         @Override  
  115.         public Object instantiateItem(ViewGroup container, int position) {  
  116.             container.addView(mListViews.get(position), 0);  
  117.             return mListViews.get(position);  
  118.         }  
  119.         @Override  
  120.         public int getCount() {  
  121.             return mListViews.size();  
  122.         }  
  123.         @Override  
  124.         public boolean isViewFromObject(View view, Object object) {  
  125.             return view == object;  
  126.         }  
  127.     }  
  128.     @Override  
  129.     public void onClick(View v) {  
  130.         switch (v.getId()) {  
  131.             case R.id.tv01:  
  132.                 // 避免重複載入  
  133.                 if (viewPager.getCurrentItem() != TAB_0) {  
  134.                     viewPager.setCurrentItem(TAB_0);  
  135.                 }  
  136.                 break;  
  137.             case R.id.tv02:  
  138.                 if (viewPager.getCurrentItem() != TAB_1) {  
  139.                     viewPager.setCurrentItem(TAB_1);  
  140.                 }  
  141.                 break;  
  142.             case R.id.tv03:  
  143.                 if (viewPager.getCurrentItem() != TAB_2) {  
  144.                     viewPager.setCurrentItem(TAB_2);  
  145.                 }  
  146.                 break;  
  147.         }  
  148.     }  
  149. }  

相關推薦

Android—（實現仿網易新聞的頂部導航指示器）

public class MainActivity extends AppCompatActivity implements View.OnClickListener {       private List<View> listViews;       private ImageView

Android實現仿網易首頁選項卡動態滑動效果

本文會實現一個類似網易新聞（不說網易新聞大家可能不知道大概是什麼樣子）點選超多選項卡，選項卡動態滑動的效果。  首先來看看佈局，就是用HorizontalScrollView控制元件來實現滑動的效果，裡面包含了一個佈局。 <code class="hljs xml has-numbering" st

android網易頂部導航欄demo

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

微信小程式 --- CSS實現仿網易雲音樂播放介面效果（黑膠唱片與唱針純CSS實現）

下面程式碼的效果是網易雲音樂唱針和黑膠唱片的CSS效果實現方式，播放等並沒貼出來 實現效果的範圍 動態圖效果預覽： stylusW,panW是獲取系統寬度計算後的引數 w

HTML自定義滾動條（仿網易郵箱滾動條）轉載

基本上 fma 內容 scrollbar color http code %20 water 它是使用CSS中的偽元素來實現的，主要由以下三個來完成： 1. -webkit-scrollbar：定義滾動條的樣式，如長寬。 2. -webkit-scrollbar-thumb

HTML自定義滾動條（仿網易郵箱滾動條）

自定義滾動條 在web前端非常火爆的今天，好的介面可以給人們很好的體驗。瀏覽器的滾動條總是千篇一律，那麼滾動條是否可以自定義呢？網上好多自定義滾動條通過CSS樣式來設定的，但是這種做法只有IE支援，那麼谷歌瀏覽器是否也可以自定義滾動條呢？ 前一段時間瀏覽網易郵箱的時候發現它上面的滾

面經合集（阿里、網易、拼多多）

阿里菜鳥 一面 自我介紹（處女面，跑上樓時候已經氣喘吁吁，甚至都不知道如何自我介紹，介紹了一分鐘我尬場了） RxJava、EventBus底層原理（一定程度是自己挖坑用過這些，然後讓我跳的） 如何自我實現一個網路請求框架 用過React Native沒。（自己用過I

Android5.0以上實現全透明的狀態列（仿網易雲介面）

Android4.4以上要實現沉浸式狀態列可以通過在style檔案設定 <style name="AppTheme.NoActionBar"> <item name="windowActionBar">false</item&g

基於Node.js+MySQL開發的開源微信小程序B2C商城（頁面高仿網易嚴選）

收貨地址 lec load alt conf print 商品列表 pac data 高仿網易嚴選的微信小程序商城（微信小程序客戶端） 界面高仿網易嚴選商城(主要是2016年wap版) 測試數據采集自網易嚴選商城 功能和數據庫參考ecshop 服務端api基於Ｎode.j

C# WPF 仿網易雲音樂（PC）左側菜單右側內容效果

ups tle onu urn mar mat 難點 -c nat 我們要做的效果是這樣的，左側是可折疊的菜單欄，右側是內容區域，點擊左側的菜單項右側內容區域則相應地切換。這篇博客標題起得比較隨意了，因為很多軟件、網站都有這種布局效果，所以請忽略。 wpf實現的話，我的辦

Android 仿網易雲首頁來回滑那種效果

思路:中間ViewPager 畫廊,底部背景ImageView 高斯模糊   過程很曲折:參考了很多 比如網易雲音樂播放器頁面 也有類似效果 底部做成ViewPager 也可以 但是切換動畫 pagertransform 很難弄到合適的 所以最後決定還是ImageVi

C# WPF 低仿網易雲音樂（PC）Banner動畫控制元件

原文: C# WPF 低仿網易雲音樂（PC）Banner動畫控制元件 由於技術有限沒能做到一模一樣的動畫，只是粗略地做了一下。動畫有點生硬，還有就是沒做出網易雲音樂的立體感。程式碼非常簡單粗暴，而且我也寫有很多註釋，這裡就不多囉嗦了，直接貼程式碼。 算了，囉嗦幾句。原理是這樣的，在自定義使用者控制元件內新

C# WPF 低仿網易雲音樂（PC）歌詞控制元件

原文: C# WPF 低仿網易雲音樂（PC）歌詞控制元件 提醒：本篇部落格記錄了修改的過程，廢話比較多，需要專案原始碼和看演示效果的直接拉到文章最底部~   網易雲音樂獲取歌詞的api地址 http://music.163.com/api/song/media?id=歌曲ID 填

Android 開源框架ActionBarSherlock 和 ViewPager 仿網易新聞客戶端

                大家都知道Android的ActionBar是在3.0以上才有的，那麼在3.0以下呢，google並沒有給我提供在3.0以下支援ActionBar的包，但是外國的大牛JakeWharton實現了在3.0以下使用ActionBar, JakeWharton這位大牛是ActionB

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

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

安卓仿網易雲介面的本地音樂播放器的實現

前言：讀研究生之前，老闆讓學IOS，老老實實看了一個學期的IOS（在這裡強烈安利一下騰訊課堂的小碼哥IOS視訊，基本剛開始只需要10塊買第一部，後面的就可以用可視幣來兌換了，質量還不錯，能學到很多東西，看三部基本IOS就能入門了），結果開學提前兩個月被叫去幹活，一開會，說IO

Android應用經典主介面框架之二:仿網易新聞客戶端、CSDN 客戶端 (Fragment ViewPager)

第二種主介面風格則是以網易新聞、鳳凰新聞以及新推出的新浪部落格(閱讀版)為代表，使用ViewPager+Fragment，即ViewPager裡介面卡裡放的不是一般的View，而是Fragment。所以介面卡不能繼承PagerAdapter，而要繼承FragmentPager

仿網易新聞的頁面（ViewPager作為RecyclerView的Header）

需求 > 想實現一個仿網易新聞的頁面，上面是輪播的圖片，下面是 RecyclerView 顯示新聞列表。 錯誤方法 <?xml version="1.0" encoding="utf-8"?> <LinearLayout

Android仿網易雲音樂播放介面

概述 網易雲音樂是一款非常優秀的音樂播放器，尤其是播放介面，使用唱盤機風格，顯得格外古典優雅。這裡拋磚引玉，原文地址：http://www.jianshu.com/p/cb54990219d9 首先來看一下網易的播放效果。 要實現上面的功能，我們需要對介面進行一個拆分，

Android仿網易雲音樂中鎖屏後在開鎖介面插屏功能

這個功能實現起來應該有多種方式，可以使用WindowManager建立window的方法。 在本文中我們使用開啟一個Activity來充當鎖屏介面。 實現步驟有以下兩步： 一、後臺開啟一個Service，監聽螢幕鎖屏廣播。 二、當螢幕熄滅，收到廣播後，開啟充當鎖屏介面的Activity。 實