Android開發之TabLayout真正實現底部導航欄(可實現點選文字顏色圖片切換)
阿新 • • 發佈:2019-01-13
前言:關於這個TabLayout實現底部導航,在我的上篇《Android開發之TabLayout實現底部導航欄》部落格中有提到,但是後面在仔細的接觸專案中,發現了裡面有很多沒有解決的事情,比如不能實現點選文字顏色和圖片的切換,不能做到禁止左右滑動,所以趁著今天有時間的情況下,把這幾個功能好好的完善一下!
----效果圖----
----分析----
分析:通過上篇部落格中我們可以知道,圖片和文字的填充是在一個人for迴圈中完成的,在for迴圈中動態的新增,所以我們要通過更改一下這個for迴圈,具體做法是把文字的填充寫在pagerAdapter中,通過mTabLayout.getTabAt(i).setCustomView(mPagerAdapter.getTabView(i))
關於禁止左右滑動,我們只需要重寫Viewpager中的onInterceptTouchEvent返回false目的是為 不攔截事件,讓巢狀的子viewpager有機會響應觸控事件;重寫onTouchEvent,返回true,目的是什麼都不做;重寫setCurrentItem為false,目的是切換的時候沒有過渡動畫。
---完整程式碼實現--
MainActivity.java:
activity_main.xml:package com.jiuzu.tablelayoutdemo; import android.os.Bundle; import android.support.annotation.Nullable; 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.ViewPager; import android.support.v7.app.AppCompatActivity; import android.view.LayoutInflater; import android.view.View; import android.widget.ImageView; import android.widget.TextView; /** * Created by Fly on 2017/11/29. */ public class MainActivity extends AppCompatActivity { String title[] = {"AA", "BB", "CC"}; int ints[] = {R.mipmap.category_press, R.mipmap.me, R.mipmap.shopping_cart}; ViewPager mViewPager; PagerAdapter mPagerAdapter; private TabLayout mTabLayout; @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mViewPager = findViewById(R.id.view_pager); mTabLayout = findViewById(R.id.toolbar_tab); mPagerAdapter = new PagerAdapter(getSupportFragmentManager()); mViewPager.setAdapter(mPagerAdapter); mTabLayout.setupWithViewPager(mViewPager); for (int i = 0; i < mTabLayout.getTabCount(); i++) { mTabLayout.getTabAt(i).setCustomView(mPagerAdapter.getTabView(i)); } mTabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { @Override public void onTabSelected(TabLayout.Tab tab) { switch (tab.getPosition()) { case 0: tab.getCustomView().findViewById(R.id.iv).setBackgroundResource(R.mipmap.category_press); break; case 1: tab.getCustomView().findViewById(R.id.iv).setBackgroundResource(R.mipmap.me_press); break; case 2: tab.getCustomView().findViewById(R.id.iv).setBackgroundResource(R.mipmap.shopping_car_press); break; } TextView textView = tab.getCustomView().findViewById(R.id.tv); textView.setTextColor(getResources().getColor(R.color.colorAccent)); } @Override public void onTabUnselected(TabLayout.Tab tab) { switch (tab.getPosition()) { case 0: tab.getCustomView().findViewById(R.id.iv).setBackgroundResource(R.mipmap.category); break; case 1: tab.getCustomView().findViewById(R.id.iv).setBackgroundResource(R.mipmap.me); break; case 2: tab.getCustomView().findViewById(R.id.iv).setBackgroundResource(R.mipmap.shopping_cart); break; } TextView textView = tab.getCustomView().findViewById(R.id.tv); textView.setTextColor(getResources().getColor(R.color.lll));// <color name="lll">#000</color> } @Override public void onTabReselected(TabLayout.Tab tab) { } }); } public class PagerAdapter extends FragmentPagerAdapter { public PagerAdapter(FragmentManager fm) { super(fm); } @Override public CharSequence getPageTitle(int position) { return title[position]; } @Override public Fragment getItem(int position) { Fragment f = new MyFragment(); Bundle bundle = new Bundle(); bundle.putString("title", title[position]); f.setArguments(bundle); return f; } @Override public int getCount() { return title.length; } public View getTabView(int position) { View v = LayoutInflater.from(MainActivity.this).inflate(R.layout.item, null); ImageView iv = v.findViewById(R.id.iv); TextView tv = v.findViewById(R.id.tv); iv.setBackgroundResource(ints[position]); tv.setText(title[position]); if (position == 0) { tv.setTextColor(v.getResources().getColor(R.color.colorAccent)); } return v; } } }
MyFragment.java:<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <com.jiuzu.tablelayoutdemo.NoScrollViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" /> <android.support.design.widget.TabLayout android:id="@+id/toolbar_tab" android:layout_width="match_parent" android:layout_height="60dp" android:background="#CCC" app:tabGravity="fill" app:tabIndicatorHeight="0dp" app:tabMode="fixed" app:tabSelectedTextColor="?attr/colorPrimaryDark" app:tabTextColor="?attr/colorPrimary"> </android.support.design.widget.TabLayout> </LinearLayout>
package com.jiuzu.tablelayoutdemo;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
/**
* Created by Fly on 2017/11/25.
*/
public class MyFragment extends Fragment {
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.f, null);
TextView textView = view.findViewById(R.id.tv);
Bundle bundle = getArguments();
String str = bundle.getString("title");
textView.setText(str);
return view;
}
}
f.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:id="@+id/tv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="你好"
android:textSize="25sp" />
</LinearLayout>
item.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="wrap_content"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/iv"
android:layout_width="40dp"
android:layout_height="40dp" />
<TextView
android:id="@+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按鈕"
android:textColor="#000" />
</LinearLayout>
NoScrollViewPager.java:package com.jiuzu.tablelayoutdemo;
import android.content.Context;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;
/**
* Created by Fly on 2017/11/25.
*/
public class NoScrollViewPager extends ViewPager {
public NoScrollViewPager(@NonNull Context context) {
super(context);
}
public NoScrollViewPager(@NonNull Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}
@Override
public boolean onInterceptTouchEvent(MotionEvent arg0) {
return false;//不攔截事件,讓巢狀的子viewpager有機會響應觸控事件
}
@Override
public boolean onTouchEvent(MotionEvent arg0) {
// 重寫ViewPager滑動事件,改什麼都不做
return true;
}
@Override
public void setCurrentItem(int item) {
super.setCurrentItem(item, false);//表示切換的時候,不需要切換時間。
}
}
----完---