[Android] Android 类似今日头条顶部的TabLayout 滑动标签栏 效果

匿名 (未验证) 提交于 2019-12-02 23:26:52

APP市场中大多数新闻App都有导航菜单,导航菜单是一组标签的集合,在新闻客户端中,每个标签标示一个新闻类别,对应下面ViewPager控件的一个分页面,今日头条, 网易新闻等。

先演示下效果:

话不多说,直接开撸:

一、添加依赖

compile 'com.android.support:appcompat-v7:23.4.0' compile 'com.android.support:design:23.4.0' compile 'com.android.support:recyclerview-v7:23.4.0' compile 'com.android.support:cardview-v7:23.4.0'

二、在布局文件中加入Layout

activity_main.xml

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:orientation="vertical"     tools:context=".activity.MainActivity">      <android.support.design.widget.TabLayout         android:id="@+id/tab_layout"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:background="#E0E0E0"         app:tabIndicatorColor="@color/colorAccent"         app:tabIndicatorHeight="5dp"         app:tabMode="fixed"         app:tabSelectedTextColor="@color/colorPrimary"         app:tabTextAppearance="@style/TabStyle" />      <android.support.v4.view.ViewPager         android:id="@+id/tab_viewpager"         android:layout_width="match_parent"         android:layout_height="0dp"         android:layout_weight="1"         android:background="@android:color/white" />  </LinearLayout>

附:几个参数说明下

app:tabMode="scrollable" 设置tabMode属性为可以左右滚动
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

tabLayout.setTabMode(TabLayout.MODE_FIXED);





三、Java代码中绑定

package com.jack.apptabview.activity;  import android.support.design.widget.TabLayout; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.Window;  import com.jack.apptabview.R; import com.jack.apptabview.fragment.TabFragment;  public class MainActivity extends AppCompatActivity {     private TabLayout tabLayout = null;     private ViewPager viewPager;     private Fragment[] mFragmentArrays = new Fragment[8];     private String[] mTabTitles = new String[8];      @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         supportRequestWindowFeature(Window.FEATURE_NO_TITLE);         setContentView(R.layout.activity_main);          initView();         bindData();     }       private void initView() {         tabLayout = (TabLayout) findViewById(R.id.tab_layout);         viewPager = (ViewPager) findViewById(R.id.tab_viewpager);      }      private void bindData() {         mTabTitles[0] = "推荐";         mTabTitles[1] = "热点";         mTabTitles[2] = "科技";         mTabTitles[3] = "体育";         mTabTitles[4] = "健康";         mTabTitles[5] = "军事";         mTabTitles[6] = "娱乐";         mTabTitles[7] = "热点";  //        tabLayout.setTabMode(TabLayout.MODE_FIXED); //固定模式,也就是说 tab顶部不能滚动         tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE); //滚动模式 ,可左右滚动,类 今日头条          mFragmentArrays[0] = TabFragment.newInstance();         mFragmentArrays[1] = TabFragment.newInstance();         mFragmentArrays[2] = TabFragment.newInstance();         mFragmentArrays[3] = TabFragment.newInstance();         mFragmentArrays[4] = TabFragment.newInstance();         mFragmentArrays[5] = TabFragment.newInstance();         mFragmentArrays[6] = TabFragment.newInstance();         mFragmentArrays[7] = TabFragment.newInstance();          PagerAdapter pagerAdapter = new MyViewPagerAdapter(getSupportFragmentManager());         viewPager.setAdapter(pagerAdapter);          //将ViewPager和TabLayout绑定         tabLayout.setupWithViewPager(viewPager);     }      final class MyViewPagerAdapter extends FragmentPagerAdapter {         public MyViewPagerAdapter(FragmentManager fm) {             super(fm);         }          @Override         public Fragment getItem(int position) {             return mFragmentArrays[position];         }          @Override         public int getCount() {             return mFragmentArrays.length;         }          @Override         public CharSequence getPageTitle(int position) {             return mTabTitles[position];         }     } }

四、其他实现Fragment等

这里不多说。

五、Talk is cheap. Show me the code

话不多说,代码在这里下载!

https://github.com/wukong1688/AppTabView

如果觉得有帮助,欢迎在 Github 为我 star!

本博客地址: wukong1688

本文原文地址:https://www.cnblogs.com/wukong1688/p/10733603.html

转载请著名出处!谢谢~~

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!