版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/AustinBoris/article/details/79669177
Android使用ViewPager+Fragment实现定制TabHost选项卡效果
使用viewpager和fragment实现tabhost效果的步骤如下
- 创建Activity
- 创建Fragment
- 开始定制CustomTabHost类
- 在Activity中使用
效果图
1、创建Activity
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.act_mineproject);
initViews();
}
}Avtivity布局文件
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="#eee"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:background="#fff"
android:layout_width="fill_parent"
android:layout_height="48dp">
<TextView
android:id="@+id/tv_one"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:gravity="center"
android:text="选项卡一"
android:textColor="#000000" />
<TextView
android:id="@+id/tv_two"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:gravity="center"
android:text="选项卡二"
android:textColor="#000000" />
</LinearLayout>
<TextView
android:id="@+id/text_cursor"
android:background="#0077c7"
android:layout_width="40dp"
android:layout_height="3dp" />
<android.support.v4.view.ViewPager
android:layout_marginTop="5dp"
android:background="#fff"
android:id="@+id/viewpager"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1.0"
android:flipInterval="30"
android:persistentDrawingCache="animation" />
</LinearLayout>2、创建Fragment
如有多个fragment，请先各自创建好fragment
public class VicinalProjectFragment extends Fragment {
private Context context;
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.frag_mineproject_vicinal,container,false);
context = view.getContext();
return view;
}
}Fragment布局文件
<?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">
<TextView
android:text="6666"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>3、实现CustomTabHost类仿制TabHost效果
/**
* Created by jenkins on 2018/3/23.
*/
public class CustomTabHost implements View.OnClickListener,
ViewPager.OnPageChangeListener{
private AppCompatActivity activity;//应用上下文
private int second =200;//滑动条动画经历的秒数
private int screenWidth;//屏幕宽度
private int currentIndex = 0;//当前页面
private Map<Integer,Integer> ids = new HashMap<Integer,Integer>(); //配对tabview的id对应的页面
private TextView cursor;//游标
private ViewPager viewpager;//viewpager容器
private ArrayList<TextView> views;//标题
private ArrayList<Fragment> fragments;//fragments集合
public CustomTabHost(){}
//构造函数
public CustomTabHost(AppCompatActivity activity, TextView cursor,ViewPager viewPager,ArrayList<TextView> views, ArrayList<Fragment> fragments){
this.activity = activity;
this.cursor = cursor;
this.viewpager = viewPager;
this.views = views;
this.fragments = fragments;
initViews();
}
public CustomTabHost setProcessTime(int secend){
this.second = secend;
return this;
}
public void initViews(){
//step 1：获取屏幕宽度
DisplayMetrics dm = new DisplayMetrics();
activity.getWindowManager().getDefaultDisplay().getMetrics(dm);
screenWidth = dm.widthPixels;
//step 2：初始化滑动条的宽度，用textview作滑动条
ViewGroup.LayoutParams params = cursor.getLayoutParams();
params.width = screenWidth/views.size();//计算滑动条得到宽度
cursor.setLayoutParams(params);
//step 3 : 初始化fragmentmanager
FragmentManager fm = activity.getSupportFragmentManager();
//step 4: 初始化fragment适配器
ViewPagerAdapter fragmentAdapter = new ViewPagerAdapter(fm,fragments);
//step 5：为viewpager设置适配器
viewpager.setAdapter(fragmentAdapter);
viewpager.setCurrentItem(0);
viewpager.addOnPageChangeListener(this);
setClickListenter();
}
public CustomTabHost setClickListenter(){
int length = views.size();
if (length==0)return this;
for(int i =0;i<length;i++){
TextView view = views.get(i);
int id = view.getId();
ids.put(id,i);
view.setOnClickListener(this);
}
return this;
}
@Override
public void onPageSelected(int target) {
Animation animation = null;
//计算当前页面对应的游标的x轴距离
int currentX = screenWidth * currentIndex / views.size();
//计算目标页面对应游标的x轴距离
int targetX = screenWidth * target /views.size();
animation = new TranslateAnimation(currentX, targetX, 0, 0);
currentIndex = target;//更新当前页面
animation.setFillAfter(true);// true表示图片停在动画结束位置
animation.setDuration(second); //设置动画时间
cursor.startAnimation(animation);
}
public CustomTabHost setCursorColor(int color){
cursor.setBackgroundColor(color);
return this;
}
@Override
public void onPageScrollStateChanged(int state) {
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onClick(View view) {
//Toast.makeText(activity, "view "+ids.get(view.getId()), Toast.LENGTH_SHORT).show();
viewpager.setCurrentItem(ids.get(view.getId()));
}
//ViewpagerAdapter内部类
public class ViewPagerAdapter extends FragmentPagerAdapter {
private FragmentManager fragmetnmanager; //创建FragmentManager
private ArrayList<android.support.v4.app.Fragment> viewLists;
public ViewPagerAdapter(FragmentManager fm, ArrayList<android.support.v4.app.Fragment> viewLists) {
super(fm);
this.viewLists = viewLists;
this.fragmetnmanager = fm;
}
@Override
public int getCount() {
return viewLists.size();
}
@Override
public android.support.v4.app.Fragment getItem(int arg0) {
return viewLists.get(arg0); //返回第几个fragment
}
}
}关键函数说明
- initView()用于初始化TabHost的选项菜单
- setProcessTime()函数用于设置滑动条的滑动事件
- setCursorColor()函数用于设置滑动条的颜色
- onPageSelected()函数响应viewpager更改页面时的动作
4、在Activity中使用
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.act_mineproject);
initViews();
}
public void initViews(){
//step 1：初始化控件
TextView tv_one = findViewById(R.id.tv_one);
TextView tv_two = findViewById(R.id.tv_two);
TextView cursor = findViewById(R.id.text_cursor);
ViewPager viewPager = findViewById(R.id.viewpager);
//创建tab集合
ArrayList<TextView> views = new ArrayList<>();
views.add(tv_one);
views.add(tv_two);
//创建fragment集合
ArrayList<Fragment> fragments = new ArrayList<>();
fragments.add(new VicinalProjectFragment());
fragments.add(new ReceivedInvitationFragment());
//初始化CustomTabHost
new CustomTabHost(this,cursor,viewPager,views,fragments)
//参数分别为：上下文，游标，viewpager，标题集合，fragment集合
.setProcessTime(200) //设置滑动条的动画时间
//或者可以填写Color.BLUE或其他颜色，也可以使用RGB颜色
}