Android开发基础------使用RollPagerView+LoopPagerAdapter实现轮播图无线循环滚动,并设置标题栏

Android实现信息展示时,使用轮播图是比较常态化的,轮播图展示内容,既美观又大方。

实现效果

效果图

在layout-xml(layout\fragment_home.xml)布局文件中可以这样定义

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/ll_conv"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    >
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    <com.jude.rollviewpager.RollPagerView
        android:id="@+id/vp_lunbo"
        android:layout_width="match_parent"
        android:layout_height="220dp"
        android:background="#66000000"
        app:rollviewpager_play_delay="3000"/>
    <LinearLayout
        android:padding="5dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:gravity="center_horizontal"
        android:background="#66000000"
        android:orientation="vertical"
        android:layout_gravity="bottom"
        >
        <TextView
            android:id="@+id/textview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:singleLine="true"
            android:textColor="#fff"
            android:textSize="20dp"
            android:text="Content"
            />
        <LinearLayout
            android:id="@+id/ll_point"
            android:gravity="center_horizontal"
            android:orientation="horizontal"
            android:layout_marginTop="5dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            />
    </LinearLayout>
    </FrameLayout>
</LinearLayout>

使用帧布局将标题(TextView)内容层叠显示在底部,设置透明黑底#66000000,控件为com.jude.rollviewpager.RollPagerView

在Java-Activity文件中,内部类继承LoopPagerAdapter适配器。

public class VpageAdapter extends LoopPagerAdapter {
        String[] imgs = new String[0];
        private Context mContext;
        public VpageAdapter(Context mContext,RollPagerView viewPager) {
            super(viewPager);
            this.mContext = mContext;
        }
        @Override
        public int getItemPosition(Object object) {
            int pos = super.getItemPosition(object);
            return pos;
        }
        @Nullable
        @Override
        public CharSequence getPageTitle(int position) {
            return super.getPageTitle(position);
        }
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            textView.setText(Constants.title[position%3]);    //标题设置关键部分
            return super.instantiateItem(container, position);
        }
        @Override
        public View getView(ViewGroup container, int position) {
            ImageView view = new ImageView(container.getContext());
            view.setScaleType(ImageView.ScaleType.CENTER_CROP);
            view.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
            Glide.with(mContext).load(Constants.URL[position]).into(view);
            textView.setText(Constants.title[position]);
            return view;
        }
        @Override
        public int getRealCount() {
            return Constants.URL.length;
        }
    }

定义图片文件和标题文字部分

private static class Constants{
        public static String[] URL = {
                "http://5b0988e595225.cdn.sohucs.com/images/20200308/4df8913d937e4171aaaa8d5ce4c8ef2b.JPG",
                "http://5b0988e595225.cdn.sohucs.com/images/20200308/5155c0bce4d54384808419829e1472dc.jpeg",
                "http://5b0988e595225.cdn.sohucs.com/images/20200308/fcae688df0cc4197b7c6ea35807852e9.jpeg",
        };
        public static String[] title = {
                "美国感染新冠病毒人数急剧攀升",
            "美国总统特朗普发表新型冠状肺炎看法",
                "新冠疫苗研发出现突破性进展"
        };
    }
}

在页面创建时,设置适配器

public View onCreateView(@NonNull LayoutInflater inflater,
                             ViewGroup container, Bundle savedInstanceState) {
        View root = inflater.inflate(R.layout.fragment_home, container, false);
        //轮播图
        vp_lunbo = root.findViewById(R.id.vp_lunbo);    //RollPagerView组件
        textView = root.findViewById(R.id.textview);    //标题文本内容
        VpageAdapter vpageAdapter = new VpageAdapter(this.getActivity(),vp_lunbo);
        vp_lunbo.setAdapter(vpageAdapter);
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章