Viewpager实现今日头条顶部导航的功能

小鱼儿 2022-09-22 01:16 225阅读 0赞

利用简单的Textview 和Viewpager实现滑动、点击换页的效果，效果图如下：

行走的那些事　　　行走的那些事

先上布局文件代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/white" android:orientation="vertical" >
  4.    <LinearLayout android:background="@color/red_base" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="50dp">
  6.    </LinearLayout>
  7.     <!-- 选项卡 -->
  9.     <LinearLayout android:layout_width="match_parent" android:layout_height="40dp" android:background="@color/white" android:orientation="horizontal" android:weightSum="5" >
  11.         <FrameLayout android:id="@+id/rim_tab1_fl" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:clickable="true" android:gravity="center" >
  13.             <TextView android:id="@+id/rim_tab1_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="全部" android:textColor="@color/red_base" android:textSize="16sp" />
  14.         </FrameLayout>
  16.         <View android:layout_width="0.5dp" android:layout_height="match_parent" android:layout_marginBottom="10dp" android:layout_marginTop="10dp" android:background="@color/divider_gray_line" />
  18.         <FrameLayout android:id="@+id/rim_tab2_fl" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:clickable="true" android:gravity="center" >
  20.             <TextView android:id="@+id/rim_tab2_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="周边" android:textColor="@color/text_gray_4" android:textSize="16sp" />
  21.         </FrameLayout>
  23.         <View android:layout_width="0.5dp" android:layout_height="match_parent" android:layout_marginBottom="10dp" android:layout_marginTop="10dp" android:background="@color/divider_gray_line" />
  25.         <FrameLayout android:id="@+id/rim_tab3_fl" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:clickable="true" android:gravity="center" >
  27.             <TextView android:id="@+id/rim_tab3_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="应援" android:textColor="@color/text_gray_4" android:textSize="16sp" />
  28.         </FrameLayout>
  30.         <View android:layout_width="0.5dp" android:layout_height="match_parent" android:layout_marginBottom="10dp" android:layout_marginTop="10dp" android:background="@color/divider_gray_line" />
  32.         <FrameLayout android:id="@+id/rim_tab4_fl" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:clickable="true" android:gravity="center" >
  34.             <TextView android:id="@+id/rim_tab4_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="话题" android:textColor="@color/text_gray_4" android:textSize="16sp" />
  35.         </FrameLayout>
  37.         <View android:layout_width="0.5dp" android:layout_height="match_parent" android:layout_marginBottom="10dp" android:layout_marginTop="10dp" android:background="@color/divider_gray_line" />
  39.         <FrameLayout android:id="@+id/rim_tab5_fl" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:clickable="true" android:gravity="center" >
  41.             <TextView android:id="@+id/rim_tab5_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="明星" android:textColor="@color/text_gray_4" android:textSize="16sp" />
  42.         </FrameLayout>
  43.     </LinearLayout>
  45.     <LinearLayout android:layout_width="match_parent" android:layout_height="3dp" android:background="@color/white" >
  47.         <ImageView android:id="@+id/rim_cursor" android:layout_width="80dp" android:layout_height="3dp" android:layout_marginTop="0dip" android:background="@color/title_bar_blue" />
  48.     </LinearLayout>
  50.     <View android:layout_width="match_parent" android:layout_height="0.1dp" android:background="@color/btn_bg_gray" />
  51.     <!-- 选项卡内容显示区域 -->
  53.     <View android:layout_width="match_parent" android:layout_height="10dp" android:background="@color/bg_light_gray" />
  55.     <android.support.v4.view.ViewPager android:id="@+id/rim_third_vp" android:layout_width="match_parent" android:layout_height="match_parent" />
  57. </LinearLayout>

上面红色指示器的view的初始化

  1. private int screenWidth;//指示器
  2. private ImageView cursorImg;
  3. private LinearLayout.LayoutParams lp;
  6.  private void initViews(){
  8.         WindowManager wm = (WindowManager)
  9.                 getSystemService(Context.WINDOW_SERVICE);
  11.         int width = wm.getDefaultDisplay().getWidth();
  12.         screenWidth=width/5;
  13.         cursorImg = (ImageView) findViewById(R.id.rim_cursor);
  14.         lp = (LinearLayout.LayoutParams) cursorImg.getLayoutParams();
  15.         lp.width = screenWidth;
  16.         cursorImg.setLayoutParams(lp);
  17.         leftMargin = lp.leftMargin;
  18.   }

初始化indicater

  1. private void initViewPager() {
  2.         viewPager = (ViewPager) findViewById(R.id.rim_third_vp);
  3.         fragmentsList = new ArrayList<Fragment>();
  4.         fragment1 = new RimFragment(); 
  5.         fragmentsList.add(fragment1);
  6.         fragmentsList.add(fragment2);
  7.         fragmentsList.add(fragment3);
  8.         fragmentsList.add(fragment4);
  9.         fragmentsList.add(fragment5);
  11.         viewPager.setAdapter(new FragmentAdapter(getSupportFragmentManager(),
  12.                 fragmentsList));
  13.         viewPager.setCurrentItem(0);
  14.         viewPager.setOnPageChangeListener(this);
  15.     }

设置上面选项卡的点击事件

  1. @Override
  2.     public void onClick(View v) {
  3.         switch (v.getId()){
  4.             case R.id.rim_tab1_fl:
  5.                 viewPager.setCurrentItem(0);
  6.                 num_tab1_tv.setTextColor(getResources().getColor(R.color.red_base));
  7.                 num_tab2_tv.setTextColor(getResources().getColor(R.color.text_gray_4));
  8.                 num_tab3_tv.setTextColor(getResources().getColor(R.color.text_gray_4));
  9.                 num_tab4_tv.setTextColor(getResources().getColor(R.color.text_gray_4));
  10.                 num_tab5_tv.setTextColor(getResources().getColor(R.color.text_gray_4));
  11.                 fragment1.setMsgName("1","周边");//周边的官方和会员的接口参数,官方
  12.                 break;

设置viewpager 滑动事件

  1. @Override
  2.     public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
  4.         offset = (screenWidth - cursorImg.getLayoutParams().width) / 5;
  6.         hidePoint(position, positionOffsetPixels);//设置红色指示器的位置
  7.         cursorImg.setLayoutParams(lp);
  8.         currentIndex = position;
  9.     }
  11.     @Override
  12.     public void onPageSelected(int position) {
  14.         switch (position){
  15.    //设置点击事件
  16.             case  0:
  17.                 fragment1.setMsgName("1","周边");
  18.                 num_tab1_tv.setTextColor(getResources().getColor(R.color.red_base));
  19.                 num_tab2_tv.setTextColor(getResources().getColor(R.color.text_gray_4));
  20.                 num_tab3_tv.setTextColor(getResources().getColor(R.color.text_gray_4));
  21.                 num_tab4_tv.setTextColor(getResources().getColor(R.color.text_gray_4));
  22.                 num_tab5_tv.setTextColor(getResources().getColor(R.color.text_gray_4));
  23.                 break;
  26.         }
  28.         if (position==0)
  29.         {
  32.         }else {
  34.         }
  36.     }
  38.     @Override
  39.     public void onPageScrollStateChanged(int state) {
  41.     }
  43.     //设置指示器的位置
  44.     private void hidePoint(int position, int positionOffsetPixels) {
  45.         if (position == 0) {
  46.    // 0<->1
  47.             lp.leftMargin = (int) (positionOffsetPixels / 5) + offset;
  49.         } else if (position == 1) {
  50.    // 1<->2
  51.             lp.leftMargin = (int) (positionOffsetPixels / 5) + screenWidth
  52.                     + offset;
  54.         }else  if(position==2){
  55.             lp.leftMargin = (int) (positionOffsetPixels / 5) + screenWidth*2
  56.                     + offset;
  57.         }
  58.         else  if(position==3){
  59.             lp.leftMargin = (int) (positionOffsetPixels / 5) + screenWidth*3
  60.                     + offset;
  61.         }
  62.         else  if(position==4){
  63.             lp.leftMargin = (int) (positionOffsetPixels / 5) + screenWidth*4
  64.                     + offset;
  65.         }
  66.     }

代码并不难，希望通过我这个例子，一是巩固自己的学习和理解，二是希望更多的人更好的学习，我会再接再厉，写更多的博文。

源码下载

发表评论

表情：
评论列表 （有 0 条评论，225人围观）

还没有评论，来说两句吧...

相关阅读

    相关 爬虫--今日头条

    1、分析今日头条 　　在看头条的时候可以发现展示出来的页面的数据都是一些封装过的js代码或者css代码，所以这时候就需要考虑页面的数据是不是封装在cookie里面了 　　回

    秒速五厘米秒速五厘米/ 0 赞/ 135 阅读

    相关 今日头条Android面试

    点击关注异步图书，置顶公众号 每天与你分享 IT好书 技术干货 职场知识 首先说一下，今日头条的面试主要分为三轮到四轮，如果是旺季面三轮，首先是基础面试，基本面试

    怼烎@怼烎@/ 0 赞/ 465 阅读