先看效果图,
- 如果是
Android Studio BumbleBee 2021.1.1
(大黄蜂版本),需要先在settings.
添加jcenter代理仓库maven {url "https://maven.aliyun.com/repository/public"}
,settings.gradle完整代码如下:
pluginManagement {
repositories {
gradlePluginPortal()
google()
mavenCentral()
}
}
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
repositories {
//jcenter
maven {url "https://maven.aliyun.com/repository/public"}
//必须添加的
maven {url "https://maven.aliyun.com/repository/google"}
}
}
rootProject.name = "TabLayoutDemo"
include ':app'
- 如果是比大黄蜂低的版本,还是原有的方式添加代理仓库。
- app module下build.gradle中集成
implementation 'com.flyco.tablayout:FlycoTabLayout_Lib:2.1.2@aar'
这个库的Github项目地址:https://github.com/H07000223/FlycoTabLayout,我只做点击切换效果,不做滑动切换效果,因为我的开发经验来讲,做滑动切换会有许多问题。所以我专门把ViewPager的滑动功能禁止掉了。
import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.viewpager.widget.ViewPager;
/**
* 不可以滑动,但是可以setCurrentItem的ViewPager。
*/
public class CannotScrollViewPager extends ViewPager {
public CannotScrollViewPager(@NonNull Context context) {
this(context, null);
}
public CannotScrollViewPager(@NonNull Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}
@Override
public boolean onTouchEvent(MotionEvent arg0) {
return false;
}
@Override
public boolean onInterceptTouchEvent(MotionEvent arg0) {
return false;
}
}
- 开始写主布局
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.flyco.tablayout.SlidingTabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_alignParentTop="true"
app:tl_indicator_color="#4F9AFF"
app:tl_indicator_corner_radius="3dp"
app:tl_indicator_gravity="BOTTOM"
app:tl_indicator_height="4dp"
app:tl_indicator_margin_bottom="8dp"
app:tl_indicator_width="40dp"
app:tl_tab_space_equal="true"
app:tl_textSelectColor="#ff313543"
app:tl_textUnselectColor="#99313543"
app:tl_textsize="15sp"
app:tl_textBold="BOTH"/>
<com.zj.tablayoutdemo.CannotScrollViewPager
android:id="@+id/vp"
android:layout_below="@id/tabs"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
MainAcitivity代码
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import android.os.Bundle;
import com.flyco.tablayout.SlidingTabLayout;
public class MainActivity extends AppCompatActivity {
SlidingTabLayout tabLayout;
String[] nameList = new String[]{"课堂报告","学习记录"};
CannotScrollViewPager viewPager;
private Fragment[] fragments;
private ReportFragmentAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tabLayout = findViewById(R.id.tabs);
viewPager = findViewById(R.id.vp);
fragments = new Fragment[2];
fragments[0] = new RedFragment();
fragments[1] = new BlueFragment();
adapter = new ReportFragmentAdapter(getSupportFragmentManager(), fragments, nameList);
viewPager.setAdapter(adapter);
viewPager.setOffscreenPageLimit(2);
tabLayout.setViewPager(viewPager, nameList);
}
}
下面是 BlueFragment、RedFragment、ReportFragmentAdapter代码:
public class RedFragment extends Fragment {
View view;
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
view = inflater.inflate(R.layout.fragment_red, container, false);
return view;
}
}
public class BlueFragment extends Fragment {
View view;
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
view = inflater.inflate(R.layout.fragment_blue, container, false);
return view;
}
}
public class ReportFragmentAdapter extends FragmentPagerAdapter {
private String[] mTitle;
private Fragment[] fragments;
public ReportFragmentAdapter(FragmentManager fm, Fragment[] fragments, String[] pageNames) {
super(fm);
this.fragments = fragments;
this.mTitle = pageNames;
}
@Override
public Fragment getItem(int i) {
return fragments[i];
}
@Override
public int getCount() {
return fragments.length;
}
@Override
public CharSequence getPageTitle(int position) {
return mTitle[position];
}
}
RedFragment对应的布局文件,BlueFragment的布局文件就不用贴了吧。搞定。
<?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="#ff0000"
>
</RelativeLayout>