欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Android中TabLayout+ViewPager 簡單實(shí)現(xiàn)app底部Tab導(dǎo)航欄

 更新時(shí)間：2017年02月24日 15:57:56   作者：backkomyoung  
TabLayout 是Android com.android.support:design庫的一個(gè)控件。本文主要給大家介紹TabLayout+ViewPager 簡單實(shí)現(xiàn)app底部Tab布局，需要的的朋友參考下

前言

在谷歌發(fā)布Android Design Support Library之前，app底部tab布局的實(shí)現(xiàn)方法就有很多種，其中有RadioGroup+FrameLayout、TabHost+Fragment、FragmentPagerAdapter+ViewPager等方法，雖然這些方法雖然能達(dá)到同樣的效果，但我個(gè)人總覺得有些繁瑣。然而，Google在2015的IO大會上，給開發(fā)者們帶來了全新的Android Design Support Library，里面包含了許多新控件，這些新控件有許多是把以前的一些第三方開源庫官方化，實(shí)現(xiàn)起來更為簡便，簡直是開發(fā)者的福音。其中的TabLayout控件讓我想到了app底部的tab布局，而且TabLayout用法更加簡單，為何不試試用TabLayout實(shí)現(xiàn)簡單的實(shí)現(xiàn)呢？好了，話不多說，先看看效果：


是不是和以前的方法實(shí)現(xiàn)的效果一樣呢？下面我們來看看怎么簡單實(shí)現(xiàn)。

過程

因?yàn)門abLayout和ViewPager分別是屬于design和v4包下的，所以我們先在app的build.gradle中添加：

compile 'com.android.support:design:23.1.1'
compile 'com.android.support:support-v4:23.1.1'

然后在主布局文件activity_main.xml中添加布局控件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 tools:context=".MainActivity">

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

 <android.support.design.widget.TabLayout
  android:id="@+id/tabLayout"
  android:layout_width="match_parent"
  android:layout_height="50dp"
  app:tabGravity="fill"
  app:tabIndicatorHeight="0dp"
  app:tabMode="fixed"
  app:tabSelectedTextColor="#FF4081"
  app:tabTextColor="#000">
 </android.support.design.widget.TabLayout>

</LinearLayout>

就僅一個(gè)ViewPager和TabLayout就可以實(shí)現(xiàn)，是不是比以前的方法繁瑣的布局簡便很多？上面TabLayout中app:tabIndicatorHeight="0dp"是為了不顯示tab底部的橫線，app:tabMode="fixed"是讓底部tab布局不可滑動。

接下來就和往常一樣在MainActivity.java中初始化布局，設(shè)置適配器：

 private void initViews() {

  mTablayout= (TabLayout) findViewById(R.id.tabLayout);
  mViewPager= (ViewPager) findViewById(R.id.viewPager);

  mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {

   private String[] mTitles = new String[]{"唐僧", "大師兄", "二師兄","沙師弟"};

   @Override
   public Fragment getItem(int position) {
    if (position == 1) {
     return new TwoFragment();
    } else if (position == 2) {
     return new ThreeFragment();
    }else if (position==3){
     return new FourFragment();
    }
    return new OneFragment();
   }

   @Override
   public int getCount() {
    return mTitles.length;
   }

   @Override
   public CharSequence getPageTitle(int position) {
    return mTitles[position];
   }

  });

  mTablayout.setupWithViewPager(mViewPager);

  one = mTablayout.getTabAt(0);
  two = mTablayout.getTabAt(1);
  three = mTablayout.getTabAt(2);
  four = mTablayout.getTabAt(3);

  one.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));
  two.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
  three.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
  four.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));

 }

上面要注意的地方是別忘了在FragmentPagerAdapter中手動添加：

   @Override
   public CharSequence getPageTitle(int position) {
    return mTitles[position];
   }

不然不顯示底部的文字。

mTablayout.setupWithViewPager(mViewPager);將TabLayout和ViewPager關(guān)聯(lián)起來。

one = mTablayout.getTabAt(0);獲取底部單個(gè)tab，用來添加初始化圖片，注意下標(biāo)都是從0開始的。

初始化監(jiān)聽事件

 private void initEvents() {

  mTablayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
   @Override
   public void onTabSelected(TabLayout.Tab tab) {
    if (tab == mTablayout.getTabAt(0)) {
     one.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));
     mViewPager.setCurrentItem(0);
    } else if (tab == mTablayout.getTabAt(1)) {
     two.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));
     mViewPager.setCurrentItem(1);
    } else if (tab == mTablayout.getTabAt(2)) {
     three.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));
     mViewPager.setCurrentItem(2);
    }else if (tab == mTablayout.getTabAt(3)){
     four.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));
     mViewPager.setCurrentItem(3);
    }

   }

   @Override
   public void onTabUnselected(TabLayout.Tab tab) {
    if (tab == mTablayout.getTabAt(0)) {
     one.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
    } else if (tab == mTablayout.getTabAt(1)) {
     two.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
    } else if (tab == mTablayout.getTabAt(2)) {
     three.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
    }else if (tab == mTablayout.getTabAt(3)){
     four.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
    }
   }

   @Override
   public void onTabReselected(TabLayout.Tab tab) {

   }
  });

 }

在onTabSelected中設(shè)置選中tab時(shí)切換的圖片，onTabUnselected中設(shè)置沒有被選中時(shí)的圖片。別忘了mViewPager.setCurrentItem(0);這句，這是用來點(diǎn)擊tab時(shí)切換ViewPager，如果不加這一句的話滑動ViewPager底部tab可以切換，但是點(diǎn)擊tab而ViewPager不會切換。

Fragment中的簡單布局

fragment_one.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical">

 <TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="唐僧"
  android:layout_marginTop="100dp"
  android:layout_gravity="center"
  android:textSize="30sp"/>

</LinearLayout>

OneFragment.java

public class OneFragment extends Fragment{

 @Nullable
 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
  return inflater.inflate(R.layout.fragment_one,container,false);
 }

 @Override
 public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
  super.onViewCreated(view, savedInstanceState);
 }
}

MainActivity.java完整代碼：

public class MainActivity extends AppCompatActivity {

 private TabLayout mTablayout;
 private ViewPager mViewPager;

 private TabLayout.Tab one;
 private TabLayout.Tab two;
 private TabLayout.Tab three;
 private TabLayout.Tab four;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);

  initViews();
  initEvents();
 }

 private void initEvents() {

  mTablayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
   @Override
   public void onTabSelected(TabLayout.Tab tab) {
    if (tab == mTablayout.getTabAt(0)) {
     one.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));
     mViewPager.setCurrentItem(0);
    } else if (tab == mTablayout.getTabAt(1)) {
     two.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));
     mViewPager.setCurrentItem(1);
    } else if (tab == mTablayout.getTabAt(2)) {
     three.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));
     mViewPager.setCurrentItem(2);
    }else if (tab == mTablayout.getTabAt(3)){
     four.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));
     mViewPager.setCurrentItem(3);
    }

   }

   @Override
   public void onTabUnselected(TabLayout.Tab tab) {
    if (tab == mTablayout.getTabAt(0)) {
     one.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
    } else if (tab == mTablayout.getTabAt(1)) {
     two.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
    } else if (tab == mTablayout.getTabAt(2)) {
     three.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
    }else if (tab == mTablayout.getTabAt(3)){
     four.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
    }
   }

   @Override
   public void onTabReselected(TabLayout.Tab tab) {

   }
  });

 }

 private void initViews() {

  mTablayout= (TabLayout) findViewById(R.id.tabLayout);
  mViewPager= (ViewPager) findViewById(R.id.viewPager);

  mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {

   private String[] mTitles = new String[]{"唐僧", "大師兄", "二師兄","沙師弟"};

   @Override
   public Fragment getItem(int position) {
    if (position == 1) {
     return new TwoFragment();
    } else if (position == 2) {
     return new ThreeFragment();
    }else if (position==3){
     return new FourFragment();
    }
    return new OneFragment();
   }

   @Override
   public int getCount() {
    return mTitles.length;
   }

   @Override
   public CharSequence getPageTitle(int position) {
    return mTitles[position];
   }

  });

  mTablayout.setupWithViewPager(mViewPager);

  one = mTablayout.getTabAt(0);
  two = mTablayout.getTabAt(1);
  three = mTablayout.getTabAt(2);
  four = mTablayout.getTabAt(3);

  one.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));
  two.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
  three.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
  four.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));

 }
}

結(jié)束語

以上就是簡單用TabLayout+ViewPager實(shí)現(xiàn)app底部Tab布局的整個(gè)過程，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論