TabLayout + ViewPager + Fragment 实现滑动布局

TabLayout属性:

  • 设置背景:app:tabBackground
  • 设置指示器颜色: app:tabIndicatorColor="@color/colorPrimary"
  • 设置选中文字颜色:app:tabSelectedTextColor="#ffffff"
  • 设置未选中文字颜色:app:tabTextColor="#000000"
  • 设置背景:app:tabBackground="@color/colorPrimary"
  • 设置标签距离:
    app:tabPaddingStart=“10dp”
    app:tabPaddingBottom=“10dp”
    app:tabPadding=“10dp”
    app:tabPaddingEnd=“10dp”
    app:tabPaddingTop=“10dp”
  • 设置显示模式:
    app:tabMode=“scrollable” 可滑动:
    app:tabMode="fixed"固定

使用

  • 首先:布局 < TabLayout > < Tablayout> + < ViewPager >< ViewPager />
  • 其次:创建FragmentPagerAdapter,用于管理Fragment
  • 然后:创建Fragment
  • 最后:将TabLayout 与ViewPager进行关联

代码展示
MainActivity.java

package com.yoostar.summary.tablayoutwithfragment;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;

import com.yoostar.summary.R;
import com.yoostar.summary.mvp.module.base.BaseActivity;

import java.util.ArrayList;
import java.util.List;

import butterknife.BindView;

/**
 * ================================================
 * 作    者:zhoujianan
 * 版    本:v1.0
 * 创建日期:2019/7/18
 * 描    述: 结合TabLayout + ViewPager + Fragment 实现多个fragment的滑动
 * 修订历史:
 * ================================================
 */
public class MainActivity extends BaseActivity {
    @BindView(R.id.tab_ll)
    TabLayout mTabLl;
    @BindView(R.id.fragment_vp)
    ViewPager mFragmentViewPager;
    private List<Fragment> mFragments;
    private List<String> mTitles;
    private ViewPagerAdapter mVpAdapter;

    @Override
    protected int attachLayoutRes() {
        return R.layout.activity_tab_fragment;
    }

    @Override
    protected void initViews(Bundle savedInstanceState) {
        initFragment();
    }

    private void initFragment() {
        mFragments = new ArrayList<>();
        mTitles = new ArrayList<>();
        for (int i = 0; i < 4; i++) {
            mFragments.add(DefFragment.newInstance(i));
        }
        for (int i = 0; i < 4; i++) {
            mTitles.add("tab" + i);
        }
        mVpAdapter = new ViewPagerAdapter(getSupportFragmentManager(), mFragments, mTitles);
        mFragmentViewPager.setAdapter(mVpAdapter);
        mTabLl.setupWithViewPager(mFragmentViewPager);

    }

    @Override
    protected void initInjector() {

    }
}

ViewPagerAdapter .java

package com.yoostar.summary.tablayoutwithfragment;

import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.List;

/**
 * ================================================
 * 作    者:zhoujianan
 * 版    本:v1.0
 * 创建日期:2019/7/18
 * 描    述:
 * 修订历史:
 * ================================================
 */
public class ViewPagerAdapter extends FragmentPagerAdapter {
    private List<Fragment> mFragments;
    private List<String> mTitles;
    public ViewPagerAdapter(FragmentManager fm,List<Fragment> fragments,List<String> titles) {
        super(fm);
        this.mFragments = fragments;
        mTitles = titles;
    }

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
       return mTitles.get(position);
    }

    @Override
    public Fragment getItem(int position) {
        return mFragments.get(position);
    }

    @Override
    public int getCount() {
        return mFragments.size();
    }

}

DefFragment.java

package com.yoostar.summary.tablayoutwithfragment;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.yoostar.summary.R;

/**
 * ================================================
 * 作    者:zhoujianan
 * 版    本:v1.0
 * 创建日期:2019/7/18
 * 描    述:
 * 修订历史:
 * ================================================
 */
public class DefFragment extends Fragment {
    private static final String TAG = "DefFragment";
    private TextView mFragNameTv;

    public static Fragment newInstance(int type) {
        DefFragment defFragment = new DefFragment();
        Bundle bundle = new Bundle();
        bundle.putInt("type", type);
        defFragment.setArguments(bundle);
        return defFragment;
    }


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


    protected void initView(View view) {
        Bundle bundle = getArguments();
        mFragNameTv = view.findViewById(R.id.frag_name_tv);
        if (bundle != null) {
            int type = bundle.getInt("type");
            Log.i(TAG, "initView: type " + type);
            mFragNameTv.setText(type + "");
        }
    }

}

activity_tab_fragment.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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/main_bg"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:focusable="true"
        android:id="@+id/tab_ll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabBackground="@drawable/def_white_bg_selector" //设置tab的背景
        app:tabGravity="center"
        app:tabIndicatorColor="@color/color_white"
        app:tabSelectedTextColor="@color/color_black"
        app:tabTextColor="@color/color_white"/>

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

fragment_def.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/color_white">

    <TextView
        android:textColor="@color/color_black"
        android:id="@+id/frag_name_tv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:focusable="true"
        android:text="aaa"
        android:gravity="center"
        android:textSize="50sp"/>
</RelativeLayout>

def_white_bg_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:drawable="@drawable/def_white_bg"/>
</selector>

color.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="color_blue_dark">#4475AE</color>
    <color name="color_div">#c8c8c8</color>

    <color name="color_black">#000000</color>
    <color name="color_gray">#c6c6c6</color>
    <color name="color_blue">#3DA3FF</color>
    <color name="full_transparent">#00FFFFFF</color>
    <color name="color_white">#ffffff</color>
</resources>

设置ViewPager是否可以滑动

package yoostar.com.tvpartner.widget;

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;

/**
 * ================================================
 * 作    者:zhoujianan
 * 版    本:v1.0
 * 创建日期:2019/9/25
 * 描    述:
 * 修订历史:
 * ================================================
 */

public class HomeViewPager extends ViewPager {
    private boolean mScrollable;

    public HomeViewPager(@NonNull Context context) {
        super(context);
    }

    public HomeViewPager(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }


    public  void setScrollable(boolean scrollable) {
        mScrollable = scrollable;
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        if (mScrollable) {
            return super.onInterceptTouchEvent(ev);
        } else {
            return false;
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        if (mScrollable) {
            return super.onTouchEvent(ev);
        } else {
            return false;
        }
    }
}

注意重点 在电视机上不适用的两点:
一:没有焦点监听:
TabLayout没有child focus 的监听,所以,当需要在tab上进行Focus 的时候,tab的字体并不能根据focus进行改变,即使可以更改tab的背景颜色,但不能同时更改text的颜色,所以不行。
二:不方便能更改tabIndicator的长度,需要花费很大力气才能更改,还不如TextView 中设置drawablBottom方便一些。
所以,在电视端仍需要舍弃TabLayout ,直接使用LinearLayout + TextView 取代 TabLayout的效果。

小工具:动态设置tabLayout的显示模式

public class TabUtil {

   public static void dynamicSetTabLayoutMode(TabLayout tabLayout) {
       int tabWidth = calculateTabWidth(tabLayout);
       int screenWidth = getScreenWith();

       if (tabWidth <= screenWidth) {
           tabLayout.setTabMode(TabLayout.MODE_FIXED);
       } else {
           tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
       }
   }
   }

你可能感兴趣的:(Android,UI)