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 ids = new HashMap(); //配对tabview的id对应的页面    private TextView cursor;//游标    private ViewPager viewpager;//viewpager容器    private ArrayList views;//标题    private ArrayList fragments;//fragments集合    public CustomTabHost(){}    //构造函数    public CustomTabHost(AppCompatActivity activity, TextView cursor,ViewPager viewPager,ArrayList views, ArrayList 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;iint 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 viewLists;        public ViewPagerAdapter(FragmentManager fm, ArrayList 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 views = new ArrayList<>();        views.add(tv_one);        views.add(tv_two);        //创建fragment集合        ArrayList 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颜色    }

Android使用ViewPager+Fragment实现定制TabHost选项卡效果

Android使用ViewPager+Fragment实现定制TabHost选项卡效果

效果图

1、创建Activity

Avtivity布局文件

2、创建Fragment

Fragment布局文件

3、实现CustomTabHost类仿制TabHost效果

关键函数说明

4、在Activity中使用

更多相关文章

随机推荐