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