1. 程式人生 > >Android開發之TabLayout真正實現底部導航欄(可實現點選文字顏色圖片切換)

Android開發之TabLayout真正實現底部導航欄(可實現點選文字顏色圖片切換)

前言:關於這個TabLayout實現底部導航,在我的上篇《Android開發之TabLayout實現底部導航欄》部落格中有提到,但是後面在仔細的接觸專案中,發現了裡面有很多沒有解決的事情,比如不能實現點選文字顏色和圖片的切換,不能做到禁止左右滑動,所以趁著今天有時間的情況下,把這幾個功能好好的完善一下!

----效果圖----


----分析----

分析:通過上篇部落格中我們可以知道,圖片和文字的填充是在一個人for迴圈中完成的,在for迴圈中動態的新增,所以我們要通過更改一下這個for迴圈,具體做法是把文字的填充寫在pagerAdapter中,通過mTabLayout.getTabAt(i).setCustomView(mPagerAdapter.getTabView(i))

;然後再搭配 mTabLayout.setOnTabSelectedListener裡面 onTabSelected(選中狀態)onTabUnselected(未選中狀態)更改圖片顯示!

關於禁止左右滑動,我們只需要重寫Viewpager中的onInterceptTouchEvent返回false目的是為 不攔截事件,讓巢狀的子viewpager有機會響應觸控事件;重寫onTouchEvent,返回true,目的是什麼都不做;重寫setCurrentItem為false,目的是切換的時候沒有過渡動畫。

---完整程式碼實現--

MainActivity.java:

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;
        }

    }
}
activity_main.xml:
<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>
MyFragment.java:
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);//表示切換的時候,不需要切換時間。
    }
}

----完---





相關推薦

no