Android 小技巧之 TabLayout

作者: Kevin_小飞象 | 来源:发表于2019-06-11 17:58 被阅读0次

TabLayout 是 Android Design Support Library 库中的控件。

1. 配置 app/build.gradle

dependencies {
    implementation 'com.android.support:design:28.0.0'
    implementation 'com.android.support:recyclerview-v7:28.0.0'
    implementation 'com.android.support:cardview-v7:28.0.0'
    implementation 'com.zhy:base-rvadapter:3.0.3'
}

2. 在 styles.xml 中设置 TabLayout 样式

<resources xmlns:tools="http://schemas.android.com/tools">

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <!--<item name="colorAccent">@color/colorAccent</item>-->
        <item name="actionBarStyle">@style/MyActionBar</item>
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:windowTranslucentStatus">false</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:windowLightStatusBar" tools:targetApi="23">true</item>
        <item name="actionButtonStyle">@style/AppTheme.Widget.ActionButton</item>
    </style>

    <!-- Action Bar Title Color. -->
    <style name="MyActionBar" parent="@style/Widget.AppCompat.ActionBar.Solid">
        <item name="titleTextStyle">@style/MyTitleTextStyle</item>
        <item name="android:layout_marginTop">-25dp</item>

    </style>
    <style name="MyTitleTextStyle" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
        <item name="android:textColor">@android:color/white</item>
    </style>

    <style name="AppTheme.Widget.ActionButton" parent="@style/Widget.AppCompat.ActionButton">
        <item name="textAllCaps">false</item>
    </style>

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>

    </style>

    <declare-styleable name="CircleImageView">
        <attr name="border_width" format="dimension" />
        <attr name="border_color" format="color" />
    </declare-styleable>

    <!-- 设置tablayout样式 -->
    <style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
        <item name="tabTextAppearance">@style/MyCustomTextAppearance</item>
    </style>
    <style name="MyCustomTextAppearance" parent="TextAppearance.Design.Tab">
        <item name="textAllCaps">false</item>
        <item name="android:textAllCaps">false</item>
    </style>

</resources>

3. 使用 style 样式

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.scarf.testonboarding">

    <uses-permission android:name="android.permission.CAMERA" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".ui.SecondActivity"></activity>
        <activity android:name=".MainActivity"
            android:theme="@style/AppTheme.NoActionBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

4. 布局文件 & 代码

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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:background="@color/colorPrimaryDark">

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="一般用法"
            android:textColor="#fff"
            android:textSize="16sp"/>

    </RelativeLayout>

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        style="@style/MyCustomTabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        android:textSize="16sp"
        app:tabBackground="@color/colorPrimaryDark"
        app:tabIndicatorColor="@color/white"
        app:tabIndicatorHeight="5dp"
        app:tabSelectedTextColor="@color/white"
        app:tabTextColor="@color/tabUnselect" />


    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

2)MainActivity.java

public class MainActivity extends AppCompatActivity {
    private TabLayout tabLayout;
    private ViewPager viewPager;
    private FmPagerAdapter mAdapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
    }

    private void init() {
        tabLayout = findViewById(R.id.tablayout);
        viewPager = findViewById(R.id.viewpager);
        viewPager.setOffscreenPageLimit(3);
        mAdapter = new FmPagerAdapter(this,getSupportFragmentManager());
        viewPager.setAdapter(mAdapter);
        tabLayout.setupWithViewPager(viewPager);
    }
}

3)FmPagerAdapter.java

/**
 * Created on 2019/6/11 3:29 PM
 *
 * @author Scarf Gong
 */
public class FmPagerAdapter extends FragmentPagerAdapter {
    public static final int NUM_OF_TABS = 3;
    private Context mContext;

    private NewFragment mNewFragment;
    private HotFragment mHotFragment;
    private MineFragment mMineFragment;

    public FmPagerAdapter(Context context, FragmentManager fm) {
        super(fm);
        this.mContext = context;
    }

    @Override
    public int getCount() {
        return NUM_OF_TABS;
    }

    @Override
    public Fragment getItem(int position) {
        switch (position) {
            case 0:
                mNewFragment = new NewFragment();
                return mNewFragment;
            case 1:
                mHotFragment = new HotFragment();
                return mHotFragment;
            case 2:
                mMineFragment = new MineFragment();
                return mMineFragment;
            default:
                return null;
        }
    }

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        switch (position) {
            case 0:
                return mContext.getString(R.string.title_fragment_new);
            case 1:
                return mContext.getString(R.string.title_fragment_hot);
            case 2:
                return mContext.getString(R.string.title_fragment_mine);
            default:
                return null;
        }
    }
}

4)NewFragment.java (3 个Fragment 类似)

public class NewFragment extends Fragment {
    private String[] nameDatas = new String[]{"智能","红润","日系","自然","艺术黑白","甜美","蜜粉","清新","夏日阳光","唯美","蜜粉",};
    private RecyclerView recyclerView;
    private CommonAdapter<String> adapter;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view = inflater.inflate(R.layout.fragment_new, container, false);
        initData(view);
        return view;
    }

    private void initData(View view) {
        recyclerView = view.findViewById(R.id.rv);
        recyclerView.setLayoutManager(new GridLayoutManager(getActivity(),3));
        adapter = new CommonAdapter<String>(getActivity(),R.layout.item, Arrays.asList(nameDatas)) {
            @Override
            protected void convert(ViewHolder holder, String s, int position) {
                TextView title = holder.getConvertView().findViewById(R.id.tv_title);
                title.setText(nameDatas[position]);
            }
        };
        recyclerView.setAdapter(adapter);
    }

}

5)fragment_new.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".fragment.HotFragment">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</FrameLayout>

6)item.xml

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

    <android.support.v7.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardCornerRadius="5dp"
        app:cardElevation="3dp"
        android:layout_margin="8dp"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:android="http://schemas.android.com/apk/res/android">

        <ImageView
            android:id="@+id/iv_cover"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:scaleType="centerCrop"
            android:src="@mipmap/ic_launcher_round"/>
    </android.support.v7.widget.CardView>

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:text="@string/hello_blank_fragment"
        android:layout_margin="10dp"/>

</LinearLayout>

5. 效果图

tablayout.jpg

Android 小技巧之 TabLayout

1. 配置 app/build.gradle

2. 在 styles.xml 中设置 TabLayout 样式

3. 使用 style 样式

4. 布局文件 & 代码

5. 效果图

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读