TShopping
標題:
TabLayout+ViewPager 簡單實現app底部Tab佈局
[打印本頁]
作者:
woff
時間:
2016-9-23 20:52
標題:
TabLayout+ViewPager 簡單實現app底部Tab佈局
前言
在谷歌發布Android Design Support Library之前,app底部tab佈局的實現方法就有很多種,其中有RadioGroup+FrameLayout、TabHost+Fragment、FragmentPagerAdapter+ViewPager等方法,雖然這些方法雖然能達到同樣的效果,但我個人總覺得有些繁瑣。然而,Google在2015的IO大會上,給開發者們帶來了全新的Android Design Support Library,裡麵包含了許多新控件,這些新控件有許多是把以前的一些第三方開源庫官方化,實現起來更為簡便,簡直是開發者的福音。其中的TabLayout控件讓我想到了app底部的tab佈局,而且TabLayout用法更加簡單,為何不試試用TabLayout實現簡單的實現呢?好了,話不多說,先看看效果:
1.PNG
(96.06 KB, 下載次數: 8)
下載附件
保存到相冊
2016-9-23 20:51 上傳
是不是和以前的方法實現的效果一樣呢?下面我們來看看怎麼簡單實現。
過程
因為TabLayout和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>
複製代碼
就僅一個ViewPager和TabLayout就可以實現,是不是比以前的方法繁瑣的佈局簡便很多 ?上面TabLayout中app:tabIndicatorHeight="0dp"是為了不顯示tab底部的橫線,app:tabMode="fixed"是讓底部tab佈局不可滑動。
接下來就和往常一樣在MainActivity.java中初始化佈局,設置適配器:
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 MainActivity.PlaceholderFragment.newInstance(position+1);
} else if (position == 2) {
return MainActivity.PlaceholderFragment.newInstance(position+1);
}else if (position==3){
return MainActivity.PlaceholderFragment.newInstance(position+1);
}
return MainActivity.PlaceholderFragment.newInstance(position+1);
}
@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.mipmap.ic_launcher));
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關聯起來。
one = mTablayout.getTabAt(0);獲取底部單個tab,用來添加初始化圖片,注意下標都是從0開始的。
初始化監聽事件
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中設置選中tab時切換的圖片,onTabUnselected中設置沒有被選中時的圖片。別忘了mViewPager.setCurrentItem(0);這句,這是用來點擊tab時切換ViewPager,如果不加這一句的話滑動ViewPager底部tab可以切換,但是點擊tab而ViewPager不會切換。
Fragment中的簡單佈局
viewpager
.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)) {
mViewPager.setCurrentItem(0);
} else if (tab == mTablayout.getTabAt(1)) {
mViewPager.setCurrentItem(1);
} else if (tab == mTablayout.getTabAt(2)) {
mViewPager.setCurrentItem(2);
}else if (tab == mTablayout.getTabAt(3)){
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 MainActivity.PlaceholderFragment.newInstance(position+1);
} else if (position == 2) {
return MainActivity.PlaceholderFragment.newInstance(position+1);
}else if (position==3){
return MainActivity.PlaceholderFragment.newInstance(position+1);
}
return MainActivity.PlaceholderFragment.newInstance(position+1);
}
@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.mipmap.ic_launcher));
two.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
three.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
four.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
}
/**
* A placeholder fragment containing a simple view.
*/
public static class PlaceholderFragment extends Fragment {
/**
* The fragment argument representing the section number for this
* fragment.
*/
private static final String ARG_SECTION_NUMBER = "section_number";
public PlaceholderFragment() {
}
/**
* Returns a new instance of this fragment for the given section
* number.
*/
public static PlaceholderFragment newInstance(int sectionNumber) {
PlaceholderFragment fragment = new PlaceholderFragment();
Bundle args = new Bundle();
args.putInt(ARG_SECTION_NUMBER, sectionNumber);
fragment.setArguments(args);
return fragment;
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_main, container, false);
TextView textView = (TextView) rootView.findViewById(R.id.section_label);
textView.setText(getString(R.string.section_format, getArguments().getInt(ARG_SECTION_NUMBER)));
return rootView;
}
}
}
複製代碼
結束語
以上就是簡單用TabLayout+ViewPager實現app底部Tab佈局的整個過程,如果你有更好的方法,或者文章中存在錯誤或不足的地方,歡迎在文章下面評論交流!
參考文章:
http://www.jianshu.com/p/adf7a994613a
歡迎光臨 TShopping (http://www.tshopping.com.tw/)
Powered by Discuz! X3.2