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);
}

 

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