2. 程式人生 > >Android 仿今日頭條首頁標題欄效果

Android 仿今日頭條首頁標題欄效果

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

今天帶來的是仿今日頭條首頁的聯動滑動效果，廢話不多說，先上效果圖：
這裡寫圖片描述

思路：
做這個我們需要實現的效果有
1、滑動內容區域，標題欄會有變化來顯示當前所處的位置。
2、點選標題欄，內容區域也會隨著滑動並跳到指定欄，標題欄會移動到螢幕中間。
3、當標題欄過多時，我們可以滑動標題欄找到超出螢幕的欄。

要實現上面三個問題，我採用的是標題欄用HorizontalScrollView來實現，內容區域用ViewPager 來實現，力求達到最簡單的實現方式。

首先HorizontalScrollView 能夠水平方向拖動，只要在裡面包含一個水平方向的LinearLayout，然後LinearLayout裡面包含TextView，然後把HorizontalScrollView的HorizontalScrollBarEnabled設定為false，用於隱藏它原本的水平方向的滾動條，這樣就可以實現我們所說的第三點了。

再來看下第一點，要想標題欄隨著ViewPager變化，也就是我們得知道ViewPager當前所處的位置，這樣自然我們就想到了ViewPager的OnPageChangeListener方法：

@Override
        public void onPageSelected(int position) {
        }

其中的引數position為我們提供這個位置資訊。為了讓標題欄中的TextView和ViewPager中Fragement一一對應，由於TextView本身沒有這個屬性，所有我們可以通過重寫的方式給他新增一個index位置資訊。

現在主要的是第二個問題，這裡涉及到兩個滑動，ViewPager的滑動是自帶的我們可以不用管，而HorizontalScrollView本身是可以通過手動來滑動的，但是怎麼讓它自動滑到我們想要的地方呢。

還好HorizontalScrollView提供了一個smoothScrollTo(int x, int y)方法，使用這個方法，我們可以將HorizontalScrollView滑動到任意位置。

問題使我們怎麼確定這個位置，由於每個TextView裡面的文字數目可能不同，意味著TextView的寬度各不相同，這樣要怎麼計算位置呢？

我們可以使用getLeft()方法獲得目標TextView距離HorizontalScrollView最左邊的長度，這樣就不用管之前的TextView的寬度了，因為getLeft()相當於獲得了它們的和，我們希望它移動到中間位置，那麼getLeft()再減去(getWidth()-TextView.getWidth())/2就是需要滑動的距離，具體邏輯看圖：
這裡寫圖片描述

圖中黑框是螢幕，紅色矩形是Textview，這裡要將Textview從A位置移動到B位置，其中的藍色線條就是移動的距離TextView.getLeft() - (getWidth() - TextView.getWidth()) / 2。getWidth()獲取的是螢幕寬度。
最後呼叫smoothScrollTo(int x, int y)方法就ok了，x傳上面得到的值，y為0就行。

最後給TextView加上屬性動畫效果就好了，對於屬性動畫ObjectAnimator 不太瞭解的自己去百度下吧，這裡就不介紹了。

既然問題都解決了下面貼上主要程式碼：

public class MyIndicator extends HorizontalScrollView implements ViewPager.OnPageChangeListener{
    private ViewPager mViewPager;
    private LinearLayout myLinearLayout;

   /** 
    我們實現了ViewPager.OnPageChangeListener介面，因為我們要監聽ViewPager的滑頁行為，從而去改變導航欄的狀態
    所以我們也可以看到，MyIndicator持有ViewPager的引用，如果我們還想要監聽ViewPager怎麼辦呢？ 
    這裡我為MyIndicator提供了一個介面，與OnPageChangeListener方法一樣呼叫 **/

    MyOnPageChangeListener mListener;

    private interface MyOnPageChangeListener {
        void onPageScrolled(int position, float positionOffset, int positionOffsetPixels);
        void onPageSelected(int position);
        void onPageScrollStateChanged(int state);
    }
    private int oldSelected;

    //為了讓TextView能點選，我為每個TextView都設定了OnClickListener,
    //就是獲得目標標題欄的index，然後呼叫setCurrentItem()就可以了,這樣就實現了點選滑動的效果，點選標題欄，Viewpager也會跟著翻頁。
    private final OnClickListener mTabClickListener = new OnClickListener() {
         public void onClick(View view) {
             MyTabView tabView = (MyTabView)view;
              oldSelected = mViewPager.getCurrentItem();
              final int newSelected = tabView.index;
              setCurrentItem(newSelected);
         }
    };

    public MyIndicator(Context context) {
          super(context);
          init(context);
    }

    public MyIndicator(Context context, AttributeSet attrs) {
          super(context, attrs);
          init(context);
    }

    public MyIndicator(Context context, AttributeSet attrs, int defStyle) {
          super(context, attrs, defStyle);
          init(context);
    }

    private void init(Context mcontext){
          setHorizontalScrollBarEnabled(false);//隱藏自帶的滾動條
          //新增linearLayout
          myLinearLayout = new LinearLayout(mcontext);
          myLinearLayout.setOrientation(LinearLayout.HORIZONTAL);

          addView(myLinearLayout, new ViewGroup.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT));
    }

/**
     *  我們必須在呼叫setViewPager()之前為ViewPager設定Adapter,
        而FragmentPagerAdapter裡面的getCount()方法返回了這個數目，
        如果沒有設定Adapter，MyIndicator就不知道怎麼繪製導航欄了，因為連標題數目都不清楚 */

     public void setViewPager(ViewPager viewPager){
           setViewPager(viewPager,0);
     }

     @SuppressWarnings("deprecation")
    public void setViewPager(ViewPager viewPager,int initPos){
           if (mViewPager == viewPager) {
                 return;
           }
           if (mViewPager != null) {
                 mViewPager.setOnPageChangeListener(null);
           }
           final PagerAdapter adapter = viewPager.getAdapter();
           if (adapter == null) {
                 throw new IllegalStateException("ViewPager does not have adapter instance.");
           }
           mViewPager = viewPager;
           viewPager.setOnPageChangeListener(this);
           notifyDataSetChanged();
           setCurrentItem(initPos);
    }

    private void notifyDataSetChanged(){
           myLinearLayout.removeAllViews();
           PagerAdapter mAdapter = mViewPager.getAdapter();
           int count = mAdapter.getCount();
           for(int i=0;i<count;i++){
                 addTab(i,mAdapter.getPageTitle(i));
           }
           requestLayout();
    }

    /**
     * 程式碼新增頂部的TextView
     * @param index
     * @param text
     */
    private void addTab(int index,CharSequence text) {
          MyTabView tabView = new MyTabView(getContext());
          tabView.index = index;
          tabView.setFocusable(true);
          tabView.setOnClickListener(mTabClickListener);
          tabView.setText(text);
          tabView.setTextSize(22);
          tabView.setTextColor(getContext().getResources().getColor(R.color.white));
          tabView.setPadding(20,0,20,0);
          myLinearLayout.addView(tabView);
    }

    /**
     * 被選中的動畫
     * @param view
     */
    @TargetApi(Build.VERSION_CODES.HONEYCOMB)
    @SuppressLint("NewApi")
    private void animation(View view) {
        ObjectAnimator scaleX = ObjectAnimator.ofFloat(view, "scaleX", 1f);
        ObjectAnimator scaleY = ObjectAnimator.ofFloat(view, "scaleY", 1f);
        ObjectAnimator fade = ObjectAnimator.ofFloat(view, "alpha", 1f);
        AnimatorSet animSet = new AnimatorSet();
        animSet.play(scaleX).with(scaleY).with(fade);
        animSet.setDuration(500);
        animSet.start();
    }

    /**
     * 沒選中的動畫
     * @param view
     */
    private void animation2(View view) {
        ObjectAnimator scaleX = ObjectAnimator.ofFloat(view, "scaleX", 0.8f);
        ObjectAnimator scaleY = ObjectAnimator.ofFloat(view, "scaleY", 0.8f);
        ObjectAnimator fade = ObjectAnimator.ofFloat(view, "alpha", 0.5f);
        AnimatorSet animSet = new AnimatorSet();
        animSet.play(scaleX).with(scaleY).with(fade);
        animSet.setDuration(500);
        animSet.start();
    }

    public void setCurrentItem(int item) {
          if (mViewPager == null) {
                 throw new IllegalStateException("ViewPager has not been bound.");
          }
          int mSelectedTabIndex = item;
          mViewPager.setCurrentItem(item);

          final int tabCount = myLinearLayout.getChildCount();
          for (int i = 0; i < tabCount; i++) {//遍歷標題，改變選中的背景
                final View child = myLinearLayout.getChildAt(i);
                final boolean isSelected = (i == item);
                child.setSelected(isSelected);
                if (isSelected) {
                      animation(child);
                      animateToTab(item);//動畫效果
                }else{
                      animation2(child);
                      child.setBackgroundColor(Color.TRANSPARENT);
                }
         }
   }

   private Runnable mTabSelector;
        private void animateToTab(final int position) {
              final View tabView = myLinearLayout.getChildAt(position);
              if (mTabSelector != null) {
                    removeCallbacks(mTabSelector);
              }
              mTabSelector = new Runnable() {
                    public void run() {
                         final int scrollPos = tabView.getLeft() - (getWidth() - tabView.getWidth()) / 2;//計算要滑動到的位置
                         smoothScrollTo(scrollPos, 0);
                         mTabSelector = null;
                   }
             };
             post(mTabSelector);    //在主執行緒執行動畫
       }

        public void setMyOnPageChangeListener(MyOnPageChangeListener listener){
              mListener = listener;
        }

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
              if(mListener!=null) mListener.onPageScrolled(position,positionOffset,positionOffsetPixels);
        }

        @Override
        public void onPageSelected(int position) {
              setCurrentItem(position);
              if(mListener!=null) mListener.onPageSelected(position);
        }

        @Override
        public void onPageScrollStateChanged(int state) {
              if(mListener!=null) mListener.onPageScrollStateChanged(state);
        }

 }

因為裡面註釋都寫的差不多了，這裡就不再細說了。
下面是佈局xml檔案：

<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="com.zhu.myindicator.MainActivity" >

    <com.zhu.myindicator.MyIndicator
        android:id="@+id/indicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/red" />

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

</LinearLayout>

最後在Activity裡面呼叫：

public class MainActivity extends FragmentActivity {
    private MyIndicator indicator;
    private ViewPager pager;
    String content[]={"熱點","推薦","社會","視訊","科技","汽車","趣圖", "美圖", "美女"};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        FragmentPagerAdapter adapter = new MyFragmentManager(getSupportFragmentManager(), content);

        pager = (ViewPager)findViewById(R.id.pager);
        indicator = (MyIndicator)findViewById(R.id.indicator);

        pager.setAdapter(adapter);
        indicator.setViewPager(pager);
    }

}

相關推薦

Android 仿今日頭條首頁標題欄效果

今天帶來的是仿今日頭條首頁的聯動滑動效果，廢話不多說，先上效果圖： 思路： 做這個我們需要實現的效果有 1、滑動內容區域，標題欄會有變化來顯示當前所處的位置。 2、點選標題欄，內容區域也會隨著滑動並跳到指定欄，標題欄會移動到螢幕中間。 3、當標題欄

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

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

React Native之仿今日頭條首頁

      今日頭條應用想必大家應該都不陌生，絕對稱得上今日之星。媒體上面已經所向披靡，PK掉微信公眾號是遲早的事情，我祝今日頭條再創輝煌！       首先我們先看下今日頭條的首頁：              這裡提到一個開源框架：react-native-scrolla

Android 利用ViewPager+GridView，仿美團首頁導航欄分類佈局介面

先看美團的效果： 再看我們山寨的效果： 最初我是使用VIewPager+RecyclerVIew實現的，發現在左右滑動的時候，有問題，經常滑動不了，應該是RecyclerVIew消費了Touch事件，所以棄用這個方法了(效果圖是下面的效果，為了區別VIew頁面，每

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

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

Selenium元素定位初探（以今日頭條首頁為例）

隨著網頁技術的發展，動態網頁的比例越來越高，原來抓取靜態網頁的許多方法變得不再適用；再加上越來越多的網站添加了各種複雜的反爬蟲策略，導致直接通過網路請求的方式去抓取頁面的方式已經有些落伍了。 而Selenium可以通過模擬瀏覽器的真實行為來訪問網頁並將頁面原始碼快取下來，從而實現所見

android仿今日頭條App、多種漂亮載入效果、選擇器彙總、記事本App、Kotlin開發等原始碼

Android精選原始碼 android漂亮的載入效果 android各種 選擇器 彙總原始碼 Android仿bilibili搜尋框效果 Android記事本app、分類，塗鴉、新增圖片或者其他附件 仿今日頭條app 一個很酷的Vi

Android 仿淘寶商品詳情標題欄變色，佈局層疊效果

如圖效果 思路：如圖可以將圖片中佈局分成三個部分，1標題欄透明背景，2上半部分佈局，3下半部分佈局，當我們向上拉動的時候，1佈局實現漸變，從透明變到白色，2佈局背景色漸變到白色，23佈局隨滾動條上拉，並且慢慢改變2佈局paddingtop的屬性，其中1佈局漂浮在整個scro

Android 仿今日頭條頻道管理（上）（GridView之間Item的移動和拖拽）

前言 經常逛今日頭條、發現它的頻道管理功能做的特別贊，互動體驗非常好、如圖： 它是2個gridview組成、2個gridview之間的Item是可以相互更換的、而且我的頻道的Item是可以拖拽進行排序。仔細觀察、今日頭條有些細節做的的非常好，當一個gridview1的item移

仿UC頭條首頁-html+css+純JS

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿UC頭條</title> <s

android仿今日頭條下拉重新整理中的vector動畫

一直有留意到今日頭條下拉重新整理的效果, 真的很贊,在學習了svg drawable相關資料後, 參考部落格http://blog.csdn.net/u012950099/article/details/52040028完成了今日頭條下拉重新整理中的動畫, 首先看下效果圖:

android仿支付寶首頁更多、應用編輯介面

[github地址](https://github.com/oldbirdy/recyclerdemo “github地址”) 專案越來越大，模組越來越多，首頁上展示的東西又不能全部都展示出來，只能選擇幾個重要的模組展示出來。但是不同的使用者關注的層面不一樣，只

仿支付寶首頁頭部伸縮效果

nat load err 默認 hub pen tle 滑動 bili 原文鏈接：https://mp.weixin.qq.com/s/GegMt7GDBCFVoUgFQWG3Sw 每次打開支付寶首頁滑動，頭部的伸縮動畫甚是吸引人。於是自己決定動手來實現一個。 無圖言虛

仿今日頭條的滾動指示器的效果

public class ColorChangeTextView extends TextView { private int mPreviousColor = Color.BLUE; private int mChangeColor = Color.RED; private Pa

Android之高仿今日頭條、網易新聞首頁動態改變tab

前言： 專案需要一個類似今日頭條或者網易新聞首頁動態改變tab（頻道欄目）的功能，進過一番折騰，目前已實現該功能。 先看看效果圖： 思路： 1，關於tab欄目橫著滑動功能控制元件的選擇，這裡我採用的Horizontal

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

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

android之官方導航欄ActionBar(三)之高仿優酷首頁

<style name="Theme.Holo.Light.DarkActionBar"> <item name="windowContentOverlay">@drawable/ab_solid_shadow_holo</item>

android高仿今日頭條小視訊轉場切換效果

可以先看看今日頭條效果 功能分析 點選列表上的一個item，該item會放大，最後直接全屏播放小視訊，剛開始看上去，以為是個共享元素的轉場動畫， 後來想到，共享元素要在android 5.0以上支援,而今日頭條顯然不會只支援5.0版本以上 筆者想到的一種方案就是進入Acti

【Android檢視效果】仿QQ空間滑動改變標題欄顏色

最近在倒騰公司之前的專案，發現之前的介面是個白色標題欄，不是很美觀，所以做了些改進。 先看效果圖 簡單說下思路，整個佈局大體上是ScrollView裡面包含了一個ImageView和RecyclerView，所以先得到ImageView的高度，當ScrollView向上滑動

Android之高仿京東APP首頁“京東快報”自動向上滾動的廣告條

##前言 上次在京東APP上買東西時，發現首頁中間有塊叫“京東快報”的欄目，其中廣告條能自動向上滾動，效果還不錯，看到這個效果，第一個念頭就是我能不能實現，於是就誕生了這篇文章。 我們看看實現後的效果： ##實現原理 起初看到這個效果時，第一個想法就是向上移