您的位置:首页 > 其它

实例—ViewPager+RadioGroup实现底部导航栏和页面的滑动

2017-03-07 21:02 639 查看
实例效果图:



1.创建5个Fragment和布局。分别返回相应的布局registerfragment0,1,2,3,4,;

RegisterFragment0代码如下:

public class RegisterFragment0 extends Fragment{

    @Nullable

    @Override

    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        View registerfragment0 = inflater.inflate(R.layout.registerfragment0, null);

        return registerfragment0;

    }

}
2.在MainActivity布局文件中添加ViewPager,RadioGroup,和五个RadioButton;

代码如下:

<LinearLayout

    android:orientation="vertical"

    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="com.zhiyuan3g.lipinhui.MainActivity">

    <android.support.v4.view.ViewPager

        android:layout_weight="9"

        android:layout_width="match_parent"

        android:layout_height="0dp"

        android:id="@+id/view"></android.support.v4.view.ViewPager>

    <RadioGroup

        android:layout_weight="1"

        android:id="@+id/radio"

        android:layout_alignParentBottom="true"

        android:orientation="horizontal"

        android:layout_width="match_parent"

        android:layout_height="0dp">

        <RadioButton

            android:layout_weight="1"

            android:textColor="#D81E06"

            android:text="首页"

            android:id="@+id/radiobtn_mian"

            android:drawableTop="@drawable/maintrue"

            android:gravity="center"

            android:button="@null"

            android:layout_width="wrap_content"

            android:layout_height="match_parent"/>

        <RadioButton

            android:layout_weight="1"

            android:text="附近"

            android:drawableTop="@drawable/nearbyfalse"

            android:gravity="center"

            android:button="@null"

            android:id="@+id/radiobtn_nearby"

            android:layout_width="wrap_content"

            android:layout_height="match_parent"/>

        <RadioButton

            android:layout_weight="1"

            android:text="发现"

            android:drawableTop="@drawable/findfalse"

            android:gravity="center"

            android:button="@null"

            android:id="@+id/radiobtn_find"

            android:layout_width="wrap_content"

            android:layout_height="match_parent"/>

        <RadioButton

            android:layout_weight="1"

            android:text="购物车"

            android:drawableTop="@drawable/carfalse"

            android:gravity="center"

            android:button="@null"

            android:id="@+id/radiobtn_car"

            android:layout_width="wrap_content"

            android:layout_height="match_parent"/>

        <RadioButton

            android:layout_weight="1"

            android:text="我"

            android:drawableTop="@drawable/mefalse"

            android:gravity="center"

            android:button="@null"

            android:id="@+id/radiobtn_me"

            android:layout_width="wrap_content"

            android:layout_height="match_parent"/>

    </RadioGroup>

</LinearLayout>
3.实例化ViewPager,通过LayoutInflater加载布局,返回view结果



5.把生成的每一个view对象添加到List集合中



6.实例化适配器,view集合传递过去

MyMainActivityadapter adapter = new MyMainActivityadapter(list);

mViewPager.setAdapter(adapter);
7.在适配器中,继承自PagerAdapter,实现内部的四个方法

代码如下:

public class MyMainActivityadapter extends PagerAdapter{

    private List<View>list;

    public MyMainActivityadapter(List<View> list) {

        this.list = list;

    }

    @Override

    public int getCount() {

        return list.size();

    }

    @Override

    public boolean isViewFromObject(View view, Object object) {

        return view ==object;

    }

    @Override

    public Object instantiateItem(ViewGroup container, int position) {

        container.addView(list.get(position));

        return list.get(position);

    }

    @Override

    public void destroyItem(ViewGroup container, int position, Object object) {

        container.removeView(list.get(position));

    }

}
8.实例化每一个redioButton



9.当点击每个radioButtion时,切换不同的页面,给RadioGroup添加监听.setOnCheckedChangeListener();

代码如下:

public void onCheckedChanged(RadioGroup group, int checkedId) {

        switch (checkedId) {

            case R.id.radiobtn_mian:

                mViewPager.setCurrentItem(0);

                break;

            case R.id.radiobtn_nearby:

                mViewPager.setCurrentItem(1);

                break;

            case R.id.radiobtn_find:

                mViewPager.setCurrentItem(2);

                break;

            case R.id.radiobtn_car:

                mViewPager.setCurrentItem(3);

                break;

            case R.id.radiobtn_me:

                mViewPager.setCurrentItem(4);

                break;

        }

    }
10.当页面切换后,还要把当前的导航栏变为绿色

设置文本颜色和替换上方的图片。


setTextColcr(getResources().getColor(R.color.rediobutton));

setCompoundDrawablesWithIntrinsicBounds(null,getResources().getColor(R.drawable.mess_t),null,null)
11.当你每次点击之前的时候,添加一个方法,清除方法(清理之前的所有导航栏的状态,置为黑色)

代码如下:

private void clearStart() {

        radiobtn_main.setTextColor(getResources().getColor(R.color.back));

        radiobtn_main.setCompoundDrawablesWithIntrinsicBounds(null,getResources().getDrawable(R.drawable.mainfalse),null,null);

        radiobtn_nearby.setTextColor(getResources().getColor(R.color.back));

        radiobtn_nearby.setCompoundDrawablesWithIntrinsicBounds(null,getResources().getDrawable(R.drawable.nearbyfalse),null,null);

        radiobtn_find.setTextColor(getResources().getColor(R.color.back));

        radiobtn_find.setCompoundDrawablesWithIntrinsicBounds(null,getResources().getDrawable(R.drawable.findfalse),null,null);

        radiobtn_car.setTextColor(getResources().getColor(R.color.back));

        radiobtn_car.setCompoundDrawablesWithIntrinsicBounds(null,getResources().getDrawable(R.drawable.carfalse),null,null);

        radiobtn_me.setTextColor(getResources().getColor(R.color.back));

        radiobtn_me.setCompoundDrawablesWithIntrinsicBounds(null,getResources().getDrawable(R.drawable.mefalse),null,null);

    }
12.实现滑动监听需要addOnPageChangeListener

mViewPager.addOnPageChangeListener(this);出现三个方法;




13.在onPageSeleted方法中,根据position页面的下标判断分别设置对应的地步导航栏状态,在开始的时候先清理一下;



MainActivity代码如下:

public class MainActivity extends AppCompatAc
c62e
tivity implements RadioGroup.OnCheckedChangeListener, ViewPager.OnPageChangeListener {

    private ViewPager mViewPager;

    private List<View>list;

    private RadioGroup mRadioGroup;

    private RadioButton radiobtn_main,radiobtn_nearby,radiobtn_find,radiobtn_car,radiobtn_me;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        initView();

    }

    private void initView() {

        list =new ArrayList<>();

        mRadioGroup = (RadioGroup) findViewById(R.id.radio);

        radiobtn_main = (RadioButton) findViewById(R.id.radiobtn_mian);

        radiobtn_nearby = (RadioButton) findViewById(R.id.radiobtn_nearby);

        radiobtn_find = (RadioButton) findViewById(R.id.radiobtn_find);

        radiobtn_car = (RadioButton) findViewById(R.id.radiobtn_car);

        radiobtn_me = (RadioButton) findViewById(R.id.radiobtn_me);

        mRadioGroup.setOnCheckedChangeListener(this);

        mViewPager = (ViewPager) findViewById(R.id.view);

        mViewPager.addOnPageChangeListener(this);

        View registerfragment0 = LayoutInflater.from(this).inflate(R.layout.registerfragment0, null);

        View registerfragment1 = LayoutInflater.from(this).inflate(R.layout.registerfragment1, null);

        View registerfragment2 = LayoutInflater.from(this).inflate(R.layout.registerfragment2, null);

        View registerfragment3 = LayoutInflater.from(this).inflate(R.layout.registerfragment3, null);

        View registerfragment4 = LayoutInflater.from(this).inflate(R.layout.registerfragment4, null);

        list.add(registerfragment0);

        list.add(registerfragment1);

        list.add(registerfragment2);

        list.add(registerfragment3);

        list.add(registerfragment4);

        MyMainActivityadapter adapter = new MyMainActivityadapter(list);

        mViewPager.setAdapter(adapter);

    }

    @Override

    //RadioGroup监听

    public void onCheckedChanged(RadioGroup group, int checkedId) {

        clearStart();

        switch (checkedId) {

            case R.id.radiobtn_mian:

                mViewPager.setCurrentItem(0);

                radiobtn_main.setTextColor(getResources().getColor(R.color.radiobuttoncolor));

                radiobtn_main.setCompoundDrawablesWithIntrinsicBounds(null,getResources().getDrawable(R.drawable.maintrue),null,null);

                break;

            case R.id.radiobtn_nearby:

                mViewPager.setCurrentItem(1);

                radiobtn_nearby.setTextColor(getResources().getColor(R.color.radiobuttoncolor));

                radiobtn_nearby.setCompoundDrawablesWithIntrinsicBounds(null,getResources().getDrawable(R.drawable.nearbytrue),null,null);

                break;

            case R.id.radiobtn_find:

                mViewPager.setCurrentItem(2);

                radiobtn_find.setTextColor(getResources().getColor(R.color.radiobuttoncolor));

                radiobtn_find.setCompoundDrawablesWithIntrinsicBounds(null,getResources().getDrawable(R.drawable.findtrue),null,null);

                break;

            case R.id.radiobtn_car:

                mViewPager.setCurrentItem(3);

                radiobtn_car.setTextColor(getResources().getColor(R.color.radiobuttoncolor));

                radiobtn_car.setCompoundDrawablesWithIntrinsicBounds(null,getResources().getDrawable(R.drawable.cartrue),null,null);

                break;

            case R.id.radiobtn_me:

                mViewPager.setCurrentItem(4);

                radiobtn_me.setTextColor(getResources().getColor(R.color.radiobuttoncolor));

                radiobtn_me.setCompoundDrawablesWithIntrinsicBounds(null,getResources().getDrawable(R.drawable.metrue),null,null);

                break;

        }

    }

    //清除方法;

    private void clearStart() {

        radiobtn_main.setTextColor(getResources().getColor(R.color.back));

        radiobtn_main.setCompoundDrawablesWithIntrinsicBounds(null,getResources().getDrawable(R.drawable.mainfalse),null,null);

        radiobtn_nearby.setTextColor(getResources().getColor(R.color.back));

        radiobtn_nearby.setCompoundDrawablesWithIntrinsicBounds(null,getResources().getDrawable(R.drawable.nearbyfalse),null,null);

        radiobtn_find.setTextColor(getResources().getColor(R.color.back));

        radiobtn_find.setCompoundDrawablesWithIntrinsicBounds(null,getResources().getDrawable(R.drawable.findfalse),null,null);

        radiobtn_car.setTextColor(getResources().getColor(R.color.back));

        radiobtn_car.setCompoundDrawablesWithIntrinsicBounds(null,getResources().getDrawable(R.drawable.carfalse),null,null);

        radiobtn_me.setTextColor(getResources().getColor(R.color.back));

        radiobtn_me.setCompoundDrawablesWithIntrinsicBounds(null,getResources().getDrawable(R.drawable.mefalse),null,null);

    }

    

//ViewPager的监听

    @Override

    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override

    public void onPageSelected(int position) {

        clearStart();

        switch (position){

            case 0:

                radiobtn_main.setTextColor(getResources().getColor(R.color.radiobuttoncolor));

                radiobtn_main.setCompoundDrawablesWithIntrinsicBounds(null,getResources().getDrawable(R.drawable.maintrue),null,null);

                break;

            case 1:

                radiobtn_nearby.setTextColor(getResources().getColor(R.color.radiobuttoncolor));

                radiobtn_nearby.setCompoundDrawablesWithIntrinsicBounds(null,getResources().getDrawable(R.drawable.nearbytrue),null,null);

                break;

            case 2:

                radiobtn_find.setTextColor(getResources().getColor(R.color.radiobuttoncolor));

                radiobtn_find.setCompoundDrawablesWithIntrinsicBounds(null,getResources().getDrawable(R.drawable.findtrue),null,null);

                break;

            case 3:

                radiobtn_car.setTextColor(getResources().getColor(R.color.radiobuttoncolor));

                radiobtn_car.setCompoundDrawablesWithIntrinsicBounds(null,getResources().getDrawable(R.drawable.cartrue),null,null);

                break;

            case 4:

                radiobtn_me.setTextColor(getResources().getColor(R.color.radiobuttoncolor));

                radiobtn_me.setCompoundDrawablesWithIntrinsicBounds(null,getResources().getDrawable(R.drawable.metrue),null,null);

                break;

        }

    }

    @Override

    public void onPageScrollStateChanged(int state) {

    }

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息