android Fragment与ViewPager,自画指示器的一个应用

示例图:

这里写图片描述

main
public class TestActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener, ViewPager.OnPageChangeListener {

    RadioGroup rg;
    RadioButton rb1, rb2;
    ViewPager vp;
    View v_v;

    List<Fragment> fragments = new ArrayList<>();

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test);
        rg = (RadioGroup) findViewById(R.id.rg);
        vp = (ViewPager) findViewById(R.id.vp);
        v_v = findViewById(R.id.v_v);
        rb1 = (RadioButton) findViewById(R.id.rb1);
        rb2 = (RadioButton) findViewById(R.id.rb2);


        fragments.add(new OneFragment());
        fragments.add(new TwoFragment());
        //设置ViewPager的适配器
        vp.setAdapter(new MyFragmentAdapter(getSupportFragmentManager(), fragments));

        rg.setOnCheckedChangeListener(this);
        vp.addOnPageChangeListener(this);
        rg.check(R.id.rb1);
        rb1.setTextColor(getResources().getColor(R.color.colorAccent));
        indicator();

    }


    //将他做成 1半
    int width;

    public void indicator() {
        width = getResources().getDisplayMetrics().widthPixels / 2;
        FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(width, ViewGroup.LayoutParams.MATCH_PARENT);
        v_v.setLayoutParams(params);
    }


//RadioGroup 的点击事件
    @Override
    public void onCheckedChanged(RadioGroup radioGroup, @IdRes int i) {
        vp.setCurrentItem(i == R.id.rb1 ? 0 : 1);
        if (i == R.id.rb1) {
            rb1.setTextColor(getResources().getColor(R.color.colorAccent));
            rb2.setTextColor(getResources().getColor(R.color.colorPrimaryDark));
        } else {
            rb1.setTextColor(getResources().getColor(R.color.colorPrimaryDark));
            rb2.setTextColor(getResources().getColor(R.color.colorAccent));
        }
    }

//下面是ViewPager的滑动事件 设置下面的指示器,以及fragment的选择
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) v_v.getLayoutParams();
        int left = (int) ((position + positionOffset) * width);
        params.setMargins(left, 0, 0, 0);
        v_v.setLayoutParams(params);
    }

    @Override
    public void onPageSelected(int position) {
        rg.check(position == 0 ? R.id.rb1 : R.id.rb2);
        if (position == 0) {
            rb1.setTextColor(getResources().getColor(R.color.colorAccent));
            rb2.setTextColor(getResources().getColor(R.color.colorPrimaryDark));
        } else {
            rb2.setTextColor(getResources().getColor(R.color.colorAccent));
            rb1.setTextColor(getResources().getColor(R.color.colorPrimaryDark));
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }


    //ViewPager的适配器
    class MyFragmentAdapter extends FragmentPagerAdapter

    {


        private final List<Fragment> mList;

        public MyFragmentAdapter(FragmentManager fm, List<Fragment> mList) {
            super(fm);
            this.mList = mList;
        }

        @Override
        public Fragment getItem(int position) {
            return mList.get(position);
        }

        @Override
        public int getCount() {
            return mList.size();
        }
    }


}
两个fragment
public class OneFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        TextView tv = new TextView(getActivity());
        tv.setText("这是第一个界面");
        tv.setTextSize(50);
        return tv;

    }
}



public class TwoFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        TextView tv = new TextView(getActivity());
        tv.setText("这是空白界面");
        tv.setTextSize(50);
        return tv;

    }
}

xml
<?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"
    android:orientation="vertical">

    <RadioGroup
        android:id="@+id/rg"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/rb1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:gravity="center"
            android:text="第一个" />

        <RadioButton
            android:id="@+id/rb2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:gravity="center"
            android:text="第二个" />
    </RadioGroup>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="3dp">

        <View
            android:layout_width="match_parent"
            android:layout_height="1px"
            android:layout_gravity="center"
            android:background="@android:color/darker_gray" />

        <View
            android:id="@+id/v_v"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/holo_red_light" />
    </FrameLayout>

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

</LinearLayout>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
ViewPager指示器是用来显示ViewPager当前页面位置的小组件,一般位于ViewPager的底部或顶部。下面给出一个简单的ViewPager指示器的实现方法。 首先,我们需要在布局文件添加一个ViewPager和一个指示器组件,可以使用LinearLayout或RelativeLayout等布局容器。 ``` <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <androidx.viewpager.widget.ViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="match_parent"/> <LinearLayout android:id="@+id/indicator" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:orientation="horizontal"/> </RelativeLayout> ``` 其ViewPager的id为view_pager,指示器的id为indicator,指示器使用LinearLayout实现,其包含若干个ImageView组件。 接下来,我们需要在代码实现ViewPager指示器的逻辑。具体步骤如下: 1. 在Activity或Fragment获取ViewPager和指示器组件的引用。 2. 创建一个ImageView数组,长度为ViewPager的页面数量。 3. 遍历ImageView数组,为每个ImageView设置未选状态的图片,并将其添加到指示器组件。 4. 监听ViewPager的页面滑动事件,根据页面位置更新指示器的状态。 示例代码如下: ``` private ViewPager mViewPager; private LinearLayout mIndicator; private ImageView[] mImageViews; private void initIndicator() { int count = mViewPager.getAdapter().getCount(); mImageViews = new ImageView[count]; for (int i = 0; i < count; i++) { mImageViews[i] = new ImageView(this); mImageViews[i].setImageResource(R.drawable.indicator_unselected); LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT); lp.setMargins(10, 0, 10, 0); mIndicator.addView(mImageViews[i], lp); } mImageViews[0].setImageResource(R.drawable.indicator_selected); mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { for (int i = 0; i < mImageViews.length; i++) { mImageViews[i].setImageResource(R.drawable.indicator_unselected); } mImageViews[position].setImageResource(R.drawable.indicator_selected); } @Override public void onPageScrollStateChanged(int state) { } }); } ``` 在initIndicator()方法,我们首先获取ViewPager和指示器组件的引用,然后创建一个ImageView数组,长度为ViewPager的页面数量。接着,我们遍历ImageView数组,为每个ImageView设置未选状态的图片,并将其添加到指示器组件。最后,我们监听ViewPager的页面滑动事件,根据页面位置更新指示器的状态。 注意,这里使用了两种不同的图片作为指示器的状态图,一种是未选状态的图片,另一种是选状态的图片。这两种图片可以根据自己的需求进行替换。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值